> ## 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.

# Conectar o e-mail (SMTP) no LanderLab

> Envie e-mails de notificação de leads das suas landing pages usando o SMTP do Gmail e uma senha de app. Inclui a configuração de destinatários, os campos dinâmicos e a solução de problemas.

Quando um visitante envia um formulário ou lead em uma landing page, o LanderLab pode enviar uma notificação por e-mail para você pelo seu próprio servidor SMTP. Este guia conecta uma conta do Gmail ou do Google Workspace usando uma senha de app.

<Info>
  Tempo estimado: cerca de 10 minutos. Você faz isso uma vez por conta de envio e depois a conecta a cada landing page.
</Info>

## Antes de começar

<CardGroup cols={2}>
  <Card title="Conta do Google pronta" icon="google">
    Um endereço do Gmail ou do Google Workspace para enviar as notificações.
  </Card>

  <Card title="Verificação em duas etapas ativada" icon="shield-check">
    Necessária para poder criar uma senha de app.
  </Card>

  <Card title="Acesso ao LanderLab" icon="key">
    Acesso de edição ao projeto da landing page.
  </Card>

  <Card title="Endereço do destinatário" icon="inbox">
    A caixa de entrada que deve receber as notificações de leads.
  </Card>
</CardGroup>

<Warning>
  Use uma senha específica de app do seu provedor de e-mail, e não a sua senha normal de login do Gmail. O Gmail bloqueia logins SMTP de terceiros que usam a sua senha normal, então a autenticação falhará.
</Warning>

## Parte 1: Gerar uma senha de app do Gmail

