Create a chatbot and put it on a website

What you'll build

A chat bubble in the bottom-right corner of a website. A visitor types a question, an AI Agent answers it, and the agent remembers the conversation for the rest of that visitor's session.

Prerequisites

• A connected AI provider for the AI Agent node
• Access to the website's HTML, so you can paste a script tag
• About ten minutes

Step 1: Create the chatbot

1. Open Chatbots

   Click Chatbots in the sidebar.
2. Create a chatbot

   Click Create chatbot if this is your first one, or New chatbot if you already have some. The builder opens on a new draft.

3. Name it

   On the Setup tab, replace "Untitled chatbot" in Name with a name you will recognize. The name is for you: it appears in your list and in the workflow editor, and visitors never see it.

Step 2: Write the greeting and suggested questions

Still on the Setup tab:

1. Write a greeting

   Type the first message visitors should see into Greeting, such as "Hi! How can we help?"

2. Add suggested questions

   Under Suggested questions, click Add question and type a question a visitor is likely to ask. You can add up to 4. They are shown as buttons under the greeting, and clicking one sends it as the visitor's first message.

The preview on the right follows what you type. It opens on the consent notice, as a visitor's chat does. Click Accept and start chat in the preview and send it a message: the preview always answers "This is a preview. Replies come from your workflow once it is published."

Step 3: Assign a client

In the builder's header, open the Client list and pick the client this chatbot is for. Leave it on All clients (agency brand) for a chatbot that carries your agency's brand.

Click Save. The preview switches to the client's logo and colors once the change is saved.

Step 4: Add a Privacy Policy link and publish

Every chatbot shows visitors a consent notice before they can chat, and the notice links to a privacy policy. A chatbot cannot be published without that link.

Open the Consent tab and paste the address of the privacy policy into Privacy Policy link (required to publish). It must start with https://. For what else you can set on this tab, see Ask visitors for consent before a chat.

Click Publish. Your changes are saved first. The status next to the name changes from Draft to Live.

The chatbot is now reachable, but nothing answers it yet. Until a workflow does, visitors see "Chat is unavailable right now."

Step 5: Create the workflow that answers

1. Click Create workflow

   On the Setup tab, under Answered by, click Create workflow. A new workflow opens in the editor with three nodes already connected: the Chat message received trigger, an AI Agent with memory, and a Respond node.

2. Add a model to the AI Agent

   The editor opens on the AI Agent. Add a model to it and write its instructions. The visitor's message is already set as what the agent answers.

3. Publish the workflow

   Click Publish in the editor toolbar.

For a client's chatbot, the workflow is created in that client's workspace.

Step 6: Share the link

Go back to the chatbot and open the Share tab. Copy the Chat link and open it in a new tab. It is the chat on a full page, and the quickest way to test.

The chat opens on the consent notice. Click Accept and start chat, then type a question and press Enter. The chat shows "Typing…" while the workflow runs and then the agent's answer. Ask a follow-up that depends on your first message, such as "What did I just ask you?" A correct answer confirms that memory is working.

Step 7: Allow the website

On the Share tab, type the site's address under Allowed websites and click Add:

https://www.example.com

The builder keeps only the website part of what you type: https:// is added when you leave it off, and a path is dropped. https://www.example.com and https://example.com are two different addresses, so add both if the site answers on both.

Each website saves as soon as you add it. You do not click Save for this list. While the list is empty, browsers block the widget on every site.

Step 8: Paste the embed code

On the Share tab, click Copy embed code. The code looks like this, with your own domain and chatbot id:

<script
  src="https://www.youragency.com/api/chat/widget.js"
  data-chat-id="5f0c2c1e-8b3a-4d57-9a55-0e8f3f1f6a10"
  async
></script>

Paste it before the closing </body> tag on every page that should show the chat, then reload the page. A chat bubble appears in the bottom-right corner.

What could go wrong

• No bubble appears. The chatbot is still a Draft, or the page's address is not under Allowed websites, or it is listed with a different www. Fix it and reload the page. The change applies on the next page load.
• Publish is unavailable. The header shows "Add a Privacy Policy link to publish." Add the link on the Consent tab.
• The chat link shows "Chat not found". The chatbot is a Draft. Publish it.
• The chat opens and says "Chat is unavailable right now." No published workflow answers the chatbot. Open the Setup tab and read the Answered by card: it names the workflow and says when it is not published or belongs to another client.
• Every reply is "Chat is unavailable right now." The workflow has no Respond node on the path the run takes, the Respond node returns JSON without a reply field, or your plan's run quota or spend cap has been reached. Open the latest run in the run history to see which.
• "That took too long. Please try again." The workflow took more than 60 seconds to reach the Respond node, or the run paused before reaching it. The run still finishes in the background.
• The agent forgets earlier messages. The AI Agent's Memory sub-node was removed, or Remember the conversation is off.

Next steps

• Chatbot reference for every field, limit, and message a visitor can see
• Ask visitors for consent before a chat
• How chatbots work
• The Chat trigger for the fields your workflow receives and the reply format