Home · Insights · Implementation
How we built the AI chat widget on our own website
We recommend things we have run ourselves. The assistant on our website is one of them. Here is how it works, the rules we gave it, and what we would do differently if you were starting from scratch.
What we wanted it to do
A website visitor often has a question that is not on any page, and a form feels like too much commitment for a first question. We wanted a small chat box that answers honestly from what our site says, and, when it makes sense, hands the visitor to a person. It is deliberately narrow. It is not a support desk and does not try to be.
How it is put together
The page keeps the conversation so far and sends it to a workflow in our automation tool whenever the visitor sends a message. The workflow adds our instructions, asks the AI model for a reply, and returns it. That indirection is the important design choice. The AI key never sits in the visitor's browser, and everything the model is told lives in one place we can change without touching the site.
The model also decides when it has heard enough to be useful. When it does, it adds a marker at the end of its reply. The workflow removes the marker before the reply goes back and sends a short summary of the conversation instead, which the page uses to show two buttons: book a call, or message us on WhatsApp with the summary pre-filled. The offer appears once, and never on the first reply, because pushing a call at someone who has just said hello reads as a sales script.
The rules we gave it
The instructions are short. They give it one job, say it must ask at most one clarifying question, keep replies to two to four sentences, never state a price (pricing depends on scope), and never invent a client, a case study or a result. If you build one yourself, test it with the questions it should refuse, and spend your time there, not on how clever the reply sounds. For more on writing instructions that hold up, see whether you need prompt engineering.
What it cannot do, on purpose
- It cannot book anything. It can only suggest the two next steps. If a visitor gives an email address or phone number, the workflow captures it so a person can follow up.
- It does not give a quote. Pricing depends on scope, and it says so.
- It is labelled as an AI assistant in the chat header.
If the workflow is down, the visitor sees a short, plain message and the rest of the site works as normal. A chat box that breaks the page is worse than no chat box.
What we would tell you before you build one
- Decide the one job first. Answer pre-sales questions and route to a person. Do not also make it your support desk. One honest caveat: our assistant's instructions are not grounded in a knowledge base of the site, so it relies on a short description of what we do. A knowledge base is the next improvement we would make.
- Keep the key and the instructions server-side.
- Always leave a path to a person, and make sure someone is there to receive it, using the discipline in speed to lead.
- Tell people it is an assistant. We labelled ours as an AI assistant in the header when we checked this post against our own widget. The EU AI Act sets transparency duties for chatbots; see the EU AI Act now.
If you want one on your own site, this is what we build under AI chat for Mallorca business websites.