ShopAssistGuides
Inline chat
Embed the chat in the page instead of a floating button.
The inline surface puts a composer directly in the page, in the shape of a chat prompt rather than a floating button. Use it on a landing page or a help page where the chat is the point of the page.
It is a separate bundle from the floating widget, and the two are independent. A page can carry both.
React
import { ShopAssistInline } from "@shopassist/react";
<ShopAssistInline
greeting="What are you looking for?"
placeholder="Ask about any product"
suggestions={["What is your best running shoe?", "Do you ship to Germany?"]}
/>;The shop comes from the provider.
Anywhere else
The container must already be in the document when you mount.
<div id="assistant"></div>import { mountInline } from "@shopassist/js";
const instance = mountInline({
containerId: "assistant",
shopDomain: "your-shop.com",
greeting: "What are you looking for?",
});
// Later
instance.destroy();Options
| Option | What it does |
|---|---|
containerId | The id of the element to render into. Required. |
greeting | Heading above the composer. |
placeholder | Composer placeholder text. |
suggestions | Chips shown under the composer. |
theme.primaryColor | Brand color. |
theme.framedBackground | Draws a frame around the composer. |
features.historyPanel | Past chats button. Defaults to on. |
features.showSuggestions | Suggestion chips. Defaults to on. |
greeting, placeholder and suggestions also take an object keyed by language:
mountInline({
containerId: "assistant",
shopDomain: "your-shop.com",
greeting: { en: "What are you looking for?", de: "Wonach suchen Sie?" },
});Sizing
The widget fills its container's width and grows with the conversation. Give the container a maximum width; do not give it a fixed height.
#assistant {
max-width: 720px;
margin: 0 auto;
}Last updated on