Recipes

This page shows how some common use cases can be achieved with some simple code snippets which can be added to your website.

Any scripts should be added after the Genius Chat code snippet.

Launch the widget from an external element

You can set the following config options to hide the default chat launcher and launch the widget from an element in your page.

generalSettings: {
  isChatLauncherEnabled: false, // hide the default chat launcher
  externalLaunchElement: '#external-launch-element' // launch the widget from an element in your page. Must be a valid css selector accepted by `document.querySelector`
}

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.

<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

In this case you should ensure that you are not already making a call to window.dgchat.init(); elsewhere in your code.

<script>
  // Detect if the URL contains a specific path
  if (window.location.pathname.includes('/specific-page')) {
    // Dynamically update the chat config before calling
    // window.dgchat.init();
    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 chat after a period of inactivity and pass the bot some additional context

Enable the chat to pop up on the cart page of your website after a short period of inactivity. This can be used to prompt the user in some way.

<script>
  // Wait 10 seocnds before popping the chat up
  setTimeout(() => {
     window.DG_CHAT_WIDGET_CONFIG = {
      ...window.DG_CHAT_WIDGET_CONFIG,
      metadata: {
        ...window.DG_CHAT_WIDGET_CONFIG.metadata,
        // provide some custom data to the bot
        similarProductName: 'Caramel Skinnyccino',
        similarProductLink: 'https://website.com/caramel-skinnyccino'
      }
    };
    // launch the widget
    window.dgchat.methods.launchWidget();
  }, 10000)
</script>

In the example above the metadata object has been used to pass some custom data to the bot. Metadata is freeform so you can pass any data you need to pass here. The Flow that powers the bot can be set up to respond as necessary using the provided data.

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

You can add a query string like so:

www.yourwebsite.com?dg-widget-launch

which will cause the widget to launch when the webpage loads.

You can also add values to the query string which will be passed through to the DigitalGenius bot and can be used to initialise different behaviour:

www.yourwebsite.com?dg-widget-launch=productRecommendation

See the Url Parameters documentation for more details.