Embedding the chat inside a page | Civio Civio Assist Knowledge Base     [Skip to content](#main)  [ ![Civio Civio Assist Knowledge Base](/civio-light.svg) ](https://nginx.deploy-lagoon-production.civio-assist-docs.dh1.amazee.io)  [Product documentation](/articles) [Release notes](/releases) [ Support portal ](https://nginx.deploy-lagoon-production.civio-assist-docs.dh1.amazee.io/portal/login)   Toggle navigation      

  [Product documentation](/articles) [Release notes](/releases) [Support portal](https://nginx.deploy-lagoon-production.civio-assist-docs.dh1.amazee.io/portal/login)  

  1. [Home](/) ›
2. [Product documentation](/articles) ›
3. [Setting up and managing your chatbot](/articles?category=2) ›
4. Embedding the chat inside a page

 Embedding the chat inside a page
================================

Updated 3 weeks ago · 3 min read

 Search     Search  

By default the chatbot sits in the corner of your website behind a launcher button. It can instead be placed in the body of a page, where it is always open and the page decides how much room it takes. This is a job for whoever maintains your website's page templates.

Inline placement suits a dedicated help or contact page, where the chat is the purpose of the page rather than an aid alongside it. Everything else is unchanged: the same knowledge base, the same branding, the same answers. For the standard floating setup, see [Adding the chatbot to your website](/articles/adding-the-chatbot-to-your-website).

![A web page with the chat window embedded in the content column, page text flowing above and below it](https://assist.knowledge.civ.io/storage/I0ecIOCdxSIWAkG0eOOoxeRPdOi3G4DQ4FTQhogO.png)

What is different inline
------------------------

- The chat is always open. There is no launcher button and no close button.
- The page controls the size, and content flows above and below the chat as it would around any other block.
- The control that widens the chat over the page is not available, because the chat is part of the page rather than floating above it.

Add a placeholder to the page
-----------------------------

Put an empty element where the chat should appear. The chat is mounted inside it.

```

```

The placeholder can set its own size. Without these attributes the chat fills the width of whatever contains it and stands 600 pixels tall.

```

```

Add the snippet
---------------

The snippet is the standard one with **data-position** set to **inline**. Replace **\[bot-id\]** with the bot ID your Civio representative gives you.

```

```

If your placeholder cannot carry that attribute, because a page builder strips attributes it does not recognise, point the snippet at the element by CSS selector instead.

```
data-target="#my-chat-slot"
```

Styling the space around it
---------------------------

The chat brings no frame of its own. Apply any border, corner radius, shadow or margin to your placeholder element in your own stylesheet.

Sites that change page without reloading
----------------------------------------

On a site built as a single-page application, the chat re-attaches itself when a route change replaces the placeholder, and the conversation is kept. No extra wiring is needed. Where your framework replaces the page content in a way the script cannot observe, call the mount command after the swap.

```
civio_assist('mount')
```

If the chat does not appear
---------------------------

Your website's domain still has to be on the chatbot's allowed hosts list, and the bot ID is still specific to one environment. Both are covered in [The chatbot is not appearing on my site](/articles/chatbot-not-appearing-troubleshooting).

Check the placeholder element survives your build. Some page builders and content filters remove attributes such as **data-civio-assist-inline**, which leaves the script with nowhere to mount the chat.

Was this article helpful?
-------------------------

Your feedback helps us prioritise what to rewrite.

      Yes     No  

 [    Back to Setting up and managing your chatbot ](/articles?category=2) 

 On this page 

### Still need help?

Raise a request in the support portal and track it to resolution.

 [ Submit a support request ](https://nginx.deploy-lagoon-production.civio-assist-docs.dh1.amazee.io/portal/login)

**Need additional help?** Contact our support team at [help@assist-support.civ.io](mailto:support@civ.io)

 © 2026 [Civio](https://civ.io)