Embedded chat widget

Plans and permissions:

• Add-on: AI agents, billed separately
• Turn on embedded mode in the chat agent’s settings: Admin, Manager, or Team Lead role, or a custom role with Chat agent settings set to Can edit chat agent settings

Use embedded display mode to put the chat inside an element on your page, instead of the floating chat window. The chat fills the element, so you control exactly where it appears and how big it is. This suits a dedicated support page with the chat always visible, or a chat built into your app’s layout.

To turn it on in Assembled, go to AI support > Chat agent, open the chat agent, and select the Themes tab. You can also turn it on in the script tag on your page.

How embedded mode works

• The chat fills the element you choose, called the container. Give the container a width and a height.
• The container must be in the page’s HTML before the chat script loads, and its CSS selector must match only one element on the page.
• Embedded mode usually doesn’t need the launcher button or the chat header, so you can hide them. See Hide the launcher and header.
• Settings in the script tag override the chat agent’s settings for that page. For all script tag options, see Chat widget advanced setup.

Turn on embedded mode in Assembled

This turns on embedded mode everywhere this chat agent is installed.

1. Go to AI support > Chat agent, open the chat agent, and select the Themes tab.
2. Under Display mode, select Embedded.
3. In Container selector, enter the CSS selector of your container, such as #chat-container or .chat-wrapper.
4. Select Save changes.

Then add the container to your page, as in the next section.

Turn on embedded mode in the script tag

To use embedded mode on specific pages only, add a container element to the page, and set the display mode and container in the script tag:

<!-- Add a container element in your HTML -->
<div id="chat-container"></div>


<!-- Add the script with embedded mode attributes -->
<script
  src="https://cal.assembledhq.com/static/js/public-chat.js"
  data-company-id="YOUR_COMPANY_ID"
  data-profile-id="YOUR_PROFILE_ID"
  data-display-mode="embedded"
  data-embedded-container="#chat-container"
></script>

• data-display-mode="embedded" turns on embedded mode.
• data-embedded-container="#chat-container" is the CSS selector of your container.

Hide the launcher and header

To make the chat blend into your page, hide the chat header, the launcher button, or both. On the chat agent’s Themes tab, select Disable header or Disable launcher, or add these attributes to the script tag:

<script
  src="https://cal.assembledhq.com/static/js/public-chat.js"
  data-company-id="YOUR_COMPANY_ID"
  data-display-mode="embedded"
  data-embedded-container="#chat-container"
  data-disable-header="true"
  data-disable-launcher="true"
></script>

Style your container

The chat fills its container, so style the container to set the chat’s size and frame. For example:

#chat-container {
  width: 100%;
  height: 600px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


/* Mobile-friendly embedded chat */
@media (max-width: 768px) {
  #chat-container {
    height: 500px;
    border-radius: 0;
  }
}

Switch back to the floating widget

• In the script tag, remove the data-display-mode="embedded" and data-embedded-container attributes.
• In Assembled, set Display mode to Widget on the chat agent’s Themes tab, and select Save changes.

If the embedded chat doesn’t appear or doesn’t fill its container, see The chat widget doesn’t appear or doesn’t show your changes.