Integrating Genius Chat Widget
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
-
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 theExternal Account Key
field. TheExternal Integration
field can be left empty. Click the submit button to save the changes. -
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. -
Once submitted, copy the
id
value from the response. This is thewidgetId
and will be used by the widget to fetch the config from the server. Create a HTML page and paste the id in to thewidgetId
property on thewindow.DG_CHAT_WIDGET_CONFIG
object. When the widget initialises it looks for theDG_CHAT_WIDGET_CONFIG
object. Theenv
property can be set to one ofdev.us|eu|us
depending on which env the flow is running in. The script version can be found in thepackage.json
file as theinitVersion
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 13 days ago