AI Chat installation - embedded display mode – Assembled

The embedded display mode allows you to place the Assembled chat widget directly inside a container element on your page, giving you full control over where the chat appears within your layout.

This is ideal for creating custom chat experiences that feel native to your application or website design.

When to Use Embedded Mode

Use the embedded display mode when you want to:

• Integrate chat into your existing UI rather than using the default floating launcher
• Create a dedicated support section on your website with chat always visible
• Build custom chat experiences that match your brand and layout
• Control exact placement of the chat interface within your page structure

Requirements

Before setting up embedded mode, ensure:

• ✅ The container element exists in the DOM before the chat script loads
• ✅ The container selector is unique on the page
• ✅ The container has appropriate dimensions (the embedded widget will fill its container)

Setup Methods

There are two ways to configure Embedded Display Mode:

Method 1: Script Tag Configuration

Add a container element and configure the script tag with embedded mode attributes:

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

Key attributes:

• data-display-mode="embedded" - Enables embedded mode
• data-embedded-container="#chat-container" - CSS selector for your container element

Method 2: Chat Settings UI

Configure embedded mode through the Assembled dashboard:

1. Navigate to Chat agent → Themes
2. Under Display mode, select "Embedded"
3. In the Container selector field, enter a CSS selector (e.g., #chat-container or .chat-wrapper)
4. Click Save

Additional Configuration Options

Hide the Header

When using embedded mode, you may want to hide the chat header to create a more seamless integration:

<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"
></script>

Hide the Launcher Button

Since embedded mode typically doesn't need a floating launcher button:

<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-launcher="true"
></script>

Styling Your Container

The embedded widget will automatically fill its container. Style your container element to control the chat's appearance:

#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;
  }
}

Troubleshooting

Chat widget not appearing?

• Verify the container element exists in the DOM before the script loads
• Check that the CSS selector matches your container element exactly
• Ensure your container has defined dimensions (width and height)
• Open browser console and look for error messages

Widget not filling the container?

• Make sure your container has explicit height/width values
• Check for CSS conflicts that might be constraining the widget

Want to switch back to launcher mode?

• Remove data-display-mode="embedded" and data-embedded-container attributes
• Or change display mode to "Launcher" in Chat Settings → Theme tab