Sending custom variables from the page
I'm using the Voiceflow web widget and need to pass a custom variable (postcode) into the assistant. This variable is collected from the page (via a form input), so it is not available at the time of widget load.
I want to:
1. Load the widget normally when the page loads
2. Collect the postcode after the user submits a form
3. Send that variable to the assistant after launch, without interfering with the session or causing a second unintended launch
I’ve tried sending the variable during chat.load() as prescribed, but since the postcode comes from a user input field, it isn’t available at page load — so that approach doesn’t work.
I also tried sending the variable later using chat.interact({ type: 'intent', payload: { postcode } }), but that only works if the assistant is currently waiting for a last event — otherwise the value is ignored.
Additionally, when interact() does work, calling chat.open() afterward seems to trigger a second launch, resulting in duplicated flows or broken logic.
I’d like to know: what’s the best practice for sending a variable after load and after assistant start, without causing a second launch or missing the variable entirely? Is there a way to keep the session live or defer variable usage until interact() is called, without relying on timeouts?
Thanks!
9 Replies
follow these instructions in the docs: https://docs.voiceflow.com/docs/customization-configuration#pass-custom-variable-values-optional
Voiceflow
Adding custom variables
Send custom variables on web chat load like userID, email, and more.
thanks @W. Williams (SFT) ! I have tried that, but the variables on the page haven't been set until the customer enters them into an input field.
This is the code I have managed to get working which uses a button called "chatbot-link" to open the chat.:
<script>
(function (d, t) {
const v = d.createElement(t),
s = d.getElementsByTagName(t)[0];
v.onload = function () {
window.voiceflow.chat.load({
verify: {projectID: '67aaa6a9361d73c432e58ae5'},
url: 'https://general-runtime.voiceflow.com',
versionID: 'production',
assistant: {
persistence: 'memory',
extensions: [FormExtension],
stylesheet: '/style.css'
}
});
// Signal when ready
document.dispatchEvent(new Event('vf-ready'));
};
v.src = 'https://cdn.voiceflow.com/widget-next/bundle.mjs?v=1.04&t=' + Date.now();
v.type = 'text/javascript';
s.parentNode.insertBefore(v, s);
})(document, 'script');
</script>
<script>
document.addEventListener('vf-ready', () => {
const btn = document.getElementById('chatbot-link');
if (!btn) return;
btn.addEventListener('click', async e => {
e.preventDefault();
const postcode = document.getElementById('postcode')?.value;
const postcodeNum = parseInt(postcode);
if (!postcode postcodeNum < 2000 postcodeNum > 2999) {
return;
}
// Send launch event payload
await window.voiceflow.chat.interact({
type: 'launch',
payload: {postcode}
});
window.voiceflow.chat.open();
});
});
</script>
But it creates 2 launches. Is there another way to do it? Is there any documentation on
hmmm
that is an interesting one
see the launch event is sent with the chat load
based on the page load
Can you just send variables with the interact?
yes
but you would need the userId
which you don't have
You could define it yourself, but that can cause issues.
DM me
Actually, I just DMed you
Hmm. They have to give us their postal code to start the conversation, so I am just trying to avoid asking for it again.
Hate to necro an old thread but having a tough time finding a way to do this too
Did you ever figure this out @Tony ?
@W. Williams (SFT) was very helpful here Hugh. He suggested hiding the widget in a modal and then loading it after.
I finally figured out how to pass variables at any time along with an event.
There is nowhere I could find in the docs that shows you how to do this. Have posted a feature request to add this to the VF docs.
Cheers for your response @Tony