foreign-sapphire•2y ago

How do I make my chatbot part of a page section on a website?

At the moment I can only make the chatbot bottom right & then it pops up when clicked on (default). I would like to make it part of a page section on a website. Appreciate any help or ideas 👀

7 Replies

Tico | Voiceflow Assistant•2y ago

To make your chatbot part of a page section on your website instead of the default bottom-right pop-up, you can customize the Web Chat's integration by embedding it within a specific section of your page. Here's how you can achieve this: - Use the chat.load() function in the Web Chat agent's integration page, specifying your project ID, runtime URL, and version ID. - To embed the Webchat within a specific section of your page, you must add settings to the webchat installation code that indicate the HTML element ID the embedded webchat should attach to. - It's crucial to specify the HTML element ID for the embedded webchat. If not specified, the widget will search for an element with the ID voiceflow-chat-frame. If no such element is found, the widget will revert to the default overlay mode. This approach allows you to integrate the chatbot more seamlessly into your website's design, offering a more integrated user experience. For more detailed instructions and examples, you can visit our documentation on embedding and customizing styling.

xenial-black•2y ago

Check this out: https://youtu.be/r0UX-Jln1PY?si=BxisN3bNie7x4S5E

W. Williams (SFT)•2y ago

Or this one for the code: https://discord.com/channels/1079548823610871889/1174397802718175292

foreign-sapphireOP•2y ago

I managed to get it on my page - but how do I make it bigger???

W. Williams (SFT)•2y ago

Did you use this method: https://developer.voiceflow.com/docs/embed-customize-styling

/**
* [optional] Embed webchat within a section of your page
*/


window.voiceflow.chat.load({
  verify: {
    projectID: "<ID>"
  },
  url: "https://general-runtime.voiceflow.com",
  versionID: "production",
  render: {
        mode: 'embedded',
        target: document.getElementById('flat-chat'),
    },
    autostart: false
});

/**
* [optional] Embed webchat within a section of your page
*/


window.voiceflow.chat.load({
  verify: {
    projectID: "<ID>"
  },
  url: "https://general-runtime.voiceflow.com",
  versionID: "production",
  render: {
        mode: 'embedded',
        target: document.getElementById('flat-chat'),
    },
    autostart: false
});

Here is a video: https://www.youtube.com/watch?v=2gy-0HURFI0

foreign-sapphireOP•2y ago

Still not working - genuinley stuck

W. Williams (SFT)•2y ago

Can you share a url so we can have a look?

How do I make my chatbot part of a page section on a website?

Did you find this page helpful?