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

# External Voice Chatbot

> Allow end users to create, train, and embed voice chatbots directly onto their websites using Elevenlabs models with Davinci AI.

<Warning>This is a **Paid** extension that you need to first purchase via **Marketplace**</Warning>

## Introduction

Elevate User Engagement with **Customizable Voice Chatbots** Enable your clients to design, personalize, and deploy tailored external Voice Chatbots that align with their unique business needs. These sophisticated chatbots can be effortlessly integrated into websites, delivering a seamless and professional user experience. Fully customizable, these chatbots enhance customer interaction by facilitating real-time engagement, providing instant responses to queries, offering personalized recommendations, and optimizing the visitor journey.

## Key Features and Benefits:

* **Brand Alignment**: Clients can customize chatbot aesthetics, including colors, logos, and avatars, to ensure a consistent brand identity and a polished website presence.
* **Unlimited Creation**: Users can develop multiple chatbots tailored to distinct website sections or specific business goals, with no restrictions on quantity.
* **Adaptive Training**: Chatbots can be continuously trained to evolve with changing user demands, maintaining relevance and effectiveness.
* **Personalized Greetings**: Craft unique welcome messages to create an engaging and inviting experience for website visitors.
* **Insightful**: Access detailed chat histories to analyze user interactions, and refine customer engagement strategies.

<Card title="Included Features">
  - Set Voice Chatbot Name
  - Set Chatbot Title
  - Set Chatbot Instructions
  - Custom Fallback Message
  - Custom Greetings Message
  - Custom Trigger Bubble Message
  - Select Custom AI Avatars
  - Set Widget Position
  - Customize Header BG Color
  - Customize Header Text Color
  - Customize AI Box BG Color
  - Customize AI Box Text Color
  - Customize User Box BG Color
  - Customize User Box Text Color
  - Single Page URL training
  - PDF files training
  - Excel/CSV files training
  - Text input training
  - Q\&A input training
  - More will be added soon...
</Card>

<Card title="Supported LLM Models">
  * Elevenlabs
</Card>

## Extension Configuration

<Steps>
  <Step title="Step 1">
    Go to the **Marketplace** in **Admin Panel** and install **External Voice Chatbot** extension after successfully purchasing it first.

    <img src="https://mintcdn.com/magicads/yrCresVat1CLM6R8/images/extensions/voice-chatbot/v-1.png?fit=max&auto=format&n=yrCresVat1CLM6R8&q=85&s=d2d4e7b0e8be0716810df4050e8c48f9" width="610" height="412" data-path="images/extensions/voice-chatbot/v-1.png" />
  </Step>

  <Step title="Step 2">
    After installation is completed, go to **AI Settings** page in Admin Panel and click on **Extensions** tab there. Click on **AI Voice Chatbot** there.

    <img src="https://mintcdn.com/magicads/yrCresVat1CLM6R8/images/extensions/voice-chatbot/v-2.png?fit=max&auto=format&n=yrCresVat1CLM6R8&q=85&s=5878cb45444094ca4816188be6ea7564" width="793" height="162" data-path="images/extensions/voice-chatbot/v-2.png" />
  </Step>

  <Step title="Step 3">
    To control the settings of **AI Voice Chatbot** exension, return to **AI Settings** page in Admin Panel and click on the **Extensions** tab, and select **AI Voice Chatbot** extension.

    1. Turn on the checkboxes for **AI Voice Chatbot Feature** and **AI Voice Chatbot Free Tier Access**
       <Note>If you don't turn on AI Voice Chatbot Free Tier Access, then users who did not subscribe to any subscription plan where you have External Chatbot feature enabled, will not have any access to this feature</Note>
    2. Set **Number of Allowed Voice Chatbots** that users can create.
    3. Include your **Elevenlabs API key**.
    4. After you are done with configuration, click on the **Save** button.

    <img src="https://mintcdn.com/magicads/yrCresVat1CLM6R8/images/extensions/voice-chatbot/v-3.png?fit=max&auto=format&n=yrCresVat1CLM6R8&q=85&s=af2492100915d0257494a03923638eba" width="1146" height="798" data-path="images/extensions/voice-chatbot/v-3.png" />
  </Step>

  <Step title="Step 4">
    <Check>
      Congratulations! You now have completed the Voice Chatbot extension configuration. Proceed to the section below on how to use it.
    </Check>
  </Step>
</Steps>

## How to Use

Using External AI Voice Chatbot extension is very easy and straightforward. It gives you full flexibility on customizing your external chatbot to match the styles of the taget website where it will be running.

1. Go to **AI Voice Chatbots** in User panel.
2. First thing you will see there is the **General Statistics** information.

