LogoLogo
  • Introduction
  • Ebbot Platform
  • Bot basics
    • Scenarios
    • Entities
    • Triggers
    • Training center
  • Scenarios
    • Cards and syntax
      • File Input
      • Text card
      • Input
      • Buttons
      • Image
      • File
      • Carousel
      • Location
      • List
      • Contact Agent
      • Rating request
      • Custom component
      • CoBrowsing
    • Transition
    • Card properties
  • AI Insights
    • Setup and Configuration
    • Using the Insights Dashboard
  • EbbotGPT
    • Knowledge
      • Data source transformer
      • Source types
        • File
        • Website scrape
        • Docx file
        • TOPdesk API
        • Sitevision API
        • SharePoint API
          • Create app with Sites.FullControl.All permission in Azure
          • Ebbot SharePoint Postman Guide
        • Confluence API
    • Configurations
    • Persona
    • GPT Evaluation
    • Embedder models
    • EGPT models
  • LLM benchmarks
    • Report: Factual Consistency Rate – Model Comparison
    • Report: Language Translation Ability – Model Comparison
  • Custom vocabulary
  • Tutorials
    • Create your first scenario
      • Select a trigger
      • Add bot responses
  • Data Object
  • Release notes
  • For developers
    • Ebbot SDK
    • Safe Exchange API / Vault
    • Subdomain manager
  • EbbotGPT API
  • Chatbot & Live chat
    • Install chat widget
    • Chats API
    • Chat widget API
    • Datasource API
    • Sales tracking for live chat
    • Webhook
      • Incoming webhooks
      • Outgoing webhooks
    • SMS API
      • Authentication
      • Send SMS
      • Errors
      • Encoding
    • Python components
    • Intent detection (NLP)
  • Product guides
    • Product data feeds
    • Install guide
    • Product guide events
      • Product guide user events
      • Received events
      • Send events
    • API & webhooks
    • GA4 integration
    • Klaviyo integration
  • Messenger marketing
    • Install popup
    • API & webhooks
  • Widget cookies & storage
  • For chat agents
    • Ebbot Chat
      • Settings modal
      • Queue
      • Topbar Stats
      • Menu
        • Power-Ups!
        • Quick Replies
  • INTEGRATIONS
    • Ebbot Live Chat in Zendesk
      • Setup guide
    • Active Directory - SAML
    • Configure SAML in Azure
Powered by GitBook
On this page
  • Difference between this and Product guide user events
  • Subscribe to events

Was this helpful?

  1. Product guides
  2. Product guide events

Received events

Difference between this and Product guide user events

This page describes how to use our general event stream that does not send what a user does in the guide or placement. The primary use cases for this solution are:

  • When using our script as a headless solution.

  • When you want an in-depth look at what recommendations a user received.

Subscribe to events

To receive events, you must subscribe to our event stream using our SDK.

window.DT.subscribe('product_guide', (e) => {
    switch (e.type) {
      case 'product_guide_step':
        /* -- handle the event -- */
        break;
      case 'product_guide_products':
        /* -- handle the event -- */
        break;
    }
  });

When receiving the event product_guide_step the event type looks like this:

type EventValue = {
  type: 'product_guide_step';
  /* -- This is translations that get auto-filled with the default language if you are missing translations for something in the selected language -- */
  generalLocalizations: {
    /* -- These are labels for the products, you need to calculate where to show them  -- */
    bestDeal?: string;
    bestMatch?: string;
    lowestPrice?: string;

    /* -- This has to do with the products -- */
    loadMore?: string;
    productCta?: string;
    secondaryTitle?: string;

    /* -- Some buttons --*/
    restartButton?: string;
    skipButton?: string;
    submitButton?: string;
  };

  /* -- Some general settings */
  setting: {
    /* -- The default language -- */
    fallbackLang: string;

    /* -- Should show load more products -- */
    loadMore: boolean;

    /* -- Should show progress bar -- */
    progressbar: boolean;

    /* -- Settings that are for the products -- */
    products: {
      productLayout: 'focus' | 'full' | 'grid';
      productDisplayVariant: 'single' | 'bundle' | 'grid' | 'best_match' | 'advanced';
    };
  };

  /* -- Some status of where you are in the guide -- */
  status: {
    /* -- The index for where you are in the guide -- */
    currentStep: number;
    /* -- The total number of steps in the guide -- */
    totalSteps: number;

    /* -- An array of all the steps containing if they are visited or not. -- */
    steps: {id: string; name?: string; visited: boolean}[];
  };

  /* -- The information inside the step -- */
  step: DtProductGuideStep;

  /* -- The products, you won't get it every time depending on your settings in the builder -- */
  products?: {
    productItems: DtProductGuideProduct[];
    secondary?: Omit<DtProductGuideProduct, 'secondary'>[];

    canLoadMore: boolean;

    currencyExpr: string;
  };
  
};

