Docs/Go live

Add the chatbot to your website

Paste one line of code, with guides for WordPress, Shopify, Wix, Squarespace and custom sites.

Putting your chatbot on your website takes one line of code. You copy it from the dashboard and paste it into your site once; after that, every change you make in Liyobot, from the greeting to the colour to new knowledge, shows up automatically. You never need to paste the code again.

Before you start
Make sure your chatbot’s allowed domain matches the website you’re adding it to. The widget refuses to load anywhere else.

Get your embed code#

In the dashboardChatbots›Your chatbot›Go live›Embed code

Open your chatbot and go to Embed code. You’ll see a single line labelled Embed on any website, with a Copy button. You can also copy it straight from the chatbots list using the Copy embed code action on any row.

The code looks like this:

HTML
<script src="https://api.liyobot.com/static/widget.js" data-bot-id="YOUR_BOT_ID"></script>
Copy your own code
The example above uses the placeholder YOUR_BOT_ID and won’t work as is. Always copy the code from your dashboard: it contains your chatbot’s own Bot ID, a 16-character code that tells the widget which chatbot to load.

Where to paste it#

Paste the line just before the closing </body> tag of your website’s HTML, so it loads on every page. Most website builders don’t show you raw HTML; instead they have a setting for adding code to the footer or the end of the body on all pages. That’s the right place.

If you only want the chatbot on some pages, add the code to just those pages instead.

Platform guides#

The steps below are general guidance. Website builders change their menus from time to time, so the exact names may differ on your account. Some builders also only allow custom code on paid plans. If you get stuck, search your builder’s help centre for “add custom code” or “code injection”.

WordPress

Use the official Liyobot – AI Chat Widget plugin. It adds the widget to every page of your site with no code or theme editing.

  1. In your WordPress admin, go to Plugins › Add New Plugin, search for Liyobot, then click Install Now and Activate.
  2. Click Liyobot in the WordPress admin menu (just below Settings).
  3. Paste your whole embed code into the embed code field. The plugin picks out your Bot ID and shows ✓ Detected Bot ID.
  4. Tick Display the chat widget on my website and click Save.
Widget not showing on WordPress?
Make sure your WordPress site’s domain is set as the chatbot’s allowed domain, the display box is ticked, and clear any caching plugin. Developers can hide the widget on specific pages with the liyobot_should_display filter.

Prefer not to use a plugin? Paste the embed code just before </body> in your theme’s footer, or use any plugin that adds code to your site’s footer.

Shopify

  1. In your Shopify admin, go to Online Store › Themes.
  2. Next to your live theme, open the actions menu and choose Edit code.
  3. Open theme.liquid (under Layout), find </body> near the bottom, and paste your embed code on the line just above it.
  4. Click Save.

Wix

  1. In your site dashboard, go to Settings › Custom code.
  2. Add new custom code, paste your embed code, and choose to load it on all pages.
  3. Set the placement to Body - end, then apply.

Wix only allows custom code on a premium plan with a connected domain.

Squarespace

  1. Go to Settings › Advanced › Code Injection.
  2. Paste your embed code into the Footer box.
  3. Click Save.

Code injection is only available on Squarespace plans that support it.

Webflow and other builders

Webflow and most other builders have a site-wide custom code setting, usually in the site or project settings, with a box for code that goes before </body> (sometimes called the footer). Paste your embed code there, save, and publish your site. Remember that many builders only apply custom code after you publish.

Custom HTML sites

If you or your developer edit HTML files directly, paste the code just above </body> on every page, or once in the shared footer template if your site uses one. Then upload or deploy the changes as usual.

Confirm it worked#

  1. Open your live website

    Visit your site in a new browser tab. A chat launcher should appear in the bottom corner (bottom right, unless you changed the position in Appearance).

  2. Ask a question

    Open the chat and ask something your content covers, to check the bot answers from your knowledge.

  3. Check the Get started checklist

    On your Dashboard, step 4 of Get started, Put it on your site, ticks automatically once Liyobot sees the widget load on your site.

Nothing showing? Work through Test and troubleshoot.

Good to know#

  • Safe to include twice. If the code ends up on a page more than once, for example in both a plugin and your theme, you still get one widget.
  • It won’t clash with your design. The widget is isolated from your site’s styles, so your site’s fonts and colours don’t change how the chat looks.
  • No JavaScript API. There’s no way to open or close the widget from your own code; visitors open it with the launcher.
  • One code, every setting. Appearance, greeting, knowledge and the accessibility toolbar all come through the same line, so there’s nothing extra to install.

Still stuck? Email [email protected] and a person will help.