How can we help you?

Opening Chat Inline Instead of a New Window (v10)

If your site uses a custom button that calls window.open() to launch chat in a new browser window, any UTM parameters (utm_source, utm_medium, utm_campaign, etc.) on your page are lost. A new browser window is a separate context with its own blank URL, it has no way to see the page your visitor was actually on.

Example of the pattern that loses UTM data:

<a onclick="window.open('https://app.velaro.com/chat?siteId=YOUR_SITE_ID&groupId=YOUR_GROUP_ID', '', 'height=350,width=400')">
  Live Chat
</a>

The solution: open the already-embedded widget inline

If the Velaro widget is already embedded on your page (the standard embed snippet), you do not need window.open() at all. Call the widget's public expand command instead:

<a onclick="window.Velaro('expand')">
  Live Chat
</a>

Same button, same styling, same placement, only the onclick changes. Because chat now opens inline on the same page instead of a new window, any UTM parameters already on the page are automatically read by the widget and attached to the conversation, no extra code required.

Where the UTM data goes

Once the widget is opened inline (or even if a visitor just lands on a UTM-tagged page and the widget's default launcher is used, this also works with no code changes at all):

  • Console visibility (always on, no setup): every engagement has a dedicated "UTM Codes" panel in the visitor info sidebar while chatting, and in the transcript afterward. This is populated automatically from the page's utm_* query parameters at the moment the widget loads.
  • Google Analytics (optional, separate step): the change above does not by itself send anything to GA. If you also want the chat-open click to register as a GA event, add a small script on your own page listening for the click on your button and firing your own gtag/GTM event. This is independent of the change above, it is just normal GA event tracking on a button you already control.

Options summary

Your goalWhat to do
Keep chat on the page and stop losing UTM dataSwap window.open(...) for window.Velaro('expand')
See which campaign drove a chat, in the Velaro consoleNothing extra, works automatically once the widget stays inline
Send a GA event when chat opensAdd your own GA/GTM listener on the button click, separate from the widget call
Still want a genuinely separate popped-out window for other reasonsThe PopoutButtonEnabled setting (Chat Designer) creates a menu item inside an already-open chat that detaches it into a new window, this is a different feature than the launch button covered above. Note this path still cannot carry the parent page's UTM data since it is a real window.open() under the hood.

Testing this yourself

A live, interactive comparison tool is available at https://v20.velaro.com/inline-chat-utm-test.html. Enter your site ID (and group ID if applicable) and it loads your actual widget, then shows both the window.open button and the inline window.Velaro('expand') version side by side, with a UTM simulator and live UTM display, plus the exact diff to apply to your own button.

Verifying UTM capture yourself, without needing console access

There is currently no public JS command that hands UTM values back to your own page, so the most direct way to confirm capture is watching the actual network request your browser makes:

  1. Open your browser's DevTools (right-click the page → Inspect) and switch to the Network tab. Filter for Visitor.
  2. Load your page with UTM parameters on the URL (or use the simulator on the test page above).
  3. Look for a POST request ending in /Visitor, this fires the moment the widget loads, independent of whether a chat button has been clicked yet. Open its request payload and look for a UtmCodes field, it will contain the exact utm_source/utm_medium/etc. values read from the page.

That same payload is what later populates the "UTM Codes" panel in the console once a conversation starts, so this is a way to confirm capture is working correctly from your own site before ever starting a test conversation.

Related articles

  • Hiding the default chat launcher, including mobile-only and by-page targeting: see "Hiding the Default Chat Launcher by Page or on Mobile Only (v10)".
  • Setting up CSP with a nonce for the Velaro widget: see the CSP nonce setup article for v10.
Share: Email

Was this article helpful?