secure-lavender•2y 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?

2 Replies
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:
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 Documentationsecure-lavenderOP•2y ago
Wow that worked perfectly. Voiceflow's Tico AI is amazing.