foreign-sapphire•2y ago
Web embedding problem!!
Hello, i am trying to apply the code to embed my chatbot, and it works, but i have to scroll down to see new messages. Is there a way to solve this? The code used:
<!DOCTYPE html>
<html>
<body>
</body>
<script type="text/javascript">
(function(d, t) {
var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
v.onload = function() {
window.voiceflow.chat.load({
verify: { projectID: '65e63d4f5671df3be500e680' },
url: 'https://general-runtime.voiceflow.com',
versionID: 'production',
/**
* [optional] Embed webchat within a section of your page
*/
render: {
mode: 'embedded',
target: document.body,
},
autostart: false
});
}
v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
})(document, 'script');
</script>
</html>
2 Replies
The issue you're experiencing might be due to the fact that you're embedding the chat widget directly into the body of your HTML document. This could cause the chat widget to take up the entire height of the page, leading to the need to scroll down to see new messages.
To fix this, you can try embedding the chat widget into a specific div element instead of the body. This way, you can control the size of the chat widget and prevent the need to scroll down. Here's an example of how you can do this:
In this example, I've created a div with the id "chat-widget" and set its height and width to 500px and 300px respectively. Then, in the
window.voiceflow.chat.load function, I've set the target to document.getElementById('chat-widget') to embed the chat widget into this div. You can adjust the height and width values to suit your needs.foreign-sapphireOP•2y ago
This AI service IS amazing, i am so grateful.