Dialogue Cloud

What's new in WebChat 2.1

Note: An additional Anywhere365 WebAgent for Omnichannel license is required.

Available in bundle: DC2021.03

Introduction

The below a details of new features that are added to the WebChat 2.1

Product Update Video

 

Configuration Page

The WebChat 2 Front End will be shipped with a demo page. This page will helps you to build configurations and copy this so you can implement this on your website. It also enabled you to try out and test configurations in a safe environment. You can configure:

  • General = General configuration for WebChat 2.

  • Themes = Configure the color theme of the WebChat. For more details see Configurable Theme.

  • Teaser = Configure states, teasers, messages, and adaptive cards matching to an UCC Presence state.

    • UCC [Presence] = If enabled the configured settings will be used when the UCC is in the matching state. Not enabled will result in the WebChat being hidden during the matching state

      • Available = The UCC is connected to the WebChatDialogueProvider2 and is in a Available state (Within Business Hours, Not in a holiday, or is not in ForcedClosed mode).

      • Away = The UCC is connected to the WebChatDialogueProvider2 and is in a Away state (Outside Business Hours, In a holiday, or in ForcedClosed mode).

        Note: Conversations will only be started on a UCC that is available.
      • Offline = The UCC is not connected to the WebChatDialogueProvider2 (Service offline, UCC not started, UCC not configured, or ListPlugin not yet sent) or the WebChatDialogueProvider2 is shutdown.

        Note: In this state the server cannot receive any input.
    • Show tease message = If enabled use the configured message settings . Not enabled will result in not showing any teaser or message in the matching state. (you can still start a conversation)

      • Show as message = Show the content of "EN - Message" as first message when opening the chat window.

      • Show as teaser = Show the content of "EN - Message" as teaser message (pop-up left of the chat icon) after the "Tease timeout" has expired.

      • Tease timeout = The amount of seconds before the teaser message is shown. If set to 0 the tease message will be shown when loading the page.

      • EN - Message = The message that will be used in the Message and/or the Tease Message.

    • Select a state = Puts the WebChat in one of the configured states if the UCC is in the matching Presence state. Not selected is the same as "Enabled".

      • Enabled = Chat interaction enabled and allow to open the WebChat window.

      • Do not allow the user to open the chat window = The user can see the teaser and the start button, but cannot click the start button to open the chat window.

      • Chat interaction disabled = The user can click the start button to open the chat window, but the input field is disabled.

      • Hide WebChat = The start button will be hidden.

    • Show adaptive card = If enabled use the configured Adaptive Cards Adaptive Cards are preformatted boilerplate messages that can be selected by an agent to be sent to a client. They are written using an open card exchange format that allows the developers to 'write once' and share with any compliant host application settings. Not enabled will result in now showing any adaptive card in the matching state. (you can still start a conversation)

      • Adaptive card id = The ID of the Adaptive Card that is configured on SharePoint.

      • Adaptive card disable input = If enabled the chat input will be disabled until the Adaptive Card has been submitted. This is to ensure the customer completes the Adaptive Card before starting the conversation.

    • Templates = Insert your own HTML to fully customize the WebChat.

      • Agent placeholder = If enabled replaces the "Agent Placeholder" with the HTML added in the Template box.

      • Connected agent = If enabled replaces the "Agent Placeholder" with the HTML added in the Template box.

      • Notification = If enabled replaces the "Notification" with the HTML added in the Template box.

      • Start button = If enabled replaces the "Start Button" with the HTML added in the Template box.

      • Tease message = If enabled replaces the "Tease message" with the HTML added in the Template box.

      • Top bar = If enabled replaces the "Tease message" with the HTML added in the Template box.

Configurable Theme

A follow-up configuration page, it the option to define your theme colors directly from the configuration page.

Multiple UCC Support

Both the WebChat 2 and the WebChatDialogueProvider2 now support multiple UCC's. This enabled web-developers to connect to specific UCC's based on the page navigation or other variables. The UCC can be set in 2 locations.

Config.json

A default UCC can be configured via the config.json in the install directory:

Copy
config.json
..
    "uccName": "ucc_support",
..

Web config

You can also define the UCC in the config loaded via the website.

Copy
Script
window.onload = function () {    
    const config = {
        uccName:'ucc_support',
 ...

Order

Which UCC is loaded is based on the following order:

  1. Web config

  2. Config.json

  3. Primary UCC (first UCC to connect to the WebChatDialogueProvider2)

Persistent Chat

To provide the customer with a persistent chat experience, we have added the option to define the storage location:

  • Session storage: The conversation Id is stored in Session Storage.

    The Session Storage will remain stored when:

    • Navigation the website

    • Navigation off the website and back on the websites (in the same browser tab)

    The Session Storage will be cleared when:

    • Closing the browser tab

    • Closing the browser

    • Clearing the browser cache

  • Local storage: The conversation Id is stored in Session Storage.

    The Session Storage will remain stored when:

    • Navigation the website

    • Navigation off the website and back on the websites (in the same browser tab)

    • Closing the browser tab

    • Closing the browser

    The Session Storage will be cleared when:

    • Clearing the browser cache

Customer connection state

A new feature in the WebChatDialogueProvider2 is the option to show the customer connection state and to disconnect from the customer side. This is now visually displayed in the WebAgent.

Customer connected

Customer closed webchat page (can reconnect with persistent chat)

Customer disconnected the conversation

Customer-side disconnect

When offering an persistent chat experience to your customer, it is important that they can decide when the conversation is completed. At the end of the conversation to customer can choose to close the session. This information will also be shown to the WebAgent user. Additional the customer can choose to start a new conversation.

UCC Presence & Chat States

The WebChat 2 will now receive UCC presence information from the UCC. This is based on this specific configuration can be specified. The presence is based on:

Presences

  • Available = The UCC is connected to the WebChatDialogueProvider2 and is in a Available state (Within Business Hours, Not in a holiday, or is not in ForcedClosed mode).

  • Away = The UCC is connected to the WebChatDialogueProvider2 and is in a Away state (Outside Business Hours, In a holiday, or in ForcedClosed mode).

    Note: Conversations will only be started on a UCC that is available.
  • Offline = The UCC is not connected to the WebChatDialogueProvider2 (Service offline, UCC not started, UCC not configured, or ListPlugin not yet sent) or the WebChatDialogueProvider2 is shutdown.

    Note: In this state the server cannot receive any input.

States:

  • Enabled = Chat interaction enabled and allow to open the WebChat window.

  • Do not allow the user to open the chat window = The user can see the teaser and the start button, but cannot click the start button to open the chat window.

  • Chat interaction disabled = The user can click the start button to open the chat window, but the input field is disabled.

  • Hide WebChat = The start button will be hidden.

Adaptive Cards

Adaptive Cards can be used as UI components for WebChat 2. For example, you can us it as an question form:

Various examples of Adaptive Cards can be found on: https://adaptivecards.io/samples/

Here you can also make use of the rich designer tool to create your own Adaptive Cards: https://adaptivecards.io/designer/

Created Adaptive Cards can be stored in SharePoint, Learn More