Edit

Embed chat widget in your website or portal

  • Article
  • 2 minutes to read

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 your web portal

  1. In Dynamics 365, go to one of the administrator apps.

  2. Go to Channels > Chat.

  3. Open the chat widget you want to embed in your website.

  4. On the Basic details tab, copy the widget snippet code from the Code snippet section.

  5. Paste the chat widget snippet code in the HTML source <body> of your website.

Embed chat widget in your Power Apps portals

  1. In one of the administrator apps, open the chat widget you want to embed in Power Apps portals.

  2. On the Basic details tab, copy the widget snippet code from the Code snippet section.

    Copy code snippet of a chat widget.

  3. Open the Portal Management app.

  4. Go to Portal > Content Snippets.

  5. Find the Chat Widget Code content snippet and open it.

    Go to Chat Widget Code content snippet in portal.

  6. On the General tab, scroll down to the Value (HTML) section.

  7. Paste the chat widget snippet code in the HTML tab.

    Paste code snippet of a chat widget.

  8. 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 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. Open one of the administrator apps.
  3. Go to Channels > Chat.
  4. Open the chat widget you want to embed in your website or create a new one.
  5. On the Basic details tab, copy the widget snippet code you created or modified into the Code snippet section.
  6. Copy the widget snippet code from the Code snippet section and paste it in the source code of your mobile operating system.

Customer experience of chat widget

After the chat widget is configured, it has the following capabilities:

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

    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 are shown for events, such as when an agent joins a conversation, or a conversation is transferred to another agent.

    System events in the chat widget.

  • 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-chat survey: If a survey has been configured by an admin, it's shown to the user before the conversation is started. This survey also helps the user connect to an appropriate agent.

    Pre-chat survey in the chat widget.

  • End chat: A customer can end the conversation by selecting the Close chat button. A confirmation message is displayed before ending the conversation.

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-chat 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