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

# Instalar el widget en tu sitio web

> Cómo agregar el chatbot de ChatNorris a tu sitio web con un snippet de código.

# Instalar el widget en tu sitio web

El widget de ChatNorris es un botón flotante que aparece en tu sitio web y permite a tus visitantes chatear con el bot directamente, sin salir de la página.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/chatnorris/images/PLACEHOLDER-widget-preview.png" alt="TODO: captura del widget flotante funcionando en un sitio web de ejemplo" />
</Frame>

## Obtener el código de instalación

<Steps>
  <Step title="Ve al detalle del chatbot">
    En el menú lateral, haz clic en **Chatbots** y luego en el chatbot que quieres instalar.
  </Step>

  <Step title="Asegúrate de que el chatbot esté publicado">
    El widget solo funciona con chatbots en estado **Publicado**. Si está en Borrador, haz clic en **Publicar** primero.
  </Step>

  <Step title="Copia el snippet de instalación">
    En la página del chatbot, encontrarás el snippet HTML. Cópialo con el botón correspondiente.

    <Frame>
      <img src="https://mintlify.s3.us-west-1.amazonaws.com/chatnorris/images/PLACEHOLDER-snippet-instalacion.png" alt="TODO: captura del snippet de instalación con el botón de copiar" />
    </Frame>
  </Step>
</Steps>

## Pegar el código en tu sitio

El snippet es una etiqueta `<script>` que debes pegar en el HTML de tu sitio web, **antes del cierre de la etiqueta `</body>`**:

```html theme={null}
<!-- Al final de tu HTML, antes de </body> -->
<script src="https://chatnorris.ai/widget.js" data-chatbot-id="tu-chatbot-id"></script>
</body>
```

<Tabs>
  <Tab title="HTML estático">
    Abrí el archivo HTML de tu sitio y pegá el snippet antes de `</body>`.
  </Tab>

  <Tab title="WordPress">
    1. Instalá el plugin **Insert Headers and Footers** (o similar).
    2. Ve a **Configuración → Insert Headers and Footers**.
    3. Pegá el snippet en la sección **Scripts en el Footer**.
    4. Guardá los cambios.
  </Tab>

  <Tab title="Webflow">
    1. Ve a **Configuración del Proyecto → Código personalizado**.
    2. Pegá el snippet en el campo **Footer Code**.
    3. Publicá el sitio.
  </Tab>

  <Tab title="Shopify">
    1. Ve a **Tienda Online → Temas → Editar código**.
    2. Abrí el archivo `theme.liquid`.
    3. Pegá el snippet antes de `</body>`.
    4. Guardá los cambios.
  </Tab>

  <Tab title="Wix">
    1. En el editor de Wix, hacé clic en **Configuración** → **Código personalizado**.
    2. Hacé clic en **+ Agregar código personalizado** (en la pestaña **Head** o **Body**).
    3. Pegá el snippet y seleccioná que se cargue en el **Body — final**.
    4. Elegí si aplica a **Todas las páginas** o a páginas específicas.
    5. Guardá y publicá el sitio.

    <Note>
      La opción de código personalizado requiere el plan Wix Business o superior.
    </Note>
  </Tab>

  <Tab title="Squarespace">
    1. En el panel de Squarespace, ve a **Configuración** → **Avanzado** → **Inyección de código**.
    2. Pegá el snippet en el campo **Footer**.
    3. Guardá los cambios.

    <Note>
      La inyección de código está disponible en los planes Business y Commerce de Squarespace.
    </Note>
  </Tab>

  <Tab title="Google Tag Manager">
    1. En GTM, creá una nueva **etiqueta (Tag)** de tipo **HTML personalizado**.
    2. Pegá el snippet en el campo de HTML.
    3. Como **Activador (Trigger)**, seleccioná **All Pages** (Todas las páginas).
    4. Guardá la etiqueta y **publicá** el contenedor de GTM.
  </Tab>
</Tabs>

## Configurar la captura de leads (Lead Form)

Puedes pedirle al visitante su nombre y datos de contacto antes de iniciar el chat. Para activarlo:

1. Ve al detalle del chatbot.
2. En la sección de configuración del widget, activa la opción **Capturar leads antes del chat**.

Cuando está activo, el widget muestra un formulario con campos de nombre, email y teléfono antes de que el visitante pueda escribir. Los datos quedan registrados automáticamente en la sección **Leads**.

<Note>
  El lead form es opcional. Si está desactivado, el visitante puede chatear sin dar sus datos.
</Note>

## Preguntas frecuentes

<AccordionGroup>
  <Accordion title="¿El widget funciona en móviles?">
    Sí, el widget está diseñado para funcionar en dispositivos móviles y de escritorio.
  </Accordion>

  <Accordion title="¿Puedo instalar el widget en más de un sitio?">
    Sí. El mismo snippet puede usarse en múltiples sitios. El chatbot responderá igual en todos.
  </Accordion>

  <Accordion title="¿El widget afecta la velocidad de mi sitio?">
    El script se carga de forma asíncrona y no bloquea la carga de tu página.
  </Accordion>

  <Accordion title="¿Puedo personalizar el aspecto del widget?">
    Consulta la configuración del chatbot para las opciones de personalización disponibles.
  </Accordion>
</AccordionGroup>