LogoLogo
  • Introduction to the Ebbot Platform
  • 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
  • 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
  • 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
  • Prerequisites
  • Event type
  • How to use
  • Note

Was this helpful?

  1. Product guides
  2. Product guide events

Product guide user events

PreviousProduct guide eventsNextReceived events

Last updated 1 year ago

Was this helpful?

Prerequisites

You need to have our SDK installed on your site. You need to enable 'Send events to the page window' in the app: You can enable it under 'Product guides' -> 'Placements' -> 'Edit default'.

Event type

We send a custom event to the window object, it looks like this:

typescript
type CustomEventType =
  | 'init'
  | 'load_more_products'
  | 'restart'
  | 'skip'
  | 'undo'
  | 'option'
  | 'form'
  | 'form_email'
  | 'form_phone'
  | 'form_other'
  | 'prod_click'
  | 'recommendation_receive'
  | 'view'
  | 'placement_load'
  | 'placement_view'
  | 'modal_cta_click'
  | 'flag_click'
  | 'split_click';

type CustomEvent<T extends CustomEventType = CustomEventType> = { type: T;
  stepId?: string;
  productGuideId?: string;
  placementId?: string } & (
  T extends 'skip'
  ? { type: 'skip'; value: { from: string } }
  : T extends 'undo'
  ? { type: 'undo'; value: { to: string } }
  : T extends 'option'
  ? { type: 'option'; value: { options: { uuid: string; title: string }[]; clicked: string[] } }
  : T extends 'prod_click'
  ? { type: 'prod_click'; value: { name: string; pid: string; resultName: string; suuid: string } }
  : T extends 'recommendation_receive'
  ? { type: 'recommendation_receive'; value: { prodCount: number; name: string; productIds: string[] } }
  : T extends 'view'
  ? { type: 'view'; value: { name: string } }
  : T extends 'form_email'
  ? { type: 'form_email'; value: string }
  : T extends 'form_phone'
  ? { type: 'form_phone'; value: string }
  : T extends 'form_other'
  ? { type: 'form_other'; value: Record<string, string | number | boolean> }
  : T extends 'form'
  ? { type: 'form'; value: Record<string, string | number | boolean> & { email?: string; phone?: string } }
  : { type: T });

How to use

We send a custom event to the window object called ebbot_widget_event. You need to add an event listener to your window object to use the event. It should look something like this:

const ebbotEventHandler = (event) => {
  // Extract "detail" from the "event"
  // "detail" is the type specified above
  const { detail } = event;
  
  /* Your logic here */
};

window.addEventListener("ebbot_widget_event", ebbotEventHandler);

window.addEventListener("beforeunload", () => {
  window.removeEventListener("ebbot_widget_event", ebbotEventHandler);
});

Note

The name variable is generally the name of the step or option given in the guide builder.

The recommendation_receive event will not send the complete products, but only the IDs. If you want more information on the product it's recommended to use the event stream described on page.

Received events