Pular para o conteúdo principal

EmailJS

Por Arthur Tosi

📝 O que é o EmailJS?​

EmailJS é um serviço que permite o envio de emails diretamente do front-end, sem a necessidade de um back-end ou servidor para realizar o envio. Ele facilita a integração de formulários de contato e outras funcionalidades relacionadas ao envio de emails em projetos onde a criação de um servidor não é viável ou necessária.

Diferente de outras bibliotecas como o Nodemailer, que dependem de um ambiente de servidor (back-end), o EmailJS é ideal para projetos simples onde o envio de email é feito diretamente do front-end, como em formulários de contato de sites. Ele utiliza uma API segura para processar os emails e enviá-los ao destinatário.

🚀 Quando usar o EmailJS?​

O EmailJS é perfeito para:

  • Formulários de contato em sites que não possuem back-end.
  • Websites estáticos ou projetos simples que precisam de envio de emails sem configurar um servidor.
  • Projetos onde simplicidade e rapidez de configuração são importantes.

🔧 Configurando o EmailJS Passo a Passo​

Siga os passos abaixo para configurar o EmailJS em seu projeto:

1. 🛠 Criando uma Conta no EmailJS​

Primeiro, você precisa criar uma conta no EmailJS. Siga estes passos:

  1. Acesse o site do EmailJS.
  2. Clique em Sign Up e siga o processo de criação de conta.

OBS: A diretoria de tecnologia já possui uma conta e os dados armazenados no documento de contas

2. 📧 Configurando um Serviço de Email​

Após criar sua conta (ou acessando a da CT), você precisa configurar um serviço de email para que o EmailJS possa usar para enviar emails:

  1. No painel do EmailJS, vá para a aba Email Services.
  2. Escolha um dos provedores disponíveis, como Gmail, Outlook, etc. e conecte a sua conta.
    • Exemplo: Se você estiver usando Gmail, conecte a sua conta Gmail seguindo as instruções.
    • Caso queira enviar emails utilizando a própria conta de tecnologia, pode apenas usar o "Service" já existente, basta conferir se é o certo.

3. 📝 Criando um Template de Email​

Agora que você tem o serviço de email configurado, é hora de criar um template de email. Este template será usado sempre que o formulário for enviado.

  1. No painel, vá para Email Templates.
  2. Clique em Create New Template.
  3. Defina o corpo do email usando variáveis como {{name}}, {{email}}, {{message}} para capturar os dados enviados pelo formulário.
    • Exemplo de corpo de email:
       ```
       Nome: {{name}}
       Email: {{email}}
       Telefone: {{phone}}
       Mensagem: {{message}}
       ```
      OBS: Ver template do formulário do site da CT para melhores detalhes

4. 🔑 Obtendo as Credenciais de Acesso​

Você precisará de três informações essenciais para configurar o envio de emails no seu projeto:

  • Service ID: Identificador do seu serviço de email.
    • Em Email Services, basta pegar o Service ID do serviço que criou ou está utilizando.
  • Template ID: Identificador do seu template de email.
    • Vá em Settings do seu template e verá seu Template ID. Caso deseje, pode alterá-lo para facilitar a visualização
  • Public Key: Sua chave pública para autenticação.
    • Clique no seu perfil. Em API Keys verá a Public Key.

5. ⚛️ Integrando o EmailJS ao Seu Projeto​

Agora que o serviço de email e o template estão configurados, vamos integrar ao seu projeto front-end. Aqui está um exemplo de como configurar o EmailJS com React usando a biblioteca emailjs-com.

Passo 1: Instalar a Biblioteca emailjs-com​

No seu terminal, execute o seguinte comando para instalar a biblioteca:

npm install emailjs-com

Passo 2: Configurar o Formulário de Contato​

Aqui está um exemplo de um formulário de contato que envia dados ao EmailJS usando React:

import { useForm } from 'react-hook-form';
import emailjs from 'emailjs-com';

const Formulario = () => {
    const { register, handleSubmit, formState: { errors }, reset } = useForm();

    const sendEmail = async (data) => {
        const { name, email, message, countryCode, phone } = data;
        const fullPhone = `${countryCode} ${phone}`;

        const emailParams = {
            name,
            email,
            phone: fullPhone,
            message
        };

        try {
            await emailjs.send(
                'YOUR_SERVICE_ID',    // Substitua pelo seu Service ID
                'YOUR_TEMPLATE_ID',   // Substitua pelo seu Template ID
                emailParams,
                'YOUR_PUBLIC_KEY'    // Substitua pela sua Public Key
            );
            alert('Email enviado com sucesso!');
            reset(); // Limpa o formulário
        } catch (error) {
            console.error('Erro ao enviar email:', error);
            alert('Erro ao enviar email. Tente novamente.');
        }
    }

    return (
        <form onSubmit={handleSubmit(sendEmail)}>
            ...
        </form>
    );
}

Passo 3: 🔑 Substitua as Chaves de Acesso​

No código acima, você deve substituir os seguintes valores com as informações da sua conta EmailJS:

  • YOUR_SERVICE_ID: Este é o ID do serviço que você criou no painel do EmailJS.
  • YOUR_TEMPLATE_ID: Este é o ID do template que você configurou para enviar emails.
  • YOUR_PUBLIC_KEY: Esta é a sua Public Key, disponível no painel do EmailJS.

Você pode encontrar essas informações no Dashboard do EmailJS após criar seu serviço e template.

Passo 4: 🚀 Teste o Envio de Email​

Depois de configurar corretamente, você pode testar o envio de email preenchendo o formulário. Ao clicar em "Enviar", os dados serão enviados via EmailJS, e você deverá receber o email com as informações preenchidas no formulário.

Passo 5: 🛠️ Debug e Erros​

Caso o email não seja enviado, utilize o bloco catch para capturar erros e exibir uma mensagem amigável ao usuário. Verifique se as chaves e IDs estão corretos e que todos os campos obrigatórios estão preenchidos.