Embedding a Web Chatbot to Webflow

From live chat to full-page bots, this tutorial will show you how to embed your bot on your Webflow website.

In this video, you will learn four different ways to embed your Landbot in Webflow. The first method is to have a live chat or pop-up chat on one of your pages. The pop-up chat will cover most of your screen, while the live chat will cover a small area on the right side of the screen. To embed the pop-up chat, go to Share and copy the pop-up code.

Then, go to Webflow, hover over the page you want to display the bot, select Edit Page Settings, scroll down until you reach the section "Before  tag," and paste the pop-up text. To embed the live chat, go to Webflow, select Project Settings, then the "Custom Code" tab, and paste the code in the Footer Code section.The second method is to have a live chat on all pages of your website. To do this, go to Project Settings in Webflow, select the "Custom Code" tab, and paste the code of the bot in the Footer Code section.

This will display the bot on all pages of your website.The third method is to use the embed style to place the bot wherever you want on a single page. To do this, copy the snippet from the Share section in Landbot, go to the desired page in Webflow, select Add Elements, and pick "EMBED." Paste the code in the space provided, customize the size by changing the snippet style sizes in the code, and move the element to the desired place in the page editor.

The fourth method is to display a full-page bot, meant to cover your whole page.

To do this, create a new blank page in Webflow, go to the Share section in Landbot, select Full page, and copy the script part of the code. Then, go back to Webflow, paste the code in the "Before  tag" section, and publish the page.In summary, this video provides a step-by-step guide to embedding your Landbot in Webflow using four different methods, including pop-up or live chat on one page, live chat on all pages, embed style on a single page, and full-page bot.

0:00 Intro

0:32 Pop-up or Livechat

1:22 Livechat in all the pages of your Website

1:51 Embed style

2:36 Full-page bot

3:11 Recap

Key takeaways

  • Embed a chatbot in Webflow
  • Copy and paste HTML code
  • Embed a chatbot in Webflow
Copy and paste HTML code