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