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:

Load the widget normally when the page loads
Collect the postcode after the user submits a form
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!

W. Williams (SFT)•5/27/25, 12:31 PM

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.

TonyOP•5/28/25, 9:57 PM

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 > 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

W. Williams (SFT)•5/28/25, 9:58 PM

hmmm

W. Williams (SFT)•5/28/25, 9:58 PM

that is an interesting one

W. Williams (SFT)•5/28/25, 9:59 PM

see the launch event is sent with the chat load

W. Williams (SFT)•5/28/25, 9:59 PM

based on the page load

TonyOP•5/28/25, 9:59 PM

Can you just send variables with the interact?

W. Williams (SFT)•5/28/25, 9:59 PM

yes

W. Williams (SFT)•5/28/25, 9:59 PM

but you would need the userId

W. Williams (SFT)•5/28/25, 9:59 PM

which you don't have

W. Williams (SFT)•5/28/25, 10:00 PM

You could define it yourself, but that can cause issues.

W. Williams (SFT)•5/28/25, 10:00 PM

DM me

W. Williams (SFT)•5/28/25, 10:00 PM

Actually, I just DMed you

TonyOP•5/28/25, 10:01 PM

Hmm. They have to give us their postal code to start the conversation, so I am just trying to avoid asking for it again.

Hugh Fungus•11/18/25, 9:43 PM

Hate to necro an old thread but having a tough time finding a way to do this too

Hugh Fungus•11/18/25, 9:47 PM

Did you ever figure this out @Tony ?

TonyOP•11/21/25, 3:23 AM

@W. Williams (SFT) was very helpful here Hugh. He suggested hiding the widget in a modal and then loading it after.

TTony @W. Williams (SFT) was very helpful here Hugh. He suggested hiding the widget in...

Hugh Fungus•11/21/25, 8:53 AM

I finally figured out how to pass variables at any time along with an event.

// Send a variable with an event via Voiceflow widget
window.voiceflow.chat.interact({
    type: 'event',
    payload: {
        event: {
            name: 'my_test_event', // Event name you define in Voiceflow
            page_url: window.location.href
        }
    }
});

// Equivalent in Voiceglow widget
window.VG_ADMIN.interact({
    type: "event",
    payload: { 
        event: { 
            name: "my_test_event", // Event name you define in Voiceflow
            page_url: window.location.href
        } 
    }
});

// Send a variable with an event via Voiceflow widget
window.voiceflow.chat.interact({
    type: 'event',
    payload: {
        event: {
            name: 'my_test_event', // Event name you define in Voiceflow
            page_url: window.location.href
        }
    }
});

// Equivalent in Voiceglow widget
window.VG_ADMIN.interact({
    type: "event",
    payload: { 
        event: { 
            name: "my_test_event", // Event name you define in Voiceflow
            page_url: window.location.href
        } 
    }
});

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

// Send a variable with an event via Voiceflow widget window.voiceflow.chat.interact({ type: 'event', payload: { event: { name: 'my_test_event', // Event name you define in Voiceflow page_url: window.location.href } } }); // Equivalent in Voiceglow widget window.VG_ADMIN.interact({ type: "event", payload: { event: { name: "my_test_event", // Event name you define in Voiceflow page_url: window.location.href } } });