Adding chatbot to your website

Last updated: February 12, 2026

Adding ChatLab to your website lets visitors interact with your AI chatbot directly on your site. This guide explains how to get the embed code and add it to your website.

Opening Add to Website

Select your chatbot from the main dashboard, then click the Add to Website tab.

Add to Website tab highlighted

Choosing your platform

The Select Platform panel on the right shows all supported platforms. Click the platform that matches your website to see tailored installation instructions.

Select Platform panel highlighted

Supported platforms:

  • HTML Code -- works with any website where you can edit the HTML
  • WordPress -- via the official ChatLab plugin or manual code insertion
  • Wix -- via Settings > Advanced > Custom Code
  • Webflow -- via Site Settings > Custom Code (requires premium Webflow plan)
  • PrestaShop -- via the ChatLab PrestaShop module or manual code insertion
  • Shopify -- via the theme.liquid file
  • WooCommerce -- via the WordPress plugin or manual code insertion
  • Abicart -- via Store design > Themes > Site header
  • CS-Cart -- via Design > Layouts > Custom HTML code

Each platform shows step-by-step instructions specific to that integration. For platforms with dedicated help articles, a View full instructions link appears at the bottom.

Adding via HTML Code

The HTML Code option works with any website where you have access to the source code. You will see two embed options: Widget and Iframe.

Widget mode

The Widget tab shows the code that adds a chat icon to your website. When visitors click the icon, a chat popup opens.

Widget tab highlighted

  1. Click the Widget tab
  2. Click Copy to clipboard to copy the code
  3. Locate the <head> section of your website
  4. Paste the code as the last element in the <head> section
  5. Refresh your browser to verify the chatbot icon appears

Iframe mode

The Iframe tab shows the code that embeds the chatbot directly into your page content. The chatbot is always visible and can be surrounded by other page elements.

Iframe tab highlighted

  1. Click the Iframe tab
  2. Click Copy to clipboard to copy the code
  3. Paste the code anywhere in your website's HTML where you want the chatbot to appear
  4. Adjust the width and height attributes to fit your layout

Not sure which to choose? Read What is the difference between widget and Iframe? for a detailed comparison.

Adding via WordPress or WooCommerce

WordPress and WooCommerce platforms offer two installation methods: Plugin Installation (recommended) and Manual Installation.

WordPress platform with Plugin Installation tab

Plugin Installation (recommended)

  1. Click Get WordPress Plugin to open the WordPress plugin repository
  2. Install and activate the "ChatLab -- AI Chatbot" plugin
  3. Go to the plugin settings page in WordPress admin
  4. Copy your Bot ID from ChatLab using the Copy button
  5. Paste the Bot ID into the plugin settings and save
  6. Verify the chatbot appears on your website

Manual Installation

Switch to the Manual Installation tab for code-based installation:

  1. Install the "Insert Headers and Footers" plugin in WordPress
  2. Go to Settings > Insert Headers and Footers
  3. Copy the code from ChatLab and paste it into the Header section
  4. Save and refresh your website

For full details, see How to add your chatbot to WordPress website.

Adding via other platforms

For Shopify, Wix, Webflow, PrestaShop, Abicart, and CS-Cart, select the platform in the Select Platform panel. Each platform shows:

  1. The embed code with Widget and Iframe options
  2. Platform-specific, step-by-step paste instructions
  3. A View full instructions link to the full platform guide

Shopify platform with step-by-step instructions

GDPR compliance

If you need your chatbot to load only after cookie consent is granted, see Setting up ChatLab for GDPR compliance for integration guides covering CookieBot, Usercentrics, and Google Tag Manager.