Chatbot Embed
View Embed Code Page (use the embed code action on a chatbot)
A chatbot can be placed on your website as a small search box. When a visitor submits a question, the chatbot opens in a full-screen popup (an iframe pointing at /chat/<name>/<id>/?embed=1).
There are two embed types. They behave the same and must be kept in sync:
| Embed | Where it comes from | Used by |
|---|---|---|
| Script embed | ai-chat-embed.js served from your PeakIDX site | Standalone sites: a div.aiChatEmbedContainer with data-* attributes plus one script tag |
| React embed | The ai-chat-embed component of the PeakIDX WordPress plugin (peakidx-react project) | WordPress: the [peakidx-react-component name="ai-chat-embed" ...] shortcode |
What you can and cannot restyle
- The look inside the chat is controlled by the chatbot's custom skin, see Chatbot Skinning.
- The popup frame around the chat (dark background, rounded corners, maximum width, backdrop, shadow) is drawn by the embedding page. PeakIDX does not restyle it for skins. To change it, override the frame CSS on your web page:
.pais-modal,.pais-frame(script embed) or.peakidxAiChatEmbed-modal,.peakidxAiChatEmbed-frame(React embed).
Close button
The popup has a close button, and pressing Esc or clicking outside the popup also closes it. A chatbot with a custom skin can show its own close button inside the chat instead, and the popup's built-in button is hidden automatically. This needs no setup. If your site still uses an older embed, the popup's built-in close button stays and everything keeps working.