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:

chatbot website embed

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.

Embed chatbot website: second step

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):

chatbot website embed step 3

I’ve embedded my chatbot in the second “Heading” column. I paste the code and refresh the page. It now looks like this:

chatbot website embed

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:

Chatbot website embed: Third step

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.

Comments


Vittorio Banfi

Co-founder and CEO botsociety.io

Related Posts

Tutorials

Chatterbot design in 5 easy steps

Once upon a time, you could only find chatterbots in science fiction shows like Star Trek. Now, artificial intelligence is at anyone’s fingertips. It’s no secret: humans love to talk! And they love interfaces that Read more…

Tutorials

How to complete an Alexa Design

First introduced via the launch of the Echo in 2015, Alexa has been hugely successful for Amazon. So much so that the company has expanded Alexa’s reach into a range of Amazon home smart devices, Read more…

Tutorials

How to design a Facebook webview

In this tutorial, we are going to design a Facebook webview using Botsociety and Sketch App. A Messenger webview allows your users to visualize a website inside the Facebook Messenger experience without getting out of Read more…