<img src="https://mintcdn.com/magicads/IBtucosPyb4q0zfk/images/extensions/voice-chatbot/v-4.png?fit=max&auto=format&n=IBtucosPyb4q0zfk&q=85&s=b5fb2ae03d37613efa34d06b71c2f38a" width="2017" height="411" data-path="images/extensions/voice-chatbot/v-4.png" />

3. Down below you will see **Create New Voice Chatbot** and **View Conversation History** buttons.

<img src="https://mintcdn.com/magicads/IBtucosPyb4q0zfk/images/extensions/voice-chatbot/v-5.png?fit=max&auto=format&n=IBtucosPyb4q0zfk&q=85&s=bd8fbcaa0e2a67aa7515c837fc1ece46" width="2008" height="288" data-path="images/extensions/voice-chatbot/v-5.png" />

4. And finally you will see all the chatbots that you have created. You can create up to the allowed amount, but you can always delete older ones to create new or subscribe to a plan with higher number of allowed external chatbots.

<img src="https://mintcdn.com/magicads/IBtucosPyb4q0zfk/images/extensions/voice-chatbot/v-6.png?fit=max&auto=format&n=IBtucosPyb4q0zfk&q=85&s=0a3884a75fd100dd19159f011cffd289" width="1369" height="462" data-path="images/extensions/voice-chatbot/v-6.png" />

## Create Chatbot

To create your chatbot click on the **Create New Voice Chatbot** button.

### Step 1. Configure Chatbot

Under the first configure step, you can configure everything related to the text, instructions, and other settings. Below is the explanation of all feature. You also have live preview for each step on the right side.

<img src="https://mintcdn.com/magicads/IBtucosPyb4q0zfk/images/extensions/voice-chatbot/v-7.png?fit=max&auto=format&n=IBtucosPyb4q0zfk&q=85&s=dcd727fce0a309a166bab5988d46cf6d" width="1144" height="1339" data-path="images/extensions/voice-chatbot/v-7.png" />

### Step 2. Customize Chatbot

Under the second step, you can fully customize the styling of the chatbot and adjust it as needed.

<img src="https://mintcdn.com/magicads/IBtucosPyb4q0zfk/images/extensions/voice-chatbot/v-8.png?fit=max&auto=format&n=IBtucosPyb4q0zfk&q=85&s=aa9e100b5753c0433bc9de8f14f08ae6" width="568" height="1419" data-path="images/extensions/voice-chatbot/v-8.png" />

Once you are done with customizing the styles, click on **Next** button.
<Warning>It is after Customization step, the chatbot is actually created. You can skip the Training section if no training is planned.</Warning>

### Step 3. Training - Add a knowledge Base

You have 4 options to train the chatbot:

* URL
* PDF files
* Text inputs
* Q\&A inputs

<img src="https://mintcdn.com/magicads/IBtucosPyb4q0zfk/images/extensions/voice-chatbot/v-9.png?fit=max&auto=format&n=IBtucosPyb4q0zfk&q=85&s=83ff56a2ecfe26681287604e17b7cb7f" width="1396" height="948" data-path="images/extensions/voice-chatbot/v-9.png" />

### Step 4. Embed and integrate

After you are done with creating and training your chatbot, to embed the chatbot into your website, you can use the provided code snippet.

<img src="https://mintcdn.com/magicads/yrCresVat1CLM6R8/images/extensions/voice-chatbot/v-10.png?fit=max&auto=format&n=yrCresVat1CLM6R8&q=85&s=ae27c852718babfcfbb798a49b53e92b" width="1114" height="1084" data-path="images/extensions/voice-chatbot/v-10.png" />

Include it in right before the `<body>` in your target website and you will automatically see the chatbot available on your website.

## Voice Chatbot Look

Once you have embedded your newly created Voice Chatbot, it will appear in the side of the scrip that you selected during chatbot creation.

<img src="https://mintcdn.com/magicads/yrCresVat1CLM6R8/images/extensions/voice-chatbot/v-11.png?fit=max&auto=format&n=yrCresVat1CLM6R8&q=85&s=b97debf5d73cbb658ec08b92f4122946" width="305" height="114" data-path="images/extensions/voice-chatbot/v-11.png" />

And after clicking on the call button, it will start the window and you can speak with the Voice Chatbot agent directly.

<img src="https://mintcdn.com/magicads/yrCresVat1CLM6R8/images/extensions/voice-chatbot/v-12.png?fit=max&auto=format&n=yrCresVat1CLM6R8&q=85&s=5b0c81a66cb02693b1859c90b36439fd" width="332" height="473" data-path="images/extensions/voice-chatbot/v-12.png" />

<Check>
  Congratulations! You have completed the chatbot creation and training.
</Check>