Add an AI chat widget to your website

The chat is one line of code. You’ll find yours, with your agent’s key already in it, in Settings → Install and at the end of setup.

<script src="https://app.dazza.io/widget.js" data-agent="dz_…" async></script>

Paste it just before the closing </body> tag on every page. The chat button appears once your agent has a published version.

Where it goes on your platform

Platform	Where to paste it
Shopify	Online Store → Themes → Edit code → `theme.liquid`, just before `</body>`
WordPress	A header and footer code plugin, in the footer
Squarespace	Pages → Website Tools → Code Injection → Footer. See the Squarespace guide.
Webflow	Site settings → Custom code → Footer code
Wix	Settings → Custom code → Body – end

On anything else, use your site’s template or custom code setting. If you can add a script, Dazza works.

Google Tag Manager

Tag Manager removes attributes like data-agent from script tags in a Custom HTML tag, so the usual line arrives without your key. Use this version instead. It sets the key in window.DazzaSettings, which the chat reads when the attribute isn’t there:

<script>
  window.DazzaSettings = { agent: "dz_…" };
</script>
<script src="https://app.dazza.io/widget.js" async></script>

Settings → Install has it with your key filled in: choose Google Tag Manager above the code. Paste it into a Custom HTML tag, trigger it on All Pages, check it in Preview, then Submit and Publish. Add the chat with Google Tag Manager goes through it step by step.

If your platform only takes a script address

Some site builders and apps ask for a script’s address rather than a line of code. Put your key on the address:

https://app.dazza.io/widget.js?agent=dz_…

The chat looks for your key in this order: data-agent on the script tag, then ?agent= on its address, then window.DazzaSettings. Whichever it finds first is used, so the usual line keeps working as it is.

Check it’s working

Settings → Install shows the site the chat was last seen on, and when. If it says Not seen yet, open your site in a new tab and refresh.

No chat button? Open your browser’s console. “No agent key” means the line lost your key on the way: use the Tag Manager version above, or put the key on the address.

Options

Add any of these to the script tag:

data-position="left"        <!-- left of the screen instead of right -->
data-label="Chat with us"   <!-- text on the button -->
data-open="true"            <!-- open as soon as the page loads -->

With Google Tag Manager, put them in window.DazzaSettings instead:

window.DazzaSettings = { agent: "dz_…", position: "left", label: "Chat with us", open: true };

To open or close the chat from your own buttons:

Dazza.open();
Dazza.close();

What visitors see

While it opens, the panel shows your agent’s name in your colours and a short “Loading…” line, never a blank box. If the chat can’t load, the panel says so and offers Try again.
Typing straight away is fine. Anything typed before the chat has finished loading is kept and sends as normal, on your site, the chat link and in apps.
Escape closes the chat, even while the visitor is typing in it, and puts them back on the chat button. When something inside the chat is open, such as the comment box after a rating, Escape closes that first.
When a message can’t be sent, the chat says why in one line: it was empty, over 2,000 characters, had more than 3 files, or the connection dropped. Try again only appears when trying again can work.

Only on your sites

Under Settings → Install, list the websites your chat may appear on. Once there’s a list, the chat won’t load anywhere else.

Every agent has a hosted chat page at app.dazza.io/w/ followed by its key. Copy it from Settings → Install and share it in emails, social bios or a QR code.

Signed-in customers

If customers sign in to your site, you can pass Dazza a signed token so they count as verified. See Verify your customers.