Embedded Widgets
Embedded Widgets
An embedded widget doesn't have a chat launcher and is visible immediately when the webpage loads. This type of widget is often used for WISMO and Returns experiences.
The following config options can be used to create an embedded widget:
window.DG_CHAT_WIDGET_CONFIG = {
env: 'dev.us',
widgetId: 'f0c07546-af4c-4963-9e23-3e9343eaf13b',
generalSettings: {
isEmbeddedMode: true, // ensures the widget is maximised on page load and cannot be closed. The close button will end the conversation and immediately display the pre chat form.
isChatMinimizeControlEnabled: false, // disable the minimize control so the end user cannot minimize the widget
isAnimationDisabled: true, // OPTIONAL turn of animations for the widget so it doesn't animate in on page load
persistSession: false, // OPTIONAL don't persist the session, so if the user reloads the page then the widget goes back to it's default state
},
targetDOMNode: '#my-div' // specify an element in the page in which to inject the widget
}
In order to embed the widget in to a specific element on your page you will need to use the targetDOMNode
config. This accepts any selector used by document.querySelector. When using this option you will need to override some default styles we apply to the widget by including the following styles in your own stylesheet:
#dg-chat-widget, #dg-chat-widget-placeholder {
position: initial;
height: 650px;
margin: 0 auto;
}
#dg-chat {
z-index: 1;
}
You can see a demo here: https://demos.dgwidgetdeployments.com/embeddedwidget
Updated about 1 month ago
What’s Next