Noli on any website.
One script tag puts the Noli AI agent on a custom build, Webflow, Wix, Squarespace or plain HTML. Your branding comes from your Noli settings, so the key is all the snippet needs.
The snippet
Paste this once, just before the closing </body> tag, with your own publishable key:
<script async src="https://app.heynoli.ai/widget/v1/noli-widget.js" data-noli-key="pk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
Paste it as one line. Some CMS and WYSIWYG editors convert the indentation of a multi-line <script> into non-breaking spaces, which corrupts the attribute names so the browser never loads the script - and the bubble silently fails to appear. A single line with plain spaces avoids this. Where possible, paste into a raw-HTML or code field rather than a rich-text one.
On Shopify you do not need this - the theme app extension renders the widget natively. See Shopify.
What happens on load
- The loader reads its
data-*attributes. - It fetches your branding - colours, logo, currency, point name, greeting - from your Noli settings.
- It assembles
window.NoliConfigand injects the stylesheet, translations and chat bubble. - The visitor chats as a guest, identified by a per-browser id in
localStorage. The AI agent answers and can surface products.
Optional overrides
All optional. Set them as data-* attributes on the script tag to override what the backend supplies:
| Attribute | Default | Notes |
|---|---|---|
data-noli-key | — | Required. Your publishable key. |
data-noli-color | brand colour | Bubble and accent colour. |
data-noli-position | right | "right" or "left". |
data-noli-offset-bottom | 20 | Pixels from the bottom. |
data-noli-offset-side | 20 | Pixels from the side. |
data-noli-icon | chat | chat · star · gift · heart · sparkle |
data-noli-heading | business name | Chat window title. |
data-noli-locale | page <html lang> | Two-letter locale. |
data-noli-notification | true | "false" hides the teaser card. |
For full control, set window.NoliConfig = {…} before the loader tag - those keys win over everything else.
Identity and what the key can do
A publishable key unlocks read and chat only. It is safe to expose in page source, the same way a Stripe pk_ is. Spending points and redeeming rewards require a verified customer session, which the visitor establishes by signing in with an email code.
If your site already has its own logged-in users and you want them recognised without a second login, you need server-side signing - the same mechanism the WooCommerce plugin uses. See WooCommerce for how the token is built, or email support@heynoli.ai and we will walk you through it for your stack.
Bubble not appearing?
- Check the page source for the script tag - if the attribute names look mangled, the editor rewrote your whitespace. Re-paste as one line.
- Check the browser console for a missing-key error. A typo in
data-noli-keyfails silently otherwise. - If you set an allowed-origins list on the key, confirm the site's domain is on it - including the
www.variant if you use one.