Setting up and customizing the chat widget

Installing it takes one line. The settings that decide whether visitors like it are the ones about timing, not colour.

The widget is the bubble in the corner of your site and the panel it opens. Getting it onto the page is a single snippet and takes about a minute. What takes longer, and what actually decides whether visitors are glad it is there, is a much smaller set of choices about when it speaks and what it opens with. This guide covers both, in that order, and is honest about which settings are worth your afternoon and which are decoration.

Installing it: one snippet

In your chat's Settings, under the widget section, you will find an embed snippet that looks like this, carrying your own key:

Paste it anywhere in your site's HTML and the bubble appears on every page that HTML serves. On Shopify that means your theme's layout file, which puts it across the whole storefront in one edit. If your site runs through a tag manager, that works too. The script is async, so it does not hold up your page while it loads.

The key in that snippet is public and it is meant to be. It identifies which chat the widget belongs to and nothing else: it is not a secret, it grants no access to your dashboard, and there is nothing to protect by hiding it. Anyone reading your page source will see it, which is fine.

Next to the snippet is a link to a preview page: a blank page with nothing on it but your real widget. Open that on your phone. It is the fastest way to find out that your launcher is sitting under a sticky footer, or that your panel is taller than the screen, without touching your live site to check. Conversations that arrive through the widget show up in your Conversations tab labelled "Site widget", so you can tell them apart from test chats and other channels.

The launcher: the bubble people actually see

The launcher is the floating button. You can change its icon, its shape, its size, its corner radius, and which side of the screen it sits on, along with how far in from that side and how far up from the bottom. Those offsets are the setting people most often need and least often think of: almost every site has something already living in a corner, a cookie bar, a back-to-top arrow, a delivery banner, and the fix is usually one number rather than a redesign.

You can also put a word on the launcher instead of leaving it as a bare icon, and set its size, weight and slant. A launcher that says Help or Chat gets pressed more often than one that shows only a speech bubble, because it removes a small guess. Whether that is worth the extra width is a question about your layout on a phone, which is why the preview page matters.

Then there is movement. The bubble can wobble gently where it sits, and it can lean toward a cursor that comes near. It can cycle through a set of icons between rests, and it can make an entrance when the page loads. All four are on the decoration end of the scale. They are pleasant in small doses and irritating in large ones, and none of them will make a visitor with a question decide differently. Set them once and stop thinking about them.

The panel: what opens when they press it

The panel takes a logo in its header and, if you want, a cover across the top: either a picture, or a short silent looping clip you upload or link to. It draws one cover, so a picture and a video are not both shown, and an uploaded picture wins. With a cover in place you can move the name onto it over a scrim, which is the full hero look. Without one, you get a plain top bar, which is what most shops should use, because the cover eats the vertical space a phone does not have to spare.

You can set the panel width, height and corner radius, choose a font from the built-in set or point at your own by name and address, and pick the animation it opens with. There is a direction setting too, which is worth knowing about if you sell in Hebrew or Arabic: it takes auto, left-to-right or right-to-left, and auto is right almost always.

The settings that actually change outcomes

Everything above is how it looks. This is the part that decides whether visitors engage with it or close it, and it is mostly about timing.

The bubble can offer a one-line invitation to somebody who has been on the page a while: a small message that slides out unprompted. You write the lines yourself and one is chosen per visit. Three numbers control it: how long a visitor lingers before it appears, how long it stays on screen, and how long before the same person may be invited again. That third number is the one to respect. It defaults to a week, and shortening it is the single fastest way to make your site feel like it is nagging. If you want the bubble to stay quiet entirely, leave the list of invitations empty.

The panel can also open on its own after a set time. Think hard before switching that on. Auto-opening is the behaviour visitors complain about most, and it converts worst on mobile, where the panel covers the thing they were reading. If you use it at all, use it on one page where you know the visitor is stuck, not across the site.

You can hide the widget below a screen width, and you can hide it on specific paths using wildcards. Both are more useful than they sound. Checkout is the obvious page to keep it off: a chat bubble over a payment form costs more sales than it saves. Any page with its own support flow is another.

Starter questions are the buttons a visitor sees before they type. You get a generated set by default, and anything you write replaces it outright, in the order you write it. This is the highest-leverage text in the whole widget. Vague starters produce vague conversations; a starter that names a real decision, like asking about sizes or delivery times, produces a conversation that goes somewhere. Write three or four, not ten.

Page rules take that further: you can give particular pages their own starter questions, their own invitation lines, or both. Up to ten rules, each naming up to five paths, matched with the same wildcards. The first rule that matches speaks. A shop running a promotion gives the promo page its own starters and leaves everywhere else alone. This is the feature most owners do not know they have and the one that most reliably improves a widget that already works.

Sound, consent and what you keep

The widget can make a sound when a reply arrives, and you choose which one from a small set or switch it off. There is a consent setting for what a visitor agrees to before chatting, which is your call and possibly your lawyer’s rather than a design decision.

Two smaller switches are worth knowing. A visitor can be offered a copy of the conversation by email, sent to whatever address they gave the chat earlier in the same conversation. It is off unless you ask for it, deliberately: a chat that never intended to send mail on its customers’ behalf should not start because a button appeared. And replies carry a quiet "not right?" mark that files a note in your feedback inbox. That one is on by default and you should leave it on. It is the cheapest source of real corrections you will get, and every note is a customer telling you exactly which answer to fix.

Finally, retention: how long a visitor conversation is kept before it is deleted. The default keeps them indefinitely. Setting a window is worth a minute of thought if you operate somewhere with rules about it, and it is one number.

Saving, and changing your mind

The look is edited as a draft and saved as a version, so the widget on your live site does not change while you are still deciding. Save when you are happy, and if a change turns out to be wrong you can go back to the version that was working rather than trying to remember what the radius used to be.

The order that wastes least time: paste the snippet, open the preview on your phone, fix the offsets so the launcher does not collide with anything, write your starter questions, then leave the invitation timing alone for a week and read what people actually asked. The colours can wait. Nobody has ever left a shop because the bubble was the wrong shade of blue, and plenty have left because a panel opened over the thing they were reading.

Common questions

Where exactly do I paste the snippet on Shopify?

Your theme's layout file, which is the template every page of the storefront is built from. Pasting it there puts the widget on the whole store in one edit. A tag manager works too if that is how your site is set up. You do not need to add it page by page.

Is the key in the snippet a secret?

No. It identifies which chat the widget belongs to and nothing more. It gives no access to your dashboard, your conversations or your settings, and it is visible in your page source by design. There is nothing to protect by hiding it.

Can I keep the widget off certain pages?

Yes, by path, with wildcards, and separately below a screen width. Checkout is the page most shops should exclude: a chat bubble over a payment form interrupts the one moment you do not want interrupted.

Should I turn on auto-open?

Usually not, and especially not site-wide on mobile, where the panel covers what the visitor was reading. If you use it, use it on a single page where you already know people get stuck, and give it a generous delay.

How do I test it without touching my live site?

Use the preview link next to the embed snippet. It is a blank page carrying nothing but your real widget, so opening it on a phone shows you exactly what a visitor gets, including how it behaves at that screen size.

Will changing the look break the widget for visitors mid-change?

No. Edits are a draft until you save them as a version, so the live widget keeps the last saved look while you experiment. If a saved change turns out wrong, you can return to the previous version.