So you are building a chatbot, and you would like to show it off on your landing page or website. How do you do that? In this tutorial, we are going to see how to integrate your chatbot mockup in your website. It only takes 3 minutes and you will have your chatbot website ready!
Don’t feel like reading? This tutorial is also available in video format
Design your chatbot
First of all, you need to sketch out your chatbot interaction. You can do that on Botsociety, it’s free! You can sign up here. You can check out our blog post about designing a Facebook Messenger mockup if you are not sure how to do that.
For the sake of this tutorial, I’ve created an Acme chatbot. The Acme bot is an e-commerce chatbot, that allows Wilie E. Coyote to purchase stuff. I would like to embed this design on my website!
Inside Botsociety, I can click on the top right corner, on the “Share” button:
Now I can choose how to share my design. The last option is “embed”. I can choose the size of my embed. I’ll leave medium as it makes sense for the moment. I then click “Copy” to grab the code needed for the embed.
Now that I have my embed code, I need to change the code of my website and insert it.
Chatbot website: Embed in your HTML website
This step may change depending on how your website is built. If you have a WordPress website, scroll down. If you are a pure HTML website – or similar – you just need to paste the code into your page. Everything will just work. For this tutorial, I’m using Visual Studio Code to open my HTML file. I then paste the code I copied from the previous step where I want the chatbot to appear on my website.
This is my example website (from here):
I’ve embedded my chatbot in the second “Heading” column. I paste the code and refresh the page. It now looks like this:
Cool right? The chatbot preview is animated, meaning my visitors will have a very precise idea of my chatbot!
Chatbot website: Embed on your WordPress website
If you have a WordPress powered website the process is very similar. Once you have copied the code on Botsociety, switch to WordPress. Now, if you create or edit a new post (or a new page), you will see something like below. You should switch to “Text” as per image below:
Now that you switched to text mode you can paste the embed code where you prefer. If you now Save your post, the embed will be shown on your WordPress website.
Thanks for reading! You can sign up for Botsociety here. If you would like to add an embed to your website, but you are not sure how, please add a comment below!
Also published on Medium.