Set up your chatbot
Website embed
Add the chatbot to your website with one script tag and control where it can run.
Add the script
Setup › Website Embed
Copy the embed code from the dashboard and paste it just before the closing </body> tag. Add it to every page where the chatbot should appear, or once in a template that all pages share. The defer attribute makes sure it never slows down your page.
HTML
<script defer src="https://cdn.swai.chat/chatbot-public/frontend/loader.js?chatbotId=YOUR_CHATBOT_ID"></script>Embedding on a live website requires a paid plan. During the trial, test with the preview in the dashboard.
Where to paste it
- WordPress
- Use a plugin for header and footer scripts, or the custom code setting of your theme.
- Webflow
- Site settings › Custom code › Footer code, then publish.
- Shopify
- Online Store › Themes › Edit code ›
theme.liquid, before</body>. - Wix
- Settings › Custom code › Add custom code, placed in "Body – end" on all pages.
- HTML
- Paste it into your page template before
</body>.
Always use a custom code, embed or HTML block. Text blocks in site builders remove scripts.
Display modes
Choose how the chatbot appears with the mode parameter. You can try each mode with the preview buttons in the dashboard.
bubble(default)- A chat button in the bottom corner that opens the chat window. The right choice for most websites.
floating- An input field at the bottom of the page that invites visitors to ask a question right away.
embedded- The chat fills its container, for a dedicated help or chat page. Make sure the container has a height.
Parameters
Add parameters to the script URL, separated with &:
HTML
<script defer src="https://cdn.swai.chat/chatbot-public/frontend/loader.js?chatbotId=YOUR_CHATBOT_ID&mode=floating"></script>chatbotId- Required. Your chatbot's ID, already filled in when you copy the embed code.
modebubble,floatingorembedded. Default:bubble.openOnLoadtrueopens the chat when the page loads. It applies tobubbleandfloatingmode and has no effect inembeddedmode. Once a visitor closes the chat, it stays closed in that browser tab and opens again automatically in a new tab or browser session. Default: off.
Domain restriction
Under Domain Restrictions, enter the address of the website where the chatbot runs, for example https://www.example.com. The chatbot then only works there, so other websites cannot embed it with your embed code and use up your message quota.
The domain restriction protects against embedding on other websites, but it is not access control. It checks the website address the browser sends with each request, and a script outside a browser can fake that address. So do not treat the chatbot or its knowledge base as private.
The domain must match: www.example.com and example.com count as the same domain, but every other subdomain, such as shop.example.com, is a different one.