How can we help you?

Hiding the Default Chat Launcher by Page or on Mobile Only

Every site gets a floating chat launcher bubble by default. If you've built your own "Chat with us" button and don't want both showing at once, the widget has a built-in option to hide the default one, no CSS needed.

Velaro('boot', { siteId: YOUR_SITE_ID, groupId: YOUR_GROUP_ID, disableLauncher: true });

This is a supported boot option, not a workaround. It cleanly hides the default floating launcher without touching anything else, your own button and window.Velaro('expand') keep working exactly the same. One important behavior: if a visitor already has a chat in progress, the default launcher still shows even with disableLauncher: true set, that's intentional so nobody loses access to an active conversation mid-chat.

Avoid the CSS approach. Something like .velaro-container-body { display: none !important; } looks like it works, but !important overrides the widget's own internal logic for showing itself, so even a legitimate expand() call can get stuck unable to reopen the chat box. disableLauncher: true doesn't have that fragility.

Hiding it only on mobile

disableLauncher is read once, at the moment your embed script boots, so it accepts any JavaScript expression, not just a fixed true/false. To hide the launcher only on small screens:

disableLauncher: window.matchMedia('(max-width: 768px)').matches

This is evaluated once at page load, not continuously, if a visitor resizes their browser window or rotates a tablet after the page has already loaded, it won't re-check. For a normal page load on a phone versus a desktop browser, that's not something to worry about.

Hiding it only on specific pages

v10 doesn't have a built-in page-rule engine for this (v20 / Messenger does, see the linked article below), so page targeting is a plain JavaScript condition around the same option:

disableLauncher: /\/checkout|\/cart/.test(location.pathname)

Any check against location.pathname, location.href, or a list of paths works, since it's just a boolean expression evaluated before boot() runs.

Combining both

Velaro('boot', {
    siteId: YOUR_SITE_ID,
    groupId: YOUR_GROUP_ID,
    disableLauncher: window.matchMedia('(max-width: 768px)').matches && /\/checkout/.test(location.pathname)
});

A note on CSP nonces

If your site uses a Content-Security-Policy with a per-request nonce on your script tags, keep that nonce attribute exactly as your CMS/tag manager generates it (for example <script nonce="{{gtmNonce}}">). It has nothing to do with the launcher option above, but it's required for the boot script itself to be allowed to run under your policy. See the CSP setup article linked below if you're configuring this for the first time.

Related articles

  • On v20 / Messenger instead of v10? The same behavior is available as a no-code toggle in Chat Designer, with a page-rule editor and a device-target dropdown (all devices / mobile only / desktop only), no script editing required. See "Hiding the Default Chat Launcher by Page or Device (Messenger / v20)".
  • Passing UTM parameters into an inline chat button uses this same embed snippet as its starting point, see "Opening Chat Inline Instead of a New Window (v10)".
  • Setting up CSP with a nonce for the Velaro widget: see the CSP nonce setup article for v10.

Testing this yourself

Check your browser's DevTools Console for any script errors after updating your embed code, before assuming a change took effect. A single stray or missing bracket in the boot() call breaks the entire script tag, and the widget won't boot at all, not just fail to hide the launcher. If you're not sure your edited snippet is valid, paste it into any online JavaScript syntax checker first.

Share: Email

Was this article helpful?