Widget

Besides recommending text suggestions above the agent's text input field, the DeepdeskSDK can also show other kinds of messages to send to the visitor. This is done by using the widget.

The widget can show the following types of messages:

  • Url suggestions (url suggestions based on the context of the conversation)
  • Sticky messages (pinned suggestions like memo's)
  • Custom messages (messages and predefined answers pushed from another integration/platform)
  • Autoflows (small flows of questions with predefined answers)

Usage

The Deepdesk widget works best in combination with DeepdeskSDK.mount(), but can also work standalone.

The widget will expand to the full width and height of its parent, so make sure to position the parent relative, absolute or fixed. Or otherwise overwrite the default styling with the customStyles option.

When enabling the autoflows or custom messages, make sure to configure the broker url endpoint.

The DeepdeskSDK will emit events when an agent selects an url suggestion or a sticky message. It's you job to change to value of the agent's text input accordingly. See example code below.

Messages from autoflows and custom messages are directly send to the visitor via the Deepdesk Broker API. To integrate the Deepdesk Broker with the platform, please contact support@deepdesk.com.

// Instantiate the Deepdesk SDK
// With <accountname>.deepdesk.com
// OR <accountname>.staging.deepdesk.com.
const deepdeskSDK = new DeepdeskSDK({
deepdeskUrl: 'https://<accountname>.deepdesk.com/api',
brokerUrl: 'https://<accountname>.deepdesk.com/broker/api',
});
// Retrieve an existing conversation
// by platform's conversation/thread/case identifier.
// This assumes that the webhooks have been implemented.
await deepdeskSDK.getConversationBySessionId('123', {
attempts: 3,
});
deepdeskSDK.renderWidget(widgetElement, {
// Custom widget styling
// See: https://deepdesk.github.io/topics/custom-styling
customStyles: customWidgetStyles,
// Enable or disable autoflows
// Default: false
showAutoflows: true,
// Enable or disable contextual information in url suggestions.
// Contextual information is only intended for agents and is not sent to the visitor.
// Default: false
showContext: true,
// Enable or disable custom messages.
// Default: false
showCustomMessages: true,
// Enable or disable images for url suggestions and sticky messages.
// Default: false
showImages: true,
// Enable or disable sticky messages
// Default: false
showStickyMessages: true,
// Enable or disable url suggestions, or provide max. number of suggestions.
// Default: false
showUrlSuggestions: 5,
});
deepdeskSDK.on('select-text-suggestion', suggestion => {
// replace agent text input with suggestion.text
});
deepdeskSDK.on('select-url-suggestion', suggestion => {
// append agent text input with suggestion.text
});
deepdeskSDK.on('select-sticky-message', suggestion => {
// append agent text input with suggestion.text
});
deepdeskSDK.on('reset', suggestion => {
// reset agent text input to typed text with suggestion.text
});