Embed chat widget in your website or portal

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

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

In Dynamics 365, go to Customer Service admin center.
Go to Channels > Chat.
Select the chat instance that you want to embed in your website, and select Edit.
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.
  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.

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.
In Customer Service admin center, go to Channels > Chat.
Open the chat widget you want to embed in your website or create a new one.
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.

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.
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.
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.
End chat: A customer can end the conversation by selecting the Close chat button. A confirmation message appears before the conversation ends.