Website Embed
Website Embed adds a small AI Front Desk workflow bubble to your website. Visitors can open it, ask questions, share contact details, and create a clearer handoff for the business owner.
The workflow runs through TROPIKAL. Your website only loads the bubble. The workflow owns the Website Embed input and any handoff or output destination. The persona controls behavior, and Knowledge & Capabilities define approved sources and actions.
What visitors see
- A floating chat bubble on the website.
- A short AI disclosure near the message box.
- Answers based on approved knowledge and persona instructions.
- Follow-up questions when the workflow needs a name, contact method, service interest, urgency, or preferred time.
The embed should feel like part of the site, but it should not pretend to be a human. Keep the disclosure visible and keep sensitive information out of chat unless it is needed for the request.
What the owner gets
For a front desk workflow, the goal is not just another chat window. The owner should receive a useful next step:
| Visitor interaction | Owner outcome |
|---|---|
| Asks a common question | The visitor gets an immediate answer from approved knowledge. |
| Shares interest in a service | The workflow asks for the details needed to follow up. |
| Provides contact details | The handoff receipt includes contact method, interest, timing, and the next action for review. |
| Requests something uncertain | The workflow can say what is missing instead of inventing an answer. |
| Needs human review | The workflow produces an owner-ready handoff instead of exposing a customer record surface. |
Before you embed
Create and test the workflow first:
- Create an AI Front Desk workflow with a clear job.
- Under When this runs, choose Channel and configure Public Embed.
- Add approved knowledge, such as FAQs, service descriptions, policies, or site copy.
- Test the workflow in the dashboard with real customer questions.
- Confirm the workflow asks for lead details before promising a booking or follow-up.
- Keep Respond to input channel as the default outcome until the basic chat works.
If the workflow answers too generally, improve its knowledge before adding it to a live website.
Add the website bubble
In the workflow dashboard:
- Open the workflow.
- Open When this runs.
- Choose Channel, then Public Embed.
- Add the channel display name, avatar image, welcome message, theme, and the websites where the bubble is allowed to appear.
- Publish the workflow and activate the Website Embed binding for the connected website.
- Copy the install snippet shown by the dashboard or the connected website setup page.
- Add the snippet to your website where custom scripts are allowed.
- Publish the site and open the live page.
- Click the bubble and send a short test message.
For connected TROPIKAL websites, the site loads the bubble through same-origin TROPIKAL Connect. The public page does not need a browser token or permanent Ops key.
A current connected-site snippet looks like this:
<script async src="/tropikal-connect/embed/chat-widget.js"></script>Do not use legacy persona snippets, browser tokens, publish tokens, or permanent Ops keys for a workflow embed.
Test after installing
Run a short test before sending traffic to the page:
| Test | Expected result |
|---|---|
| Open the website | The bubble appears once, usually in the bottom-right corner. |
| Click the bubble | The chat opens without leaving the page. |
| Ask a known FAQ | The answer uses approved knowledge. |
| Ask for a booking | The workflow asks for the details needed for handoff. |
| Close and reopen | The widget closes cleanly and reopens normally. |
| Check mobile | The chat fits the screen and controls are not clipped. |
Common issues
| Issue | First check |
|---|---|
| Bubble does not appear | Confirm the install snippet is present on the published page. |
| Console mentions a legacy token or persona attribute | Replace the snippet with the current TROPIKAL Connect snippet. |
| Chat says it is unavailable | Confirm the Website Embed binding is active and the website is allowed. |
Chat says Connection failed | Follow the Website Embed connection failed guide to refresh the binding or update the allowed website list. |
| The workflow gives weak answers | Add or clean up approved knowledge, then test again. |
| The bubble appears twice | Remove duplicate snippets from the page or theme settings. |
| The wrong workflow opens | Replace the snippet with the one from the correct workflow. |
| The code was exposed | Rotate the install code and update the website. |
Safety expectations
- Do not paste passwords, payment details, private operations notes, or credentials into workflow knowledge or visitor chat.
- Keep owner review for bookings, uncertain answers, sensitive requests, and anything that changes business records.
- Do not install old permanent keys, browser tokens, or publish tokens on public websites. Use the current Website Embed snippet from the dashboard.
- Deactivate or refresh the Website Embed binding when a contractor, staging site, or old build no longer needs access.
Next: improve the workflow’s knowledge sources or review safe boundaries in Knowledge & Capabilities.