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.

Display a proactive button after a customer has been on a 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>

Launch chat from a custom element on your website.

The following snippet launches the widget when the element is clicked on:

<script>   
    // 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>

In some cases, you may want to hide the default chat launcher.

To hide the launcher on every page of your website, your Customer Success Manager (CSM) can configure this for you in the chat settings.

To hide the launcher on specific pages only, you can use the following snippet:

<script>
    // Dynamically update the chat config before calling the init function
    // Ensure that you are not calling window.dgchat.init() anywhere else in your code
    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 a 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.