Getting Started
Web Chat
There are three ways to add a chatbot to a website, a direct link, an chatbot widget, or an embedded iFrame. In this section we'll cover what to add and where in your website, including websites hosted on Wordpress and Wix. A unique BotID is part of a unique URL that is required for Botsheets to know where it will send and receive messages. You can access these code snippets for your chatbot in the Botsheets dashboard under the Publish Bot section.
Direct Link
Share a direct link to a full-screen conversational experience. Just share the link, or link it to a help or contact page.
https://chat.botsheets.com/chat/Your_Bot_ID
Chat Widget
This is probably the most common way to integrate a chatbot. It puts an icon in the bottom right corner of your screen. Drop this snippet of code just below the body tag. When you click the icon, it opens a chat window. You can customize the look and feel of the icon and chat window in Bot Settings - Branding
<body>
<script src="https://chat.botsheets.com/chat.js"
data-chatbot-id="Your_Bot_ID" defer></script>
Embed Chat
To embed the chat in the middle of a page, place this snippet anywhere after the opening body tag but before the closing body tag.
<body>
Your Webpage Content
<iframe src="https://chat.botsheets.com/chat/Your_Bot_ID" frameborder="0"
width="100%" height="100%"></iframe>
More Webpage Content
</body>
Customize iFrame Embed with CSS
Add this CSS styling snippet to make the iFrame embed responsive:
<style>
.responsive-iframe-container {
padding-top: 20px;
padding-bottom: 20px;
position: relative;
height: calc(100vh - 40px);
width: 100%;
}
.responsive-iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<body>
Your Webpage Content
<div class="responsive-iframe-container">
<iframe src="https://chat.botsheets.com/chat/Your_Bot_ID" frameborder="0"></iframe>
</div>
More Webpage Content
</body>
Publishing Platforms
In many cases, you can access your HTML and plug in Botsheets. However, if you're using a web CMS such as Wordpress or Wix, you'll want to follow these instructions.
Wordpress
For a Wordpress website, there are a few different ways to add Botsheets:
-
If you want to add a chat widget into the bottom right corner, you can either edit your Wordpress theme’s functions.php file, or we recommend our this plugin. which makes it easy for you to add code snippets in WordPress without having to edit your theme file. If you add the plugin, from your left navigation, choose Code Snippets, and then choose Header & Footer and then scroll down and paste your Botsheets code into the Body section.
-
If you want to edit the theme file directly without using a plugin, locate the functions.php file in the main directory of your theme folder: wp-content - themes - yourtheme. You can also locate the file directly from the WordPress Theme File Editor. In your WordPress dashboard, go to Appearance - Theme File Editor. You’ll be taken to the Edit Themes page. From here, under the dropdown next to Select theme to edit, choose your theme and click Select. You’ll see a list of files available to edit under the Theme Files column at the far right of your screen. Click functions.php to open the file. Add the Botsheets code just below the opening body tag and then click the Update File button.
-
If you want to embed a Botsheets chatbot in the middle of your page, we recommend this short Youtube Video on how to do that.
Wix
If you're using Wix to host a website, follow these steps to add Botsheets to it:
- Go to Settings in your site's dashboard.
- Click the Custom Code tab in the Advanced section.
- Click + Add Custom Code at the top right.
- Paste the code snippet in the text box.
- Enter a name for your code.
Tip: Give it a name that is easy to recognize so you can quickly identify it later. - Select an option under Add Code to Pages:
- All pages: This adds the code to all of your site's pages, including any new pages that you create in the future. Choose whether to load the code only once per visit, or on each page your visitor opens.
- Choose specific pages: Use the drop-down menu to select the relevant pages.
- Choose where to place your code under Place Code in:
- Head
- Body - start
Our code goes here - Body - end
- Click Apply.