How can we help you?

Zero-Code Migration for Custom Chat Buttons

Some sites have a custom "LIVE CHAT" button, built long before the embedded widget existed, that opens chat in a separate popup window:

<a class="btn" onclick="window.open('https://app.velaro.com/chat?siteId=12345', '', 'height=350,width=400')">
  LIVE CHAT
</a>

That popup window starts a completely blank browser context — it has no idea what page the visitor was on, so UTM campaign data, referrer, and any custom page context are lost the instant the popup opens.

Normally, fixing this means manually editing the button to call window.Velaro('expand') instead. That's a safe, one-line change — but it does require someone to go find the button code and edit it.

The zero-code alternative

If you'd rather not touch the button at all, add one attribute to your Velaro embed script tag:

<script>
  Velaro('boot', { siteId: 12345, groupId: 0 });
</script>
<script src="..." data-intercept-legacy-chat-links="true"></script>

With this attribute present, the widget transparently detects when your own page code calls window.open() targeting a Velaro chat popup URL, cancels the popup, and opens the embedded widget inline instead — automatically carrying forward the page's UTM parameters and referrer. Your existing button, its styling, and its click handler are completely untouched.

This also recognizes the older Velaro v10 popup URL pattern (app.velaro.com/chat?siteId=...), so a site that has since migrated to the current platform but never got around to updating an old popup button still gets the automatic upgrade — no code archaeology required.

What it does NOT do

  • It's strictly opt-in — without the attribute, nothing changes and window.open() behaves exactly as it always has.
  • It only intercepts calls that target a real Velaro chat URL. Any other use of window.open() on your page (a help article, a print dialog, an unrelated popup) passes through untouched.

When to use this vs. editing the button directly

Editing the button (window.Velaro('expand')) is still the clearest, most explicit approach if you're comfortable making the change. The data-intercept-legacy-chat-links attribute is for cases where the button code is hard to find, owned by a different team, or you'd simply rather not touch it — you get the same UTM-preserving, inline-widget behavior either way.

Share: Email

Was this article helpful?