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

# Despliega tu widget

> Configura el widget de chat y embedelo en tu sitio web.

# Despliega tu widget de chat IA

Tras crear tu workspace, configura el widget y pega un solo script tag en tu sitio web. El widget aparece como una burbuja flotante de chat en la esquina inferior derecha de cada pagina donde el snippet este cargado.

## Configura tu widget

<Steps>
  <Step title="Abre la pestana Configuration">
    Tu workspace ya incluye un web widget. Desde tu workspace, abre los ajustes del **Web Widget** y ve a la pestana **Configuration**.
  </Step>

  <Step title="Da estilo a tu widget">
    Define la apariencia del widget y donde puede ejecutarse:

    * **Primary Color**: el color de tu marca en hex (p. ej., `#F97316`)
    * **Position**: en que esquina se situa el boton de chat
    * **Bot Avatar**: una imagen opcional que se muestra en el boton y junto a cada respuesta
    * **Allowed Origins**: los dominios donde el widget puede ejecutarse, uno por linea. Soporta comodines (`*.example.com`). Deja vacio para permitir todos.

    Pulsa **Save Changes**.

    <Frame>
      <img src="https://mintcdn.com/bestchatbot/97kdRjnWT0Lew0EI/images/widget-configuration-tab.png?fit=max&auto=format&n=97kdRjnWT0Lew0EI&q=85&s=782574029dc26262fd5239d116caf427" alt="Pestana Configuration del Web Widget con Primary Color, Position, Bot Avatar y Allowed Origins" width="1169" height="1224" data-path="images/widget-configuration-tab.png" />
    </Frame>
  </Step>

  <Step title="Copia el codigo de embed">
    Tras la creacion, abre la pestana **Instalacion** en los ajustes del widget. Veras un script tag como este:

    ```html theme={null}
    <script
      src="https://widget.bestchatbot.io/widget/v1/chat.js"
      data-api-key="rk_live_xxxxxxxxxxxxxxxxxxxx"
      defer
    ></script>
    ```

    <Frame>
      <img src="https://mintcdn.com/bestchatbot/97kdRjnWT0Lew0EI/images/widget-embed-code.png?fit=max&auto=format&n=97kdRjnWT0Lew0EI&q=85&s=b128684febdd3a80643d4193072aae6d" alt="Pestana Instalacion mostrando el codigo de embed con un boton de copiar" width="1177" height="1214" data-path="images/widget-embed-code.png" />
    </Frame>
  </Step>

  <Step title="Pegalo en tu sitio web">
    Anade el script tag justo antes de la etiqueta `</body>` en cada pagina donde quieras que aparezca el widget.

    ```html theme={null}
    <body>
      <!-- Contenido de tu web -->

      <script
        src="https://widget.bestchatbot.io/widget/v1/chat.js"
        data-api-key="rk_live_xxxxxxxxxxxxxxxxxxxx"
        defer
      ></script>
    </body>
    ```
  </Step>

  <Step title="Verifica que funciona">
    Abre tu sitio en un navegador. Deberias ver una burbuja de chat en la esquina inferior derecha. Pulsa para abrir la ventana y prueba una pregunta.

    <Frame>
      <img src="https://mintcdn.com/bestchatbot/f1dLrYEbIflhrKGl/images/widget-chat-open.png?fit=max&auto=format&n=f1dLrYEbIflhrKGl&q=85&s=e063b8cd604be75b95392e920985cb34" alt="Widget de chat abierto en un sitio web" width="515" height="804" data-path="images/widget-chat-open.png" />
    </Frame>
  </Step>
</Steps>

## Multiples widgets

Cada workspace ejecuta un widget. Para gestionar varios sitios o marcas, crea un workspace por widget. Cada workspace tiene su propia base de conocimiento, configuracion y tracking de uso.

<Tip>Cambia entre workspaces con el selector en la parte superior del dashboard.</Tip>

## Proximo paso

<Card title="Guia del Web Widget" icon="window-maximize" href="/es/integrations/web-widget">
  Guia completa: colores personalizados, origenes permitidos, API programatica, troubleshooting y mas.
</Card>
