Add the chat widget to your website
Updated
The chat widget is one line of code. Once it's on your pages, a chat button appears in the corner and visitors can talk to your assistant.
If your site is built with Pixexl, you don't need to do anything: deployed sites include the widget already.
1. Copy the code
Open your project and go to Settings. Under Widget integration code, choose Copy snippet. It looks like this:
<script src="https://…/pixe-widget.js" data-project-id="…" data-api="…" async></script>
Use the code from your own dashboard: it contains your project's ID.
2. Paste it into your site
Paste it just before the closing </body> tag, on every page that should show the chat. Most site builders have a place for this:
- WordPress: a header and footer plugin, or your theme's footer settings. Our guide How to add a custom AI chatbot to your WordPress website walks through each option.
- Wix, Squarespace, Shopify: the custom code or code injection settings, in the footer.
- Your own HTML: the end of your page template.
3. Check your domains
The widget only works on your project's allowed domains, listed in Settings. If your site is at www.example.com and the project's domain is example.com, that's fine: www. is treated as the same domain. A different domain, like a second site, needs adding.
To try the widget on your own computer first, add localhost as a domain.
Change how it looks
The widget's colours, texts, position and whether it shows at all are in Chat → Widget, with a live preview. Changes reach your site within about a minute, without touching the code again.
The chat button doesn't appear
- Make sure the code is on the page: view the page source and search for
pixe-widget. - Check the page's domain is one of the project's allowed domains.
- Check the widget isn't turned off in Chat → Widget.