Voiceflow custom events for analytics
Hi! I’m trying to capture custom events from the Voiceflow Web Chat widget in the browser and pass that data later to analytics pipeline.
I can receive the standard voiceflow:interact and voiceflow:save_session events using:
window.addEventListener("message", e => console.log(e.data));
…but it looks like custom traces returned from a Function block (e.g. { type: 'custom', payload: {...} }) are not forwarded to the parent page, so I can’t see them in the browser.
Is there a recommended way to expose custom events to the browser, or a supported method to send small custom payloads (like button_clicked) from Voiceflow to the page outside the chat widget?
Any guidance appreciated!
2 Replies
Custom traces from Function blocks aren’t exposed by default through the Web Chat widget’s postMessage events. To send custom payloads to the parent page, you’ll need to wrap them inside a Custom Step / Custom Add-on or use a Function block to trigger a speak / choice trace with metadata, since those are forwarded through voiceflow:interact.
I’ve implemented this before basically you emit the custom data inside a supported trace type, then listen for it in the parent page. If you want, I can show you the exact pattern to expose custom events like button_clicked to the browser.
@Kaleksy
Thanks for answering! I would appreciate if you could show the pattern you used.