secure-lavender
secure-lavender2y ago

Chatbot integration on mobile website

Hi everyone. I just put my Voiceflow chatbot on a website using the webchat integration code provided by Voiceflow. It looks fantastic on the desktop. But when I visit the website on a mobile device and open the chatbot, the virtual keyboard automatically pops up and completely covers the welcome message as shown in the attached screenshot. Does anyone know a way to prevent that from happening?
No description
2 Replies
Tico | Voiceflow Assistant
To prevent the virtual keyboard from covering the welcome message on a mobile device, you can modify the web chat integration code slightly. The function that opens the chatbot is window.voiceflow.chat.open(). You can add a delay to allow the chatbot to render properly before it opens. Here's what the modified code should look like:
(function(d, t) {
var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
v.onload = function() {
window.voiceflow.chat.load({
verify: { projectID: 'xxxxxxxxxxxxxxxxxxxxx' },
url: 'https://general-runtime.voiceflow.com/',
versionID: 'production'
}).then(() => {
setTimeout(function() {
window.voiceflow.chat.open();
}, 1000);
});
}
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: 'xxxxxxxxxxxxxxxxxxxxx' },
url: 'https://general-runtime.voiceflow.com/',
versionID: 'production'
}).then(() => {
setTimeout(function() {
window.voiceflow.chat.open();
}, 1000);
});
}
v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
})(document, 'script');
This code snippet loads the chatbot and then opens it after a delay of 1000 milliseconds (1 second). This delay should allow the chatbot to render properly on the page before it opens, which may prevent the virtual keyboard from covering the welcome message. You can read about other functions that the webchat can do here: Voiceflow Developer Documentation
secure-lavender
secure-lavenderOP2y ago
Wow that worked perfectly. Voiceflow's Tico AI is amazing.

Did you find this page helpful?