Programmatic control of Genius Chat

A common question from customers is whether Genius Chat can respond dynamically to events occurring on their website. By default, Genius Chat does not have built-in awareness of user activity or page-specific events. As a result, the widget does not automatically react to customer interactions out of the box.

However, it is straightforward to configure Genius Chat to respond to specific events on your website by integrating custom scripts in to your webpage. These scripts should be added after the Genius Chat code snippet.

The widget's configuration can be updated dynamically before launch, and various methods are available to tailor its behaviour. This allows you to do things like :

Launch the chat widget in a specific mode based on the page the customer is viewing.
Display a proactive button when certain conditions are met.
Dynamically trigger the chat widget based on user interactions.

Example Use Cases

Display a proactive button after a customer has been on a product page for more than one minute

The following snippet sets a timer that waits for a minute and then displays a Proactive button, prompting the user

<script>
  setTimeout(() => {
    window.dgchat.methods.initProactiveButtons({
      questions: "Do you need help with this product?"
    });
  }, 60000);
</script>

Hide the chat launcher on a specific page and enable chat via a custom element

<script>
  // Detect if the URL contains a specific path
  if (window.location.pathname.includes('/specific-page')) {
    window.DG_CHAT_WIDGET_CONFIG = {
      ...window.DG_CHAT_WIDGET_CONFIG,
      generalSettings: {
        ...window.DG_CHAT_WIDGET_CONFIG.generalSettings,
        // hide the chat launcher
        isChatLauncherEnabled: false
      }
    };
    
    //initialise the widget
    window.dgchat.init();

    // Attach an event listener to a custom element to launch the chat widget
    document.getElementById('custom-chat-button').addEventListener('click', () => {
      window.dgchat.methods.launchWidget();
    });
  }
</script>

Launch the widget in a specific mode, depending on what page they are viewing

See our URL Parameters docs for details on how to do this.