Integrating Genius Chat Widget

Integrating Genius Chat into your website is simple. First, add the code snippet you copied from the Chat Config Builder in the Dashboard (see Creating and Updating Widgets) to the bottom of each page where you want the widget to appear, just before the closing body tag.

<script>
  window.DG_CHAT_WIDGET_CONFIG = {
     widgetId: '22df40c4-110f-4b6f-aa2b-aeaffd6d1179',
     env: 'eu|us'
  }
</script>
<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 uses a Content Security Policy (CSP), you must whitelist the following origins in > the script-src and connect-src directives of your policy:

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

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

  • *.smooch.io

If your CSP configuraration uses a nonce then Genius Chat will propagate the nonce on to any scripts that it injects as long as the nonce is present on the init script:

<script src="https://chat.digitalgenius.com/init.js" nonce="1234567890"></script>

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 your Solution Engineer or CSM.


What’s Next