Documentation

Integrating Genius Chat Widget

Suggest Edits

Integrating Genius Chat Widget

Integrating the Genius Chat Widget in to your website is easy. Firstly add the DG_CHAT_WIDGET_CONFIG object as provided by your Customer Success Manager to the bottom of each page you want the widget to appear on, just before the closing body tag:

<script>
  window.DG_CHAT_WIDGET_CONFIG = {
     widgetId: '22df40c4-110f-4b6f-aa2b-aeaffd6d1179',
     env: 'eu|us'
  }
</script>

Next, include a reference to the Genius Chat Init script and initialise the widget by calling the window.dgchat.init() method.

<script src="https://chat.digitalgenius.com/init.js"></script>
<script>window.dgchat.init()</script>

That's it! The chat widget will appear as configured on your webpage.

Versioning

Genius Chat is versionless. Once you have embedded chat you will always have access to the latest stable features without the need to make any updates to your code.

⚠️

We recommend against using Tag Management Systems (TMS) such as Google Tag Manager to embed chat in to your page. Ad blockers are known to block scripts injected via TMS.

If you are using server side tagging for GTM or another solution which circumvents problems with ad blockers this may not be an issue. In this case we recommend that you test that the widget is not blocked by popular blockers such as Ublock Origin once it is deployed.

⚠️

Content Security Policy

If your website implements a Content Security Policy (CSP) then you need to whitelist the following origins in the policy:

  • chat.digitalgenius.com
  • *.dgdeepai.com

If you are using Sunco (Zendesk) as your helpdesk you will also need to whitelist:

  • *.smooch.io

Connect with Flow

  1. Go to the DigitalGenius Dashboard and navigate to the flow which you want to connect to the widget. Click on the 3 dots menu in the top right of the page and select the External Key option. Enter a unique string in the External Account Key field. The External Integration field can be left empty. Click the submit button to save the changes.

  2. Go to postman and create a new widget config by executing the Create Chat Widget endpoint. See the config section below for details of all the available options. Make sure to include the external account key as created in the previous step as the value for the externalAccountKey property.

  3. Once submitted, copy the id value from the response. This is the widgetId and will be used by the widget to fetch the config from the server. Create a HTML page and paste the id in to the widgetId property on the window.DG_CHAT_WIDGET_CONFIG object. When the widget initialises it looks for the DG_CHAT_WIDGET_CONFIG object. The env property can be set to one of dev.us|eu|us depending on which env the flow is running in. The script version can be found in the package.json file as the initVersion property.

<!doctype html><html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Chat Widget Demo</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
    <script>
      window.DG_CHAT_WIDGET_CONFIG = {
        widgetId: 'WIDGET_ID',
        env: 'dev.us|eu|us',
      }
    </script>
    <script src="https://chat.digitalgenius.com/init.js"></script>
    <script>window.dgchat.init();</script>
  </body>
</html>

Whitelisting Origins

The Flow server will only accept requests from a whitelisted origin. localhost:80 and localhost:8080 are already whitelisted for development purposes. You can request a new origin to be whitelisted by contacting someone at DigitalGenius.

Updated about 2 months ago

What’s Next