Custom launchers

By default the widget shows a floating bubble in the corner on every screen. You do not have to keep it. You can hide the bubble on some devices, hide it everywhere, and open the chat from your own button instead. This is useful when a persistent bubble would fight your own layout, for example a bottom navigation bar on mobile.

Where the bubble appears

Use data-zev-launcher on the loader script to choose which devices show the floating bubble.

index.html

<script
  src="https://widget.zevworkspace.com/v1/loader.js"
  data-zev-key="pk_live_your_brand_embed_key"
  data-zev-launcher="desktop"
  defer
></script>

Value	Bubble shows on	Use it when
default	Every device	You want the standard floating bubble. This is the default.
none	Nowhere	You open the chat from your own button on every device.
desktop	Desktop only	You keep the bubble on desktop and give mobile visitors your own trigger.
mobile	Mobile only	You keep the bubble on phones and use an in-page link on desktop.

Hiding the bubble never disables the chat. The panel still opens from your own trigger, and it is still full-screen on mobile.

Note

The switch happens live. If a visitor resizes their browser across the mobile breakpoint, the bubble appears or disappears to match, with no reload.

Open chat from your own element

Add the data-zev-chat attribute to any element on your page. Clicking it opens the chat. No JavaScript required.

<button data-zev-chat>Chat with support</button>

<a href="#" data-zev-chat>Need help? Talk to us</a>

This works whether or not the bubble is showing, and it works on elements you add later, for example items rendered after the page loads. The click is captured even before the widget has finished loading, so the first tap always opens the panel.

Use your own selector

Prefer a different hook than data-zev-chat? Point data-zev-launcher-selector at any CSS selector. Every element matching it opens the chat on click.

index.html

<script
  src="https://widget.zevworkspace.com/v1/loader.js"
  data-zev-key="pk_live_your_brand_embed_key"
  data-zev-launcher="none"
  data-zev-launcher-selector=".open-support"
  defer
></script>

<button class="open-support">Contact us</button>

Open chat from JavaScript

If you already have a click handler, call the JavaScript API directly:

<button onclick="Zev.open()">Talk to support</button>

Zev.open(), Zev.close(), and Zev.toggle() are safe to call at any time. See the JavaScript API reference for details.

Common recipes

Own button on mobile

Keep the bubble on desktop, hide it on phones, and let your mobile layout open the chat from a support link.

index.html

<script
  src="https://widget.zevworkspace.com/v1/loader.js"
  data-zev-key="pk_live_your_brand_embed_key"
  data-zev-launcher="desktop"
  defer
></script>

<!-- Shown only in your mobile UI -->
<button data-zev-chat class="mobile-only">Chat with us</button>

No bubble anywhere

Drive the launcher yourself on every device.

index.html

<script
  src="https://widget.zevworkspace.com/v1/loader.js"
  data-zev-key="pk_live_your_brand_embed_key"
  data-zev-launcher="none"
  defer
></script>

<button data-zev-chat>Support</button>

From a nav menu

Open chat from an existing link in your navigation.

<a href="#" data-zev-chat>Support</a>

Tip

With data-zev-launcher="none", the widget bundle is not downloaded until a visitor activates one of your launcher elements. Pages that add chat “just in case” cost nothing extra until someone reaches for it.

Next step

Learn the full runtime API in JavaScript API, or attach visitor details with Identifying visitors.