Unleash Your Site's Potential: Seamless Chatbot Integration with Webflow

Unleash your website's potential with seamless chatbot integration in Webflow. Discover two methods to effortlessly add a CVB chatbot - iframe embed and web chat widget. Optimize your site's engagement and customer experience.

15 giugno 2025

party-gif

Discover how to seamlessly integrate a powerful chatbot into your Webflow website, empowering your visitors with instant assistance and enhanced user experience. This step-by-step guide covers two effective methods - direct page embedding and web chat widget integration - ensuring your website stays ahead of the curve in the ever-evolving world of conversational AI.

Embed Your Chatbot Directly on Your Webflow Site

To embed your chatbot directly on your Webflow site, follow these steps:

  1. Go to your chatbot's documentation and copy the provided iframe embed code.
  2. In Webflow, add a new section and container element where you want the chatbot to be placed.
  3. Drag and drop a "Code Embed" element into the container.
  4. Paste the iframe embed code you copied earlier into the "Code Embed" element.
  5. Replace the "your publish flow link" placeholder with the actual publish flow link for your chatbot.
  6. (Optional) Adjust the height of the chatbot by double-clicking the "Code Embed" element and updating the height value.
  7. Add some padding or margin to the chatbot element to position it as desired.
  8. Publish your Webflow site, and the chatbot will now be embedded directly on the page.

To prevent the display of previous conversations when the page is refreshed, add LC=0 at the end of the iframe embed code.

Utilize the Webflow Web Chat Widget

To add the Webflow Web Chat widget to your website, follow these steps:

  1. In your CVB account, go to the "Web Chats" section and click "Add" to create a new web chat.
  2. Name the web chat and configure the welcome message.
  3. Add the authorized website domain where you want to use the web chat.
  4. Copy the web chat code provided.
  5. In your Webflow site settings, navigate to the "Custom Code" section and paste the web chat code into the "Footer Code" area.
  6. To prevent previous conversations from showing on page reload, add the following code after the "color" property: , loadMessages: false.
  7. Publish your Webflow site, and the web chat widget will be available on your website.

When a user clicks on the web chat widget, a fresh chat session will be initiated, and the default reply will be displayed based on your CVB settings.

Conclusion

The video provides a comprehensive guide on how to set up a CVB chatbot on a Webflow website. It covers two methods: direct page embed and web chat widget.

For the direct page embed, the key steps are:

  1. Copy the iframe code from the CVB documentation.
  2. Paste the code into a container element on the Webflow page.
  3. Replace the "your publish flow link" placeholder with the actual link from the CVB account.
  4. Adjust the height and padding of the chatbot element as needed.
  5. Publish the Webflow site.

For the web chat widget, the steps are:

  1. Create a new web chat in the CVB dashboard and configure the settings.
  2. Copy the web chat code from the CVB dashboard.
  3. Paste the code into the footer code section of the Webflow site settings.
  4. Add the load_messages: false parameter to the code to prevent displaying previous conversations.
  5. Publish the Webflow site.

Both methods provide a seamless integration of the CVB chatbot on the Webflow website, allowing users to interact with the chatbot directly on the page.

FAQ