%20(1).png){kind=small}
How to Embed Your Chatbot Video Guide
Learn how to embed your bot into your website covering all different embedding options.
If you're looking to embed your bot into your website, this tutorial is for you. This video walks you through the different embedding options available and explains each one in detail.
First up is Livechat, which adds a chat bubble to the bottom right of your website. Clicking on it displays a Live Chat, and you can even add a proactive message to capture users' attention. You can also improve your website's SEO by checking a box, which delays the bot from loading until the cursor moves for desktop or the screen is touched for mobile.
Next is Fullpage, which displays the bot as a full page on your website for maximum user experience. To add it, simply copy and paste the code onto your website.Moving onto the most common option, Embed, you can customize the widget height and it updates automatically in the code. However, since it's located in an iframe, you need to know exactly where to paste the code on your website.
Lastly, there's the Popup display, which covers most of the visible screen with your bot. You can add a proactive message and improve SEO performance, and embedding it is as easy as copying and pasting the html code into the body section of your website.Overall, this tutorial provides a comprehensive overview of how to embed your bot into your website. Plus, Nik also includes links to specific tutorials for Webflow or Wordpress if you need them.
00:00 Intro
00:30 Livechat
01:18 Fullpage
01:35 Embed
01:55 Popup
02:14 Outro
Hey there! Nik here from the content team. Today we’ll see how to embed your bot into your website. We have specific tutorials on how to do it for Webflow or Wordpress if that’s your case! I’ll leave the links to those videos down in the description.
But today will cover embedding in a more general way, explaining each option available. So, Let’s start. We’re in the builder now. If we go up into the share section, you will see all the display options. Let’s start with the first one, Livechat. This option will add a chat bubble at the bottom right of your website that, when clicked, will display a Live Chat. You’ll see that you will have the option to show a proactive message. This message will help capture the attention of the users and get them to click on the widget.
You can also “Improve SEO performance” by clicking on the checkbox, this will change the code so that the bot won’t load until the cursor moves for desktop or the screen is touched for mobile, improving the SEO of your website.
Once we are done we can copy the html code and paste it inside the body part of your website. It’s that simple. The next option is Fullpage, as its name says, it is meant to be shown as a full page in your website to maximize the experience, the bot will be displayed just like you see it in the Share with a Link mode of your bot. To display it, you would need to copy the code and paste it on your website.
Moving into the embed option, the most common, It gives you more flexibility on the location of the bot as it’s located in an iframe on your website. You can change the widget height to the desired one here and it automatically updates in the code. Since it will be located in a frame, you will need to know exactly where to paste the code on your website.And moving into the last option, the Popup display, you will be able to display a Popup modal, covering most of the visible screen with your bot.
By default, this option launches the bot automatically from the widget.Like in the Livechat, you can show a proactive message and improve the SEO performance. To embed it, you just have to copy the HTML code and paste it into the body section of your website.And that 's it! I will leave all the useful links down in the description. I’m Nik, and I'll see you in the next one!
Key takeaways
- Learn the 4 display options
- Improve SEO performance
- Learn the 4 display options
.png)
Keep learning with us!
%20(1).png)
