> ## Documentation Index
> Fetch the complete documentation index at: https://docs.toebox.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Chatbot Setup

> Create and deploy a chat widget on your Shopify storefront

The ToeBox chatbot widget lets your customers interact with your AI agent directly on your storefront. Set it up in minutes with no code changes to your Shopify theme.

## Creating a chatbot

<Steps>
  <Step title="Navigate to the Chatbot page">
    Click **Chatbot** in the ToeBox sidebar. Click **Create Chatbot**.
  </Step>

  <Step title="Name your chatbot">
    Give your chatbot a descriptive name (e.g., "Storefront Assistant"). This is for your internal reference and is not shown to customers.
  </Step>

  <Step title="Select an agent">
    Choose which agent powers this chatbot. The agent's model, system prompt, and tools determine how the chatbot responds to customers.

    <Note>You must create an agent before creating a chatbot. Each chatbot is linked to exactly one agent.</Note>
  </Step>

  <Step title="Configure the welcome message">
    Set the message customers see when they first open the chat widget. For example:

    ```
    Hi there! I'm your shopping assistant. How can I help you today?
    ```
  </Step>

  <Step title="Add suggested prompts">
    Suggested prompts appear as clickable buttons when the chat opens. They help customers understand what the agent can do. Good examples:

    * "What's new this week?"
    * "Help me find running shoes"
    * "Track my order"
    * "What's your return policy?"
  </Step>

  <Step title="Save and deploy">
    Click **Save**. The chatbot widget is automatically injected on your Shopify storefront. Visit your store to see it in action.
  </Step>
</Steps>

## Widget appearance

You can customize the widget's look and feel directly from the chatbot configuration page:

* **Primary color** -- The main color used for the chat bubble, headers, and send button
* **Background color** -- The chat window background
* **Text color** -- Message text color
* **Bubble style** -- Rounded, square, or pill-shaped chat bubble
* **Position** -- Bottom-right or bottom-left corner of the page
* **Widget title** -- The name shown in the chat header

<Tip>Use your brand colors to make the widget feel native to your storefront. The widget is designed to blend in with any Shopify theme.</Tip>

## Linking to agents

A chatbot is always powered by a single agent. To change which agent a chatbot uses:

1. Open the chatbot configuration
2. Select a different agent from the dropdown
3. Click **Save**

The change takes effect immediately. Active conversations will continue using the previous agent until the session ends.

## Managing chatbots

* **Edit** -- Click a chatbot card to modify its settings
* **Delete** -- Remove a chatbot and its widget from your storefront
* **Preview** -- Use the test panel to see how the widget looks and responds before going live