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

# Conecta el email (SMTP) en LanderLab

> Envía emails de notificación de leads desde tus landing pages con el SMTP de Gmail y una contraseña de aplicación. Incluye la configuración de destinatarios, los campos de fusión y la solución de problemas.

Cuando un visitante envía un formulario o un lead en una landing page, LanderLab puede enviarte una notificación por email a través de tu propio servidor SMTP. Esta guía conecta una cuenta de Gmail o Google Workspace con una contraseña de aplicación.

<Info>
  Tiempo estimado: unos 10 minutos. Lo haces una sola vez por cada cuenta de envío y después la conectas a cada landing page.
</Info>

## Antes de empezar

<CardGroup cols={2}>
  <Card title="Cuenta de Google preparada" icon="google">
    Una dirección de Gmail o Google Workspace desde la que enviar las notificaciones.
  </Card>

  <Card title="Verificación en dos pasos activada" icon="shield-check">
    Es necesaria para poder crear una contraseña de aplicación.
  </Card>

  <Card title="Acceso a LanderLab" icon="key">
    Permisos de edición en el proyecto de la landing page.
  </Card>

  <Card title="Dirección de destino" icon="inbox">
    La bandeja de entrada que debe recibir las notificaciones de leads.
  </Card>
</CardGroup>

<Warning>
  Usa una contraseña específica de aplicación de tu proveedor de email, no tu contraseña normal de Gmail. Gmail bloquea los inicios de sesión SMTP de terceros que usan la contraseña normal, así que la autenticación fallará.
</Warning>

## Parte 1: genera una contraseña de aplicación de Gmail

