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.

Within the Widget Builder "Advanced" tab in your DigitalGenius dashboard, the following config options can be used to create an embedded widget

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;
}

A demo can be found here: https://demos.dgwidgetdeployments.com/embeddedwidget