> ## 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">
    Abre el archivo HTML de tu sitio y pega el snippet antes de `</body>`.
  </Tab>

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

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

  <Tab title="Shopify">
    1. Ve a **Tienda Online → Temas → Editar código**.
    2. Abre el archivo `theme.liquid`.
    3. Pega el snippet antes de `</body>`.
    4. Guarda los cambios.
  </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>