equal-aqua•15mo ago

react chat popup

in the react chat is there a function or way to trigger the chat to popup even though the user doesnt press the round plugin button

4 Replies

Tico | Voiceflow Assistant•15mo ago

To automatically open the Voiceflow Web Chat widget in a React application without the user pressing the round plugin button, you can modify the code snippet to include a function that opens the chat after it loads. Here’s an example of how you can achieve this:

(function(d, t) {
    var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
    v.onload = function() {
        window.voiceflow.chat.load({
            verify: { projectID: 'your_project_id' },
            url: 'https://general-runtime.voiceflow.com/',
            versionID: 'production'
        }).then(() => {
            setTimeout(function() {
                window.voiceflow.chat.open();
            }, 1000); // Adjust the delay as needed
        });
    }
    v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; 
    v.type = "text/javascript"; 
    s.parentNode.insertBefore(v, s);
})(document, 'script');

(function(d, t) {
    var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
    v.onload = function() {
        window.voiceflow.chat.load({
            verify: { projectID: 'your_project_id' },
            url: 'https://general-runtime.voiceflow.com/',
            versionID: 'production'
        }).then(() => {
            setTimeout(function() {
                window.voiceflow.chat.open();
            }, 1000); // Adjust the delay as needed
        });
    }
    v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; 
    v.type = "text/javascript"; 
    s.parentNode.insertBefore(v, s);
})(document, 'script');

In this code: - The window.voiceflow.chat.load function loads the chat widget. - The setTimeout function ensures the chat widget opens automatically after a 1-second delay. You can adjust the delay as needed. For more details on customizing the Web Chat widget, you can refer to the Voiceflow Web Chat API documentation.

W. Williams (SFT)•15mo ago

why are you using the react chat? and not the reg integration code?

equal-aquaOP•15mo ago

@W. Williams (SFT) implementing live handoff through react chat

W. Williams (SFT)•15mo ago

You can do that with an extension and not have to run your own react app.

react chat popup

Did you find this page helpful?