<Steps>
  <Step title="Activa la verificación en dos pasos">
    Abre tu [cuenta de Google](https://myaccount.google.com), ve a la pestaña **Seguridad** y activa la **verificación en dos pasos** si todavía no lo está.

    <Note>
      Google exige tener activada la verificación en dos pasos para que aparezca la opción de contraseñas de aplicación.
    </Note>
  </Step>

  <Step title="Abre la página de contraseñas de aplicación">
    Ve a [myaccount.google.com/apppasswords](https://myaccount.google.com/apppasswords).
  </Step>

  <Step title="Crea la contraseña">
    En el campo del nombre de la aplicación, escribe una etiqueta clara para encontrarla después, por ejemplo `Landerlab`. Haz clic en **Crear**.

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/KufV1vuXu4qVF_bK/images/create-app-paswords.png?fit=max&auto=format&n=KufV1vuXu4qVF_bK&q=85&s=8d9554619a0daba9d9b047b00665dbb0" alt="Crear una contraseña de aplicación en la cuenta de Google" width="1858" height="926" data-path="images/create-app-paswords.png" />
    </Frame>
  </Step>

  <Step title="Copia la contraseña de 16 caracteres">
    Google muestra una contraseña de 16 caracteres una sola vez. Cópiala en ese momento y quita los espacios para que se pegue como una cadena continua.

    <Warning>
      Google solo muestra esta contraseña una vez. Si la pierdes, elimina la entrada desde la misma página y crea una nueva.
    </Warning>
  </Step>
</Steps>

## Parte 2: añade la integración de email en LanderLab

<Steps>
  <Step title="Abre el buscador de integraciones">
    Abre el proyecto de la landing page, ve a la zona **Integrations** y haz clic en **Add integration**. En el buscador, escribe `mail`.

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/Bq2uGS7A2TgJq5bV/images/Add-email-accouint.png?fit=max&auto=format&n=Bq2uGS7A2TgJq5bV&q=85&s=83bb01e6c3b33a63e534f582cb81164c" alt="Buscar la integración Email en el panel de integraciones" width="1568" height="779" data-path="images/Add-email-accouint.png" />
    </Frame>
  </Step>

  <Step title="Despliega la opción Email">
    Busca el resultado **Email**, con la etiqueta "Email lead notifications via your SMTP server", y despliégalo.
  </Step>

  <Step title="Rellena el formulario de conexión SMTP">
    Introduce estos valores para Gmail:

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/KufV1vuXu4qVF_bK/images/image-22.png?fit=max&auto=format&n=KufV1vuXu4qVF_bK&q=85&s=a216979141f27c6b418d7f2ee8d07a47" alt="Formulario de conexión SMTP en LanderLab" width="726" height="663" data-path="images/image-22.png" />
    </Frame>

    | Campo      | Valor                                                       |
    | ---------- | ----------------------------------------------------------- |
    | Name       | `Email` o cualquier etiqueta, como `TLS Leads`              |
    | SMTP Host  | `smtp.gmail.com`                                            |
    | Port       | `587`                                                       |
    | Username   | Tu dirección de Gmail completa, por ejemplo `you@gmail.com` |
    | Password   | La contraseña de aplicación de 16 caracteres de la parte 1  |
    | From Email | La dirección desde la que se envía la notificación          |
    | From Name  | El nombre de tu empresa o del remitente                     |
    | Encryption | `STARTTLS`                                                  |

    <Tip>
      Haz coincidir el puerto con el cifrado: el puerto `587` va con `STARTTLS` y el puerto `465` va con `SSL/TLS`. Si los mezclas, por ejemplo 587 con SSL/TLS, la conexión falla.
    </Tip>
  </Step>

  <Step title="Guarda la conexión">
    Haz clic en **Add Email**. La cuenta aparecerá conectada en tu lista de integraciones, con la hora a la que se añadió.

    <Note>
      Para usar más de una cuenta de envío, haz clic en **Add another account** en lugar de sobrescribir la existente.
    </Note>
  </Step>
</Steps>

## Parte 3: conecta el email a la página

Añadir la cuenta SMTP solo guarda las credenciales. Todavía tienes que conectarla a la landing page y elegir quién recibe los leads.

<Steps>
  <Step title="Inicia la conexión">
    En la fila de la integración Email, haz clic en **Connect to page**.
  </Step>

  <Step title="Define los destinatarios">
    Rellena los campos de destinatarios:

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/JjOq-9IyKbvkzy_2/images/preview-1.webp?fit=max&auto=format&n=JjOq-9IyKbvkzy_2&q=85&s=febc90878152b99a954b83b4368fc49d" alt="Campos de destinatarios de la integración Email" width="723" height="594" data-path="images/preview-1.webp" />
    </Frame>

    | Campo            | Notas                                                                                       |
    | ---------------- | ------------------------------------------------------------------------------------------- |
    | Name             | Etiqueta interna para esta conexión                                                         |
    | To (obligatorio) | Adonde se envía la notificación del lead. Pulsa Intro para añadir cada dirección            |
    | Cc               | Direcciones en copia, opcional                                                              |
    | Bcc              | Direcciones en copia oculta, opcional                                                       |
    | Reply-To         | Opcional. La dirección a la que llegan las respuestas, por ejemplo `replies@yourdomain.com` |

    ### Envía el email al lead en lugar de a una dirección fija

    Junto a **To**, **Cc** y **Bcc** verás un botón `{ }`. Te permite elegir un campo del formulario en lugar de escribir una dirección fija, para que cada notificación vaya a la dirección que envió ese visitante.

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/JjOq-9IyKbvkzy_2/images/Group-2147226238.png?fit=max&auto=format&n=JjOq-9IyKbvkzy_2&q=85&s=fbf92b5e9b8642fb14fd5428192e5f6c" alt="El botón   junto al campo To para elegir un campo del formulario" width="738" height="596" data-path="images/Group-2147226238.png" />
    </Frame>

    <Steps>
      <Step title="Haz clic en el botón { }">
        Haz clic en `{ }` junto al campo que quieres rellenar.
      </Step>

      <Step title="Busca el campo">
        Empieza a escribir el nombre del campo, por ejemplo `em`, y selecciona **Email** en la lista.
      </Step>

      <Step title="Guarda el destinatario">
        El campo se añade como destinatario. A partir de ahora, cada lead recibe la notificación en la dirección de email que introdujo en el formulario.
      </Step>
    </Steps>

    <Tip>
      Puedes combinar las dos opciones. Pon tu propia bandeja de entrada en **To** para que tu equipo reciba una copia y añade el campo **Email** en **Cc** para que el lead también reciba la notificación.
    </Tip>

    <Warning>
      El selector `{ }` solo muestra los campos que existen en el formulario. Si no ves **Email**, añade primero un campo de email al formulario y vuelve a abrir este paso.
    </Warning>

    Haz clic en **Continue**.
  </Step>

  <Step title="Define el contenido del email">
    Elige el aspecto de la notificación:

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/KufV1vuXu4qVF_bK/images/image-24.png?fit=max&auto=format&n=KufV1vuXu4qVF_bK&q=85&s=1619289065bd57fb3fe5a523f805419d" alt="Ajustes del contenido del email: asunto, formato del cuerpo y texto de introducción" width="979" height="654" data-path="images/image-24.png" />
    </Frame>

    | Campo                 | Notas                                                              |
    | --------------------- | ------------------------------------------------------------------ |
    | Subject (obligatorio) | El asunto del email, por ejemplo `Nuevo lead de [nombre de la LP]` |
    | Body format           | `Table`, `List` o `Custom HTML`                                    |
    | Intro text            | Una frase corta que se muestra encima de los datos del lead        |

    Haz clic en **Continue**.
  </Step>

  <Step title="(Opcional) Crea un cuerpo HTML personalizado">
    Si seleccionas **Custom HTML**, puedes maquetar el email tú mismo e insertar campos de fusión de LanderLab. Escribe `/` en el editor o usa **Insert field**.

    <Frame>
      <img src="https://mintcdn.com/landerlab-babdc23f/KufV1vuXu4qVF_bK/images/image-25.png?fit=max&auto=format&n=KufV1vuXu4qVF_bK&q=85&s=3c962ed9bfc5176db98e9abda49978c7" alt="Editor de cuerpo Custom HTML con campos de fusión" width="988" height="883" data-path="images/image-25.png" />
    </Frame>

    Campos habituales:

    * `{{LL Lander URL}}`: la landing page de la que viene el lead
    * `{{LL Visitor IP}}`: la dirección IP del visitante
    * `{{LL Visitor User Agent}}`: el navegador y el dispositivo del visitante
    * `{{LL Submission Time UTC}}`: cuándo se envió el lead
    * `{{LL Variant ID}}`: de qué variante de la LP viene el lead

    ```html Custom HTML body theme={null}
    <h2>New lead</h2>
    <p>LL Lander URL: {{LL Lander URL}}</p>
    <p>LL Visitor IP: {{LL Visitor IP}}</p>
    <p>LL Visitor User Agent: {{LL Visitor User Agent}}</p>
    <p>LL Submission Time UTC: {{LL Submission Time UTC}}</p>
    <p>LL Variant ID: {{LL Variant ID}}</p>
    ```

    Haz clic en **Continue** para terminar.
  </Step>
</Steps>

## Parte 4: comprueba que funciona

<Steps>
  <Step title="Envía un lead de prueba">
    Abre la vista previa de la landing page y envía un lead de prueba mediante el formulario.
  </Step>

  <Step title="Confirma la entrega">
    Comprueba que el email de notificación llega a la dirección de **To**. Si no llega en uno o dos minutos, revisa la carpeta de spam.
  </Step>

  <Step title="Revisa el contenido">
    Confirma que el asunto y los campos del cuerpo se muestran como esperas.
  </Step>
</Steps>

<Check>
  Cuando un lead de prueba llegue a tu bandeja de entrada con el asunto y los campos correctos, la integración estará en marcha.
</Check>

## Solución de problemas

<AccordionGroup>
  <Accordion title="La autenticación falla al guardar">
    Se ha usado la contraseña normal de Gmail. Sustitúyela por la contraseña de aplicación de 16 caracteres de la parte 1.
  </Accordion>

  <Accordion title="No puedo crear una contraseña de aplicación">
    La verificación en dos pasos no está activada en la cuenta de Google. Actívala en la pestaña Seguridad y vuelve a intentarlo.
  </Accordion>

  <Accordion title="La conexión agota el tiempo de espera o se rechaza">
    El puerto y el cifrado no coinciden. Usa `587` con `STARTTLS` o `465` con `SSL/TLS`.
  </Accordion>

  <Accordion title="Se rechaza la contraseña de aplicación">
    Han quedado espacios en el valor pegado. Quítalos todos para que tenga exactamente 16 caracteres.
  </Accordion>

  <Accordion title="El lead no ha recibido el email">
    El campo **To** tiene una dirección fija en lugar de un campo del formulario. Abre la conexión, haz clic en `{ }` junto a **To** y selecciona el campo **Email**.
  </Accordion>

  <Accordion title="El campo Email no aparece en el selector { }">
    El formulario no tiene ningún campo de email. Añade uno en el editor, guarda la página, vuelve a abrir la integración y selecciónalo.
  </Accordion>

  <Accordion title="Los emails dejan de enviarse con mucho volumen">
    Gmail estándar tiene un límite de 2.000 mensajes al día. Para volúmenes mayores, usa el relay SMTP de Google Workspace (`smtp-relay.gmail.com`).
  </Accordion>

  <Accordion title="No llega ningún email con un lead real">
    La cuenta se añadió pero nunca se conectó a la página. Sigue la parte 3. Añadir la cuenta y conectarla a la landing page son dos pasos distintos.
  </Accordion>
</AccordionGroup>

## Referencia rápida

```text Ajustes SMTP de Gmail theme={null}
SMTP Host:   smtp.gmail.com
Port:        587
Encryption:  STARTTLS
Username:    full Gmail address
Password:    16-character Gmail app password (no spaces)
App pwd URL: https://myaccount.google.com/apppasswords
```
