foreign-sapphire•2y ago
Embedding the widget into a mobile app
Hey guys, what would be the best practises to embed the widget into a mobile app? Via an iFrame? or maybe there is some in house solution for this?
3 Replies
To embed the Voiceflow chat widget into a mobile app, you can use the Web Chat integration provided by Voiceflow. This integration allows you to customize the appearance of UI elements, specify between development and production versions of your design, pass data upon launch, and programmatically show and hide the widget.
To implement this, you need to use the code snippet provided on the Web Chat integration page in the Creator Tool. This code can be inserted into your mobile app's web view. Please note that this method requires some knowledge of web development as you'll be dealing with JavaScript and potentially HTML/CSS.
As for using an iFrame, it's technically possible but not recommended due to potential security and performance issues. It's always better to use the provided APIs and integration tools when available.
Remember to set general settings like chat persistence and customize the appearance of the chat widget on the Web Chat integration page. Also, ensure that you save a Production Version of your assistant before attempting to run it in your Web Chat.
For more detailed instructions, you can refer to the Voiceflow documentation here and here.
genetic-orange•16mo ago
Hi, I'm also having difficulty customizing the Voiceflow Chat Widget for mobile devices. The widget works perfectly on desktop, but I'm struggling with a few issues on mobile:
Problems: The chat bubbles do not utilize the full width available on mobile devices.
The timestamp appears next to the chat bubbles, taking up extra space. The font size of the chatbot title does not seem to be adjustable.
Attempted Solutions:
Adjusting CSS rules (e.g., setting display: none for the timestamp and adjusting the chat bubbles' width). Using the allowDangerousHTML and customCSS options within the widget configuration.
Question:
Is there a way to hide the timestamp in the chat bubbles, make the chat bubbles utilize the full width on mobile devices, and adjust the font size of the chatbot title? If so, could you please provide specific instructions or examples on how this can be achieved?
rare-sapphire•15mo ago
Hi im having the exact same issue its so annoying did you figure this out?