---
title: "Embedding Your Chatbots on Your Website"
description: "Embedding a Chatbot directly on your website ensures that guests can complete it without navigating away."
url: "https://help.staticso2.com/ai-front-office-workers/website-assistant/chatbots/embedding-your-chatbots-on-your-website"
---

[Embedding Your Chatbots on Your Website](https://www.youtube-nocookie.com/embed/m-KxRMsp7Eo?wmode=opaque)

Embedding a Chatbot directly on your website ensures that guests can complete it without navigating away. Follow the steps below to integrate your Chatbot into your site easily.

## Embed Your Chatbot on Your Website

[Section titled “Embed Your Chatbot on Your Website”](#embed-your-chatbot-on-your-website)

Use the Embed Designer to match your Chatbot to your websites branding using the steps below:

### Navigating to the Embed Designer

[Section titled “Navigating to the Embed Designer”](#navigating-to-the-embed-designer)

1. Click on **Chatbots** in the left-hand navigation menu.
2. Select the bot you want to embed.
3. Click on the **Embed Designer** tab at the top.

### Choosing the Embed Option

[Section titled “Choosing the Embed Option”](#choosing-the-embed-option)

Choose how your chatbot should load on your website:

* **Widget on load:** The chatbot appears automatically when a page loads.
* **Widget on click:** The chatbot shows in a widget, but only when a link or button is clicked.
* **Lightbox on click:** Opens over the page when a visitor clicks on a link or a button.

### Designing the Bot

[Section titled “Designing the Bot”](#designing-the-bot)

The Embed Designer provides a live preview (WYSIWYG editor), allowing you to see real-time updates of what your bot will look like.

Here are the key customization options available:

* **Theme Color:** Adjusts the overall color design of the bot.
* **Chatbot Icon:** Image displayed at the top of the bot and next to its messages.
* **Company Name:** Name displayed at the top of the bot.
* **Chatbot Name:** Name displayed next to each of the bot’s messages.
* **Launcher shapes and icons:** Adjust what the launcher button looks like.

### Embedding the Code

[Section titled “Embedding the Code”](#embedding-the-code)

1. Click **Get the code** (bottom right) to generate the embed code.
2. Click on **Copy & close** to copy the embed code.
3. Add the code on your website.