How to install your chatbot on any website

Step 1: Copy your embed code

1. Log in at app.botstudio.us and open your bot.
2. Click Integration Code in the left menu.
3. Copy the snippet that fits how you want the bot to appear.

The floating snippet looks like this (yours has your own bot ID):

<script async src="https://app.botstudio.us/w/chat_plugin.js" data-bot-id="12345"></script>

The inline snippet adds a container where the chat appears:

<div id="chat_form"></div>
<script async src="https://app.botstudio.us/w/chat_form_plugin.js" data-bot-id="12345"></script>

WordPress

1. Install a header and footer code plugin, such as WPCode (Insert Headers and Footers).
2. Go to Code Snippets → Header & Footer.
3. Paste your snippet in the Footer box and save.
4. Clear any caching plugin (WP Rocket, LiteSpeed, W3 Total Cache) and reload your site.

For an inline bot on one page, add a Custom HTML block where you want the chat and paste the inline snippet there.

Shopify

1. In Shopify admin, go to Online Store → Themes.
2. On your live theme, click ⋯ → Edit code.
3. Open layout/theme.liquid.
4. Paste the floating snippet just before the closing </body> tag and click Save.

If you change themes later, paste the snippet into the new theme too.

Wix

1. Open your site dashboard and go to Settings → Custom Code (under Advanced).
2. Click + Add Custom Code and paste your snippet.
3. Set it to load on All pages, place it in Body - end, and apply.
4. Publish your site.

Custom code requires a Wix premium plan with a connected domain.

Squarespace

1. Go to Settings → Advanced → Code Injection (on newer dashboards: Website → Pages → Custom code → Code Injection).
2. Paste the snippet into the Footer box and save.

For an inline bot on one page, add a Code block to that page and paste the inline snippet. Code injection requires a Business plan or higher.

GoHighLevel

1. In BotStudio, copy the GoHighLevel snippet from Integration Code. It loads chat_plugin_ghl.js.
2. In GHL, open your funnel or website and go to Settings → Tracking Code.
3. Paste the snippet in the Footer Code box and save.
4. Publish and preview the live page, not the editor.

Webflow

1. Open Site settings → Custom code.
2. Paste the snippet in Footer code and save.
3. Publish the site. Custom code doesn't run in the Designer preview.

For one page only, use Page settings → Custom code → Before </body> tag instead. Custom code needs a paid site plan.

Any other website

Paste the snippet just before the closing </body> tag of your site template, or in your builder's footer or custom scripts area. This works on ClickFunnels, Pinball, Kajabi, Duda, custom HTML sites and almost anything else that allows custom code.

Personalize the bot from your site

Many templates use variables like {{business_name}}, {{booking_link}} and {{phone_number}}. Set them right on the script tag with data-var- attributes:

<script async src="https://app.botstudio.us/w/chat_plugin.js" data-bot-id="12345"
  data-var-business_name="Summit Painting"
  data-var-booking_link="https://calendly.com/summit/estimate"
  data-var-phone_number="(770) 555-0100"></script>

Manage a bot's variables and their defaults under Settings → Variables. Variables can also read a URL parameter, the page URL or the page title.

Mobile and responsive mode

For inline bots, turn on Responsive mode under Settings → General. The chat stays inline on desktop and becomes a bubble on phones, so it never squeezes your page.

Change position, colors, title and welcome message under Widget Style.

Test before you go live

1. Open your live site in a private browser window.
2. Run through every button path once.
3. Submit a test lead with a real email and confirm it lands in your inbox and connected tools.
4. Check your phone too.