---
updatedAt: 2025-09-18T00:30:16.000Z
agentTools:
  projectIndex: https://developers.alby.com/llms.txt
---

# 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:

  ```typescript
  /*
  {
    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:

  ```typescript
  /*
  {
    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:
  ```typescript
  /*
  {
    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:

  ```typescript
  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 });
  });
  ```

  <br />