<Steps>
  <Step title="Ative a verificação em duas etapas">
    Abra a sua [Conta do Google](https://myaccount.google.com), acesse a aba **Security** e ative a **2-Step Verification** (verificação em duas etapas), caso ainda não esteja ativa.

    <Note>
      O Google exige que a verificação em duas etapas esteja ativada para que a opção de senha de app fique disponível.
    </Note>
  </Step>

  <Step title="Abra a página de senhas de app">
    Acesse [myaccount.google.com/apppasswords](https://myaccount.google.com/apppasswords).
  </Step>

  <Step title="Crie a senha">
    No campo **App name**, digite um nome claro para encontrá-la depois, por exemplo `Landerlab`. Clique em **Create**.

    <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="Criar senhas de app" width="1858" height="926" data-path="images/create-app-paswords.png" />
    </Frame>
  </Step>

  <Step title="Copie a senha de 16 caracteres">
    O Google mostra uma senha de 16 caracteres uma única vez. Copie-a agora e remova os espaços para que ela seja colada como uma sequência contínua.

    <Warning>
      O Google só exibe essa senha uma vez. Se você a perder, exclua a entrada na mesma página e crie uma nova.
    </Warning>
  </Step>
</Steps>

## Parte 2: Adicionar a integração de e-mail no LanderLab

<Steps>
  <Step title="Abra o navegador de integrações">
    Abra o projeto da LP, acesse a área **Integrations** e clique em **Add integration**. Na caixa de pesquisa, digite `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="Adicionar conta de e-mail" width="1568" height="779" data-path="images/Add-email-accouint.png" />
    </Frame>
  </Step>

  <Step title="Expanda a opção Email">
    Encontre o resultado **Email**, com a descrição "Email lead notifications via your SMTP server", e expanda-o.
  </Step>

  <Step title="Preencha o formulário de conexão SMTP">
    Informe estes valores para o 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="Imagem" width="726" height="663" data-path="images/image-22.png" />
    </Frame>

    | Campo      | Valor                                                         |
    | ---------- | ------------------------------------------------------------- |
    | Name       | `Email` ou qualquer nome, como `TLS Leads`                    |
    | SMTP Host  | `smtp.gmail.com`                                              |
    | Port       | `587`                                                         |
    | Username   | O seu endereço completo do Gmail, por exemplo `you@gmail.com` |
    | Password   | A senha de app de 16 caracteres da Parte 1                    |
    | From Email | O endereço do qual a notificação é enviada                    |
    | From Name  | O nome da sua empresa ou do remetente                         |
    | Encryption | `STARTTLS`                                                    |

    <Tip>
      Combine a porta com a criptografia: a porta `587` funciona com `STARTTLS`, e a porta `465` funciona com `SSL/TLS`. Misturá-las, como usar 587 com SSL/TLS, faz a conexão falhar.
    </Tip>
  </Step>

  <Step title="Salve a conexão">
    Clique em **Add Email**. A conta agora aparece na sua lista de integrações como conectada, com a data e a hora em que foi adicionada.

    <Note>
      Para usar mais de uma conta de envio, clique em **Add another account** em vez de substituir a conta existente.
    </Note>
  </Step>
</Steps>

## Parte 3: Conectar o e-mail à página

Adicionar a conta SMTP apenas armazena as credenciais. Você ainda precisa conectá-la à landing page e escolher quem recebe os leads.

<Steps>
  <Step title="Inicie a conexão">
    Na linha da integração Email, clique em **Connect to page**.
  </Step>

  <Step title="Defina os destinatários">
    Preencha os campos de destinatário:

    <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="Prévia 1" width="723" height="594" data-path="images/preview-1.webp" />
    </Frame>

    | Campo            | Observações                                                                             |
    | ---------------- | --------------------------------------------------------------------------------------- |
    | Name             | Nome interno desta conexão                                                              |
    | To (obrigatório) | Para onde a notificação do lead é enviada. Pressione Enter para adicionar cada endereço |
    | Cc               | Endereços opcionais para cópia                                                          |
    | Bcc              | Endereços opcionais para cópia oculta                                                   |
    | Reply-To         | Opcional. O endereço para o qual as respostas vão, por exemplo `replies@yourdomain.com` |

    ### Enviar o e-mail para o lead em vez de um endereço fixo

    Ao lado de **To**, **Cc** e **Bcc**, você verá um botão `{ }`. Ele permite escolher um campo do formulário em vez de digitar um endereço fixo, para que cada notificação vá para o endereço que o visitante informou.

    <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="Group 2147226238" width="738" height="596" data-path="images/Group-2147226238.png" />
    </Frame>

    <Steps>
      <Step title="Clique no botão { }">
        Clique em `{ }` ao lado do campo que você quer preencher.
      </Step>

      <Step title="Pesquise o campo">
        Comece a digitar o nome do campo, por exemplo `em`, e selecione **Email** na lista.
      </Step>

      <Step title="Salve o destinatário">
        O campo é adicionado como destinatário. Agora, cada lead recebe a notificação no endereço de e-mail que informou no formulário.
      </Step>
    </Steps>

    <Tip>
      Você pode combinar as duas opções. Coloque a sua própria caixa de entrada em **To** para que a sua equipe receba uma cópia e adicione o campo **Email** em **Cc** para que o lead também seja notificado.
    </Tip>

    <Warning>
      O seletor `{ }` só lista os campos que existem no formulário. Se você não estiver vendo **Email**, adicione primeiro um campo de e-mail ao formulário e depois abra este passo novamente.
    </Warning>

    Clique em **Continue**.
  </Step>

  <Step title="Defina o conteúdo do e-mail">
    Escolha como a notificação será:

    <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="Imagem" width="979" height="654" data-path="images/image-24.png" />
    </Frame>

    | Campo                 | Observações                                                         |
    | --------------------- | ------------------------------------------------------------------- |
    | Subject (obrigatório) | A linha de assunto do e-mail, por exemplo `New lead from [LP name]` |
    | Body format           | `Table`, `List` ou `Custom HTML`                                    |
    | Intro text            | Uma linha curta exibida acima dos dados do lead                     |

    Clique em **Continue**.
  </Step>

  <Step title="(Opcional) Monte um corpo em HTML personalizado">
    Se você selecionar **Custom HTML**, poderá montar o layout do e-mail e inserir campos dinâmicos (merge fields) do LanderLab. Digite `/` no editor ou use **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="Imagem" width="988" height="883" data-path="images/image-25.png" />
    </Frame>

    Campos comuns:

    * `{{LL Lander URL}}`: a landing page de onde o lead veio
    * `{{LL Visitor IP}}`: o endereço IP do visitante
    * `{{LL Visitor User Agent}}`: o navegador e o dispositivo do visitante
    * `{{LL Submission Time UTC}}`: quando o lead foi enviado
    * `{{LL Variant ID}}`: de qual variante da LP o lead veio

    ```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>
    ```

    Clique em **Continue** para concluir.
  </Step>
</Steps>

## Parte 4: Verificar se está funcionando

<Steps>
  <Step title="Envie um lead de teste">
    Abra a prévia da LP e envie um lead de teste pelo formulário.
  </Step>

  <Step title="Confirme a entrega">
    Verifique se o e-mail de notificação chega ao endereço em **To**. Se ele não chegar em um ou dois minutos, confira a pasta de spam.
  </Step>

  <Step title="Confira o conteúdo">
    Confirme se a linha de assunto e os campos do corpo aparecem como esperado.
  </Step>
</Steps>

<Check>
  Quando um lead de teste chegar à sua caixa de entrada com o assunto e os campos corretos, a integração estará funcionando.
</Check>

## Solução de problemas

<AccordionGroup>
  <Accordion title="A autenticação falhou ao salvar">
    Foi usada a senha normal do Gmail. Substitua-a pela senha de app de 16 caracteres da Parte 1.
  </Accordion>

  <Accordion title="Não é possível criar uma senha de app">
    A verificação em duas etapas não está ativada na conta do Google. Ative-a na aba Security e tente novamente.
  </Accordion>

  <Accordion title="A conexão expira ou é recusada">
    A porta e a criptografia não correspondem. Use `587` com `STARTTLS` ou `465` com `SSL/TLS`.
  </Accordion>

  <Accordion title="A senha de app foi rejeitada">
    Ficaram espaços no valor colado. Remova todos os espaços para que ela tenha exatamente 16 caracteres.
  </Accordion>

  <Accordion title="O lead não recebeu o e-mail">
    O campo **To** contém um endereço fixo em vez de um campo do formulário. Abra a conexão, clique em `{ }` ao lado de **To** e selecione o campo **Email**.
  </Accordion>

  <Accordion title="O campo Email não aparece no seletor { }">
    O formulário não tem um campo de e-mail. Adicione um no editor, salve a página e depois abra a integração novamente e selecione-o.
  </Accordion>

  <Accordion title="Os e-mails param de ser enviados em grandes volumes">
    O Gmail padrão tem um limite de 2.000 mensagens por dia. Para volumes maiores, use o SMTP relay do Google Workspace (`smtp-relay.gmail.com`).
  </Accordion>

  <Accordion title="Nenhum e-mail depois de um lead real">
    A conta foi adicionada, mas nunca foi conectada à página. Siga a Parte 3. Adicionar a conta e conectá-la à LP são dois passos separados.
  </Accordion>
</AccordionGroup>

## Referência rápida

```text Gmail SMTP settings 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
```