type DtProductGuideOption = {
  disabled: boolean;
  subtitle: string;
  title: string;
  uuid: string;
  metaData: Record<string, any>;
  image?: {
    name: string;
    source: string;
    thumbnail?: string;
  };
};
type DtStepType = 'options' | 'form' | 'result';
type DtFormInputType = 'string' | 'number';
type DtFormInput<T extends DtFormInputType = DtFormInputType> = {
  uuid: string;
  placeholder: string;
  title: string;
  subtitle: string;
  settings: {
    inputType: T;
  };
} & (
  | { settings: { 
        inputType: 'string';
        variant: 'field' | 'textarea'; 
        validation?: 'phone' | 'email' | 'none';
        allowedValues?: string[];
      } 
    }
  | { settings: { inputType: 'number' } }
);
type DtProductGuideStep<T extends DtStepType = DtStepType> = {
  uuid: string;
  type: 'step';
  disabled?: boolean;

  /* -- -- */
  name: string;
  image?: {
    name: string;
    source: string;
    thumbnail?: string;
  };
  title: string;
  subtitle: string;

  /* -- The type of step (form or options) -- */
  variant: T;

  required: boolean;

  /* -- How the image should look inside the options -- */
  imageType: 'image' | 'icon';

  last: boolean;

  /* -- This tells you if this step should show products or not -- */
  displayProducts: boolean;

  /* -- Some metadata that you can enter inside the builder, this can be whatever you want -- */
  metaData?: { [key: string]: string | number | boolean };

} & (T extends 'form'
  ? { variant: 'form'; userInputs: DtFormInput[] }
  : T extends 'result'
  ? { variant: 'result' }
  : {
      variant: 'options';
      options: DtProductGuideOption[];
      choice: 'single' | 'multiple';
      layout: 'two-columns' | 'three-columns' | 'four-columns' | 'compact';
    });

type DtProductGuideProduct = {
  name: string;
  id: string;
  image: string;
  url: string;
  price: number;
  salePrice?: number;
  description?: string;
  groupId?: string;
  brand?: string;
  
  [key: string]: string | boolean | unknown[];

  /* -- Secondary products that match with the primary product. -- */
  secondary?: Omit<DtProductGuideProduct, 'secondary'>[];

  /* -- What it matched on. Name is the translation for the key in the feed - matching is all the values it matched on for that key - values are all the values for that key -- */
  matchingTags?: { matching: string[]; name: string; values: string[] }[];

  distinct?: string;
}

When the event is product_guide_products the event type looks like this:

type EventValue = {
  type: 'product_guide_products';
  
  products: {
    productItems: DtProductGuideProduct[];
    canLoadMore: boolean;
    currencyExpr: string;
  };
  
};

type DtProductGuideProduct = {
  name: string;
  id: string;
  image: string;
  url: string;
  price: number;
  salePrice?: number;
  description?: string;
  groupId?: string;
  brand?: string;
  
  [key: string]: string | boolean | unknown[];

  /* -- Secondary products that match with the products. -- */
  secondary?: Omit<DtProductGuideProduct, 'secondary'>[];

  /* -- What it matched on. Name is the translation for the key in the feed - matching is all the values it matched on for that key - values are all the values for that key -- */
  matchingTags?: { matching: string[]; name: string; values: string[] }[];

  distinct?: string;
}

Note: The product_guide_products only triggers when the user clicks the 'Load more' button.

PreviousProduct guide user eventsNextSend events

Last updated 1 year ago

Was this helpful?