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 goal | What to do |
|---|---|
| Keep chat on the page and stop losing UTM data | Swap window.open(...) for window.Velaro('expand') |
| See which campaign drove a chat, in the Velaro console | Nothing extra, works automatically once the widget stays inline |
| Send a GA event when chat opens | Add your own GA/GTM listener on the button click, separate from the widget call |
| Still want a genuinely separate popped-out window for other reasons | The 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:
- Open your browser's DevTools (right-click the page → Inspect) and switch to the Network tab. Filter for
Visitor. - Load your page with UTM parameters on the URL (or use the simulator on the test page above).
- Look for a
POSTrequest 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 aUtmCodesfield, it will contain the exactutm_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.
Was this article helpful?