Inline Embed

Embed an AI chatbot on your website, inside a contact, help or docs page. It answers from your connected knowledge and hands visitors to a person.

eesel's inline embed lets you embed an AI chatbot on your website as part of a page, rather than as a floating button. It answers visitors in real time from everything you have connected.

Put your AI teammate inside a page of your own site, as part of the page rather than a floating button. A contact page, a help center, a docs page. It answers from everything you have connected, and links the page it used.

Your agent's chat embedded in a page of your own site, answering a visitor in place.

Embed the chatbot on your website

1

Ask your agent for an inline chat

Open the chat in your dashboard and ask for an inline chat on the page you have in mind. Your agent uses what it already knows about your business from your connected sources, a store in this example, to pick a title, a welcome message and three starter questions. It posts a preview link and tells you where the embed snippet lives. It also tells you what it left blank, such as the colour and the logo, so you can set those in settings.

The agent reports what it set up and posts the preview link.

Check it worked. The left sidebar now lists Inline Embed under Integrations. From a terminal with the eesel CLI installed, eesel status lists it on your agent.

2

Check it on your Automations page

The inline chat is its own automation, created and switched on when it is set up. Your Automations page lists it under the title you gave it, with Inline Chat underneath. Pause it there and the chat stops answering without touching your site.

The inline chat automation, switched on.

Check it worked. From a terminal, eesel automations lists the automation as on.

3

Shape it in settings

Open Integrations > Inline Embed in the left sidebar. Open preview and Copy embed code sit at the top right. The Welcome Message, the Title and the Placeholder text come first.

The top of the settings page.

Below that, set the Color of the send icon and upload an Inline chat image or paste its address. Hide suggested questions removes the clickable questions from the start of the chat altogether, both the ones you write and the ones your agent would suggest.

Colour, image and the suggested questions switch.

Add up to three Suggested questions. Leave them empty and your agent suggests its own. Instructions for this channel are extra instructions your agent follows only in this chat. They add to its main instructions.

The suggested questions and the channel instructions.

Chat inline at the bottom holds the embed code, an iframe with your agent id and a trigger id in it. The trigger id only opens this chat, so it is safe to publish on a page. Save and copy embed code saves your changes and copies it in one step.

The embed code, ready to copy.

4

Add it to your page

The embed code is an iframe. Paste it into any page where your platform lets you place HTML, at the spot where the chat should appear. The page saves, and the chat is live. If you are not sure where that is on your platform, ask your agent in the dashboard chat.

The rest of this step is an example on a Shopify store page.

The agent's steps for a Shopify page.

In the Shopify admin, open Online Store > Pages, open the page, and click Show HTML in the editor toolbar. Paste the code where you want the chat to appear, then click Save.

The iframe pasted into the Contact page's HTML.

The shape of the code, with your ids filled in:

<iframe
  src="https://dashboard.eesel.ai/agent-inline-chat/YOUR_AGENT_ID?triggerId=YOUR_TRIGGER_ID"
  width="420"
  height="600"
></iframe>

The default size is 420 by 600 pixels. Change either number in the snippet to suit the page. A width of 100% fills the column the chat sits in.

5

Try it as a visitor

Open the page. The chat shows your title, your welcome message and your suggested questions, in place on the page.

The chat live on the Contact page.

Ask it a question. It answers from your connected knowledge, in the page.

A visitor's question and the answer, in the page.

6

Hand a conversation to a person

Tell your agent in the dashboard chat when to escalate and what to do then. Creating a helpdesk ticket is the usual choice. It writes the rules into its instructions and lists the steps back to you.

The agent lists the handover steps it added.

Open your Instructions page to read what it wrote. The rules are numbered sentences you can edit by hand.

The saved handover rules on the Instructions page.

Now test it as a visitor and ask for a real person. Your agent says it will create a ticket and asks for the name and email address it needs.

The agent taking the escalation and asking for contact details.

Give it the details. It creates the ticket, tags it, and tells the visitor the ticket number.

The ticket number confirmed to the visitor.

Then open your helpdesk. The ticket is there under the visitor's email address, with a summary of the problem and the handover tag.

The handover ticket in Gorgias, tagged.

Inline Embed settings

Setting	What it does
Welcome Message	The first message a visitor reads
Title	The heading at the top of the chat
Placeholder text	The grey hint text inside the message box
Color	The colour of the send icon and the accents
Inline chat image	The logo or avatar shown in the chat. Upload one or paste its address
Hide suggested questions	Shows no suggested questions at all, neither yours nor generated ones
Suggested Question 1, 2, 3	Up to three clickable questions shown at the start. Leave all three empty and your agent suggests its own
Instructions for this channel	Extra instructions your agent follows only in this chat. They add to its main instructions
Chat inline	The iframe embed code, with your own agent and trigger ids

Saved settings show on the page the next time it loads.

Sources, triggers and actions

Sources

The inline chat is not a source, and nothing typed in it becomes knowledge. Its answers come from what else you have connected: your website, help center, docs and files. With a store such as Shopify connected, it can also talk about products, stock and orders. See Integrations.

Triggers

The inline chat has one trigger, and its automation is created for you when the chat is set up.

Trigger	Fires when	Best for	Key
Inline Chat	A visitor sends a message in the embedded chat	Help centers, docs and contact pages	inline_chat

Actions

The inline chat has no actions of its own. What your agent can do for a visitor comes from the other integrations on it, such as creating a helpdesk ticket or looking up an order. A handover works through your agent's instructions and your helpdesk's create-ticket action, as in the last step above.

You stay in control the whole way. Adjust your AI agent's access to knowledge and its action permissions to your liking. See Actions and Approvals.

Limitations

• Visitors cannot change your agent. The inline chat is customer-facing, so it has no access to your instructions, settings or integrations.

• Nothing typed in the chat becomes knowledge. It answers from the sources you connect.

• It has no actions of its own. Order look-ups and tickets come from your other integrations.

• Some page editors strip iframes when you save. Paste it into your theme's page template instead.

• It has no handover to a second live chat widget. Use handover rules in your instructions.

Troubleshooting

The chat does not appear on the page?

Check the iframe is in the page's HTML and that you saved the page. If the page editor removes the iframe when you save, paste the snippet into your theme's page template instead, or ask your agent in the dashboard chat where it goes on your platform. Then check the automation is still on.

The chat is cut off or too small?

Change the width and height on the iframe. The default is 420 by 600 pixels, and width="100%" fills the column.

A settings change is not showing on the page?

Save with Save and copy embed code, then reload the page. Open preview always shows the saved settings.

FAQ

How do I embed an AI chatbot on my website with eesel?

Ask your agent in the dashboard chat for an inline chat, copy the iframe from Integrations > Inline Embed, and paste it into your page's HTML where the chat should appear. It is live as soon as the page saves. The steps are in Embed the chatbot on your website.

How is the eesel inline chat different from the chat bubble?

The Chat Bubble is a floating button in the corner of every page, while the inline chat sits inside one page as part of its content. Both reach the same agent with the same knowledge and instructions, and you can run both.

Does the eesel inline chat work on Shopify or WordPress?

Yes. The inline chat is a standard iframe, so it works on any platform that lets you place HTML in a page. On Shopify, open the page, click Show HTML and paste it. If an editor removes the iframe on save, paste it into the page template instead.

Can I change the size of the eesel inline chat?

Yes. Change the width and height on the iframe. The default is 420 by 600 pixels, and width="100%" fills the column the chat sits in.

Can the eesel inline chat hand a visitor to a real person?

Yes. Tell your agent when to escalate and what to do, such as creating a ticket in your helpdesk, and it asks the visitor for a name and email, creates the ticket and gives them its number.

Do I have to turn an automation on for the eesel inline chat?

No. Setting the chat up creates its automation and switches it on. Your Automations page lists it, so you can pause it there without touching your page.

Can I use the eesel inline chat on more than one page?

Yes. Paste the same code on each page. If one page needs a different welcome message or its own channel instructions, ask your agent in the dashboard chat for a second inline chat, or click New automation on the Automations page and pick Inline Chat. Each has its own snippet.

Related pages

• Chat Bubble for the floating version of the same chat

• Public Chat Link for a hosted link you can share

• Helpdesk for the customer-facing work it picks up after a handover

• Actions and Approvals for choosing what your agent may do

• Use eesel from Claude and other assistants and Use eesel from ChatGPT to work with your agent from an AI assistant