Edit

Configure a chat widget

Applies to: Dynamics 365 Contact Center—embedded, Dynamics 365 Contact Center—standalone, and Dynamics 365 Customer Service

Note

Copilot Studio bot is renamed as Copilot agent (agent or AI agent). Human agent is now renamed as customer service representative (service representative or representative). You might come across references to the old and new terms while we update the product UI, documentation, and training content.

You can configure a live chat widget that you display on your portal so customers can interact with AI agents and service representatives.

To add a chat widget, configure a workstream that defines how chat conversations are routed to queues. Learn more in Create a workstream.

Configure the modern chat widget (Preview)

You can add the modern chat widget to an existing channel or create a new channel and then add the widget.

Important

Add to an existing Chat channel

  1. In the site map of Copilot Service admin center, select Workstreams in Customer support. The Workstreams page appears.

  2. Select an existing Workstream where the Channel is set to Chat.

  3. Select Add Modern UI.

Note

  • By adding the widget to an existing channel, you can test and deploy the new Modern widget while preserving your existing workstream configurations. Use this approach if you already deployed the classic widget.
  • Some settings, such as Behaviors and User features, are shared between the modern and classic versions. You can edit them in the active version only to prevent accidental changes on your live site before you're ready to deploy the new version.

Create a new Chat channel

  1. In the site map of Copilot Service admin center, select Channels in Customer support. The Channels page appears.

  2. Select Manage for Chat. The Chat channels page appears.

  3. Select Add chat channel.

  4. Select Modern. A preview of the widget appears with the default settings in the right pane. The system updates the preview in real time based on your selections.

  5. Select Continue and do the steps in the next section.

Set up the modern widget

  1. In General Configuration, enter a name and select a language in the Name and Language fields.

  2. In Workstream details, select one of the options and enter the details. Learn more in Create workstreams.

  3. In Color Settings, select Brand color to open the Color Selector, and choose your brand color.

  4. In Chat button, select one of the options:

    • Select an icon: An icon to display in your chat button.
    • Use custom icon: Enter your icon URL in the Icon image URL field. This icon must be a publicly hosted .png or .svg file.

  5. In Header, enter the following details:

    • Show header text: Leave the toggle On to display a title for your widget.
    • Header text: Enter the text for your header.
    • Show widget icon: Leave the toggle On to display a header logo.
    • Select an icon or Use custom icon. If you use custom icon, the icon must be a publicly hosted .png or .svg file.

  6. In Intro page, enter the following details:

    • Enable intro page: Leave the toggle On to show a customer prompt when the customer opens the widget.
    • Greeting title
    • Greeting subtitle: Enter a subtitle for the greeting. This text typically prompts the customer to ask a question.
    • Show legal disclaimer: Leave the toggle On to always show a disclaimer to customers.
    • Disclaimer text: Enter disclaimer to show to customers.

  7. In Chat Widget, enter the following details:

    • Allow users to expand the chat: Turn on the toggle to enable a button that allows the customer to increase the widget size.
    • Set custom size: Turn on the toggle, and then change the Width and Height sliders to change the default widget size.
    • Representative display name: Select a value from the list.
    • Turn on the toggles to enable the following options:

  8. In Behaviors, configure the following options:

  9. On the User features page, configure the following options:

    • File attachments

    • Customer notifications

    • Conversation transcripts

    • Voice and video calls: Switch the toggle to On and select the calling option.

    • Screen sharing: Switch the toggle to On and select a provider.

    • Co-browse: Turn on the toggle and select a provider if you want the representatives to see and interact with a customer's web browser.

      Note

      • You must install a non-Microsoft provider from Microsoft Marketplace to use the screen sharing or co-browse feature.
      • You can select one co-browse provider only and one screen sharing provider for each chat widget. Solutions published on Marketplace only appear in the lists.

  10. On Notifications, set the Notifications toggle to On if you intend to re-use this channel in a mobile application with push notifications, and enter your Azure Notification Hub details.

  11. On Review and finish, review the channel settings, and select Create channel.

Manage modern and classic versions of the widget

If you're an existing user, each chat channel supports both a Classic and Modern version to help you migrate to the new widget version. You can test each version independently, and set the version that your widget's script tag uses.

You can customize and select the versions on the Workstream page where you configure your Chat channel.

  • Edit widget configuration: Select the pencil button next to the Classic or Modern version to edit the configuration.

  • Copy widget test script: Select the vertical ellipses next to the Classic or Modern version, and then select Copy testing script to copy the widget script to your clipboard. This script tag, unlike the general script tag, always loads this version of the widget.

  • Set active version: Select the vertical ellipses next to the Classic or Modern version, and then select Set as active to make the general script tag use the selected version. This action makes the new Modern version go live for a script tag you already deployed. You can roll back to the Classic version if needed.

Configure the classic chat widget

  1. In the site map of Copilot Service admin center, select Channels in Customer support. The Channels page appears.

  2. Select Manage for Chat. The Chat channels page appears.

  3. Select Add chat channel.

  4. Select the Classic version.

  5. On the Channel details page, enter a name and select a language in the Name and Language fields, respectively.

  6. On Chat Widget, enter the following details:

    • Title: Display name for the chat widget.
    • Subtitle: Other title, such as "We're online".
    • Theme color: Choose a color from the list.
    • Logo URL: Select the default value or enter the link to the logo that you want to be displayed.
    • Representative display name: Select a value from the list.

    Note

    You can customize the chat widget appearance using data tags. Learn more in Customize live chat widgets using data tags.

  7. On Behaviors, configure the following options:

  8. On the User features page, configure the following options:

    • File attachments

    • Customer notifications

    • Conversation transcripts

    • Voice and video calls: Switch the toggle to On and select the calling option.

    • Screen sharing: Turn on the toggle and select a provider.

    • Co-browse: Turn on the toggle and select a provider if you want the representatives to see and interact with a customer's web browser.

      Note

      • You must install a non-Microsoft provider from Microsoft Marketplace to use the screen sharing or co-browse feature.
      • You can select one co-browse provider only and one screen sharing provider for each chat widget. Solutions published on Marketplace only appear in the lists.

  9. On Notifications, set the Notifications toggle to On if you intend to re-use this channel in a mobile application with push notifications, and enter your Azure Notification Hub details.

  10. On Review and finish, review the channel settings, and select Create channel.

Configure customer notifications

You can configure visual and sound alerts that customers can receive when they're interacting with representatives using the chat widget on your organization portal. If the chat window is minimized or inactive, the system plays a sound notification when the representative sends a message. The customer also sees a count of the unread messages.

Follow these steps to enable the customer notifications:

  1. In Copilot Service admin center, edit a chat widget. On Chat channel settings, select the User features tab.
  2. For Customer notifications, turn on the toggle. The following checkboxes are selected:
    • Show number of new messages
    • Play sound notifications for new messages
  3. Keep the default settings or select one of them depending on your requirement.

You can also configure the customer notifications when you're configuring the chat channel.

Troubleshoot

Errors in creating a chat widget

Configure a pre-conversation survey
Configure agent display name
Configure proactive chat
Configure file attachment capability
Create quick replies
Create and manage operating hours
Create chat authentication settings
Embed chat widget in your website or portal
Embed chat widget in mobile experiences
Supported browsers for live chat widget

  • Last updated on