alby-conversation-prompt

Provides a text box for customers to ask any question about the product, with alby responding via the chat.

This documentation provides information about the events that the alby-conversation-prompt widget publishes to the browser during its lifecycle.

Core Events

All core events follow the alby:ConversationPrompt:: namespace pattern:

  • alby:ConversationPrompt::Rendered
  • alby:ConversationPrompt::Viewed
  • alby:ConversationPrompt::Submitted
  • alby:ConversationPrompt::Failed

Event Details

alby:ConversationPrompt::Rendered

  • Description: This event is dispatched when the widget is fully loaded and is rendered on the screen.

  • Usage: You can listen for this event to trigger any post-render actions, such as adjusting layout, displaying additional elements, or logging analytics data.

  • Payload / Example:

    /*
    {
      widgetId: string;    // Unique identifier for the widget instance
    }
    */
    document.addEventListener('alby:ConversationPrompt::Rendered', function() { 
      const { widgetId } = e.detail;
      
      analytics.track('Widget Rendered', { widgetId });
    });
    

alby:ConversationPrompt::Viewed

  • Description: Dispatched when the widget becomes visible in the viewport. This indicates that the widget has been successfully loaded and is now within the user's view.

  • Usage: Listen for this event to track widget visibility, trigger analytics, or perform actions that should occur when the widget enters the user's viewport.

  • Payload / Example:

    /*
    {
      widgetId: string;    // Unique identifier for the widget instance
    }
    */
    document.addEventListener('alby:ConversationPrompt::Viewed', function() { 
      const {  widgetId } = e.detail;
      
      analytics.track('Widget Viewed', { widgetId });
    });
    

alby:ConversationPrompt::Submitted

  • Description: Fired when a user submits a message.
  • Usage: Track input engagement, trigger UI updates, or perform analytics tracking.
  • Payload / Example:
    /*
    {
      widgetId: string;    // Unique identifier for the widget instance
      message: string;
    }
    */
    document.addEventListener('alby:ConversationPrompt::Submitted', function() { 
      const {  widgetId, message } = e.detail;
      
      analytics.track('Widget Submitted', { widgetId, message });
    });
    

alby:ConversationPrompt::Failed

  • Description: Fired when widget initialization encounters an unexpected error. This event helps track and handle failures in the initialization process.

  • Usage: Listen for this event to handle error states, display appropriate error messages or log to an external server.

  • Payload / Example:

    enum FailedEventReason {
      MISSING_WIDGET_ID = "MISSING_WIDGET_ID",
      FAILED_TO_INITIALISE_WIDGET = "FAILED_TO_INITIALISE_WIDGET",
    }
    
    /*
    {
      widgetId: string;    // Unique identifier for the widget instance
      error: FailedEventReason;
    }
    */
    document.addEventListener('alby:ConversationPrompt::Clicked', function() { 
      const {  widgetId, error } = e.detail;
      
      analytics.track('Widget Failed', { widgetId, errror });
    });