Adding the chatbot to your website | 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. Adding the chatbot to your website Adding the chatbot to your website ================================== Updated 3 weeks ago · 3 min read Search Search Adding Civio Assist to your website takes one small snippet of code. This is a job for whoever maintains your website's page templates, so if that is not you, forward this article to them. Where the snippet goes ---------------------- The snippet belongs inside the **<head>** tag of every page the chatbot should appear on. In most sites that means adding it once to a shared header template rather than page by page. The snippet ----------- Replace **\[bot-id\]** with the bot ID your Civio representative gives you. ``` ``` What the settings mean ---------------------- - **data-bot-id** identifies your chatbot. Civio provides this, and it is different on each environment. - **data-widget-origin** tells the snippet which Civio environment to load the chat from. - **data-position** set to **fixed** keeps the launcher button in a fixed spot as the page scrolls. - **data-fixed-x** and **data-fixed-y** set how far the launcher sits from the right and bottom edges of the page. Leave both at 0 unless the button overlaps something on your site. The bot ID is specific to one environment. Pasting a staging ID into your live site will not work, and neither will the reverse. Check you have the production ID before going live. Placing the chat inside a page ------------------------------ The snippet above places the chat in the corner of the page behind a launcher button. The chat can instead sit in the body of a page, where it is always open and the page decides how much room it takes. This suits a dedicated help or contact page. See [Embedding the chat inside a page](/articles/inline-embed). Staging sites ------------- Most organisations only need the production snippet above. If you are testing on a staging copy of your site, the snippet is the same shape, but it points at a separate Civio address and uses a different bot ID. Ask your Civio representative for both, then substitute them for **\[staging-url\]** and **\[staging-bot-id\]**. ``` ``` Tell Civio your domain ---------------------- Before the chat will load, your website's domain has to be on the chatbot's allowed hosts list. Send your Civio representative the domain (or domains) you are adding the snippet to, and they will add it for you. What to expect when it is set up correctly ------------------------------------------ Once the snippet is in place and your domain has been allowed, a launcher button appears on every page carrying the snippet. Where it sits depends on the launcher design your chatbot uses: a wide bar along the bottom edge, a round button in the bottom-right corner, or an upright tab down the right edge. ![A web page with the chat launcher button sitting in the bottom-right corner, closed and labelled Ask our AI assistant](https://assist.knowledge.civ.io/storage/rJd2MPeGekvLpAeHdcFpjpaMqQsWmmh1jL01ZtnD.png) Selecting the launcher opens the chat window over the page, without navigating away. The button stays in the same spot as the page scrolls. The launcher's design, label, icon and colours are configured by the Civio team, so yours may not match the example above. See [How the chat window is branded](/articles/chat-window-branding). The open chat window looks like this: ![The open chat window showing the greeting message, a user's question and the chatbot's answer with a References tab](https://assist.knowledge.civ.io/storage/T9mWSwwl7SqMYaHd1F0dBEjnrqB5NqNGlnJVr5h2.png) If the chat does not appear, see [The chatbot is not appearing on my site](/articles/chatbot-not-appearing-troubleshooting). Next in this series [ 3. Finding your way around the dashboard ](/articles/dashboard-navigation) 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) [ Next article Finding your way around the dashboard ](/articles/dashboard-navigation) On this page New to Civio Assist? 2 / 3 [ 1 What is Civio Assist? ](/articles/what-is-civio-assist) [ 2 Adding the chatbot to your website ](/articles/adding-the-chatbot-to-your-website) [ 3 Finding your way around the dashboard ](/articles/dashboard-navigation) ### 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)