Edit

Embed chat widget in your website or portal

  • Article

Omnichannel for Customer Service offers a suite of capabilities that extend the power of Dynamics 365 Customer Service Enterprise to enable organizations to instantly connect and engage with their customers across digital messaging channels. An additional license is required to access Omnichannel for Customer Service. For more information, see the Dynamics 365 Customer Service pricing overview and Dynamics 365 Customer Service pricing plan pages.

Embed chat widget in a website or Power Apps portal

Do the following steps to embed the chat widget in a website or Power Apps portal.

  1. In Dynamics 365, go to Customer Service admin center.

  2. Go to Channels > Chat.

  3. Select the chat instance that you want to embed in your website, and select Edit.

  4. On the Chat widget tab, copy the widget code snippet in the chat widget section and then do one or all of the following:

    • To embed chat widget in your website, paste the code in the HTML source <body> of your website.

    • To embed chat widget in your Power Apps portals,

      1. Open the Portal Management app.
      2. Go to Portal > Content Snippets.
      3. Find the Chat Widget Code content snippet and open it. Screenshot of the chat code snippet in portal.
      4. On the General tab, scroll down to the Value (HTML) field, and paste the chat widget snippet code.
      5. Save the changes. The chat widget is now embedded into the portal.

If you don't see your chat widget in the portal, see Troubleshoot issues in Omnichannel for Customer Service.

Embed chat widget in mobile experiences

  1. Create the code snippet. Refer to Render a live chat widget on the mobile app for samples showing how to enable rendering of the web version of the live chat widget on mobile devices.
  2. In Customer Service admin center, go to Channels > Chat.
  3. Open the chat widget you want to embed in your website or create a new one.
  4. On the Chat widget tab, copy the widget code snippet in the chat widget section and paste it in the source code of your mobile operating system.

Customer experience of chat widget

After you configure the chat widget, it has the following capabilities:

  • Minimized mode: By default, the chat widget appears in minimized mode. If any messages come while the widget is in the minimized mode, a count of the messages is shown.

    Screenshot of chat widget in minimized mode.

  • Maximized mode: A user can maximize the chat widget to start a conversation with an agent.

  • System events: System-generated messages appear for events, such as when an agent joins a conversation, or a conversation is transferred by the agent or supervisor to another agent. Screenshot of chat widget with system event messages displayed on the widget for customer.

  • Keyboard shortcut: During the chat session, the customer can press Ctrl+/ to return the cursor to the message send box from elsewhere on the page.

  • Pre-conversation survey: If a survey is configured by an admin, it appears for the user before the conversation starts. This survey also helps the user connect to an appropriate agent. Screenshot of pre-conversation survey questions that are displayed to the customer.

  • End chat: A customer can end the conversation by selecting the Close chat button. A confirmation message appears before the conversation ends.

Note

For advanced configuration like embedding chat widget on specific web pages, see Create and manage portals.

See also

Supported browsers for live chat widget
Add a chat widget
Configure a pre-conversation survey
Configure agent display name
Configure file attachment capability
Create quick replies
Create and manage operating hours
Create chat authentication settings
Render a live chat widget on the mobile app