{"id":20065,"date":"2025-09-15T17:36:29","date_gmt":"2025-09-15T17:36:29","guid":{"rendered":"https:\/\/www.mailgun.com\/blog\/como-enviar-e-mails-em-javascript-frontend-e-backend\/"},"modified":"2026-09-14T22:06:39","modified_gmt":"2026-09-14T22:06:39","slug":"como-enviar-e-mails-em-javascript-frontend-e-backend","status":"publish","type":"blog","link":"https:\/\/www.mailgun.com\/pt\/blog\/dev-life\/como-enviar-e-mails-em-javascript-frontend-e-backend\/","title":{"rendered":"Como enviar e-mails em JavaScript: frontend e backend"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Existem duas maneiras de integrar o e-mail ao seu aplicativo: uma abordagem exclusiva de frontend ou um m\u00e9todo focado no backend. A abordagem de frontend usa o protocolo <code>mailto<\/code> e JavaScript puro, mas \u00e9 limitada e exp\u00f5e informa\u00e7\u00f5es confidenciais. O m\u00e9todo de backend, usando <code>Node.js<\/code> e a API do Mailgun, oferece melhor controle, seguran\u00e7a e flexibilidade.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este guia apresenta as duas op\u00e7\u00f5es, para que voc\u00ea decida qual funciona melhor para a sua configura\u00e7\u00e3o.<\/p>\n\n\n\r\n    <nav data-content-type=\"longform\" class=\"toc-block longform-spacings px-5 py-6 px-md-6 px-lg-7 py-md-7 bg-light fs-sm rounded-lg\" aria-labelledby=\"toc-title-5787\"><p class=\"h5 m-0\" id=\"toc-title-5787\">\u00cdndice<\/p><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">01<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#como-enviar-e-mails-pelo-frontend\">Como enviar e-mails pelo frontend<\/a><a class=\"scrollme link-body-color\" href=\"#como-enviar-e-mails-do-frontend-com-o-protocolo-mailto\">Como enviar e-mails do frontend com o protocolo mailto<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">02<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#como-enviar-e-mails-pelo-backend\">Como enviar e-mails pelo backend<\/a><a class=\"scrollme link-body-color\" href=\"#configure-seu-ambiente-de-desenvolvimento\">Configure seu ambiente de desenvolvimento<\/a><a class=\"scrollme link-body-color\" href=\"#obtenha-sua-chave-de-api-do-mailgun\">Obtenha sua chave de API do Mailgun<\/a><a class=\"scrollme link-body-color\" href=\"#envie-e-mails-usando-o-sdk-para-node-js-do-mailgun\">Envie e-mails usando o SDK para Node.js do Mailgun<\/a><a class=\"scrollme link-body-color\" href=\"#praticas-recomendadas-para-o-envio-de-e-mails-do-back-end\">Pr\u00e1ticas recomendadas para o envio de e-mails do back-end<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">03<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#conclusao\">Conclus\u00e3o<\/a><\/div><\/div><\/nav>\n\n\n<h2 class=\"wp-block-heading\">Como enviar e-mails pelo frontend<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O Simple Mail Transfer Protocol (SMTP) \u00e9 o protocolo padr\u00e3o para o envio de e-mails na internet. Para enviar um e-mail pelo frontend, voc\u00ea precisa de uma conex\u00e3o com um servidor SMTP, o que exige um nome de usu\u00e1rio, uma senha ou uma chave de API fornecida por um host SMTP, como o Mailgun, para autentica\u00e7\u00e3o. No entanto, essa conex\u00e3o tamb\u00e9m exp\u00f5e as credenciais do host SMTP, deixando-as vulner\u00e1veis a roubos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Como uma alternativa mais segura, voc\u00ea pode configurar uma fun\u00e7\u00e3o serverless dedicada ou um backend simples que use a API do Mailgun para enviar e-mails e se conecte com seguran\u00e7a ao seu frontend. Contudo, essa abordagem n\u00e3o \u00e9 &#8220;exclusiva de frontend&#8221;, pois envolve servidores e pode ser dif\u00edcil de configurar sem um backend tradicional.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O m\u00e9todo &#8220;exclusivo de frontend&#8221; mais vi\u00e1vel e seguro para o envio de e-mails envolve usar um hiperlink para acionar o aplicativo de e-mail padr\u00e3o da pessoa com um modelo preenchido pronto para envio. Essa abordagem n\u00e3o precisa de um servidor SMTP ou credenciais, pois o e-mail \u00e9 enviado por meio do cliente de e-mail da pessoa, em vez do seu aplicativo. Voc\u00ea pode configurar isso usando o <a href=\"https:\/\/learn.microsoft.com\/en-us\/previous-versions\/aa767737(v=vs.85)\" target=\"_tabs\" rel=\"noopener noreferrer\">protocolo mailto<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00a0O JavaScript do lado do cliente n\u00e3o pode enviar e-mails diretamente via SMTP porque os navegadores n\u00e3o oferecem suporte a conex\u00f5es de soquete diretas com o servidor devido a restri\u00e7\u00f5es de seguran\u00e7a. O m\u00e9todo exclusivo de frontend mais vi\u00e1vel e seguro envolve o uso de um <a href=\"https:\/\/learn.microsoft.com\/en-us\/previous-versions\/aa767737(v=vs.85)\">hiperlink mailto<\/a> para abrir o cliente de e-mail padr\u00e3o da pessoa com um modelo preenchido, evitando a necessidade de servidores SMTP ou a exposi\u00e7\u00e3o de credenciais.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Como enviar e-mails do frontend com o protocolo mailto<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">O protocolo <code>mailto<\/code> \u00e9 um esquema de URL que permite o envio de e-mails por meio de um clique em um link. Quando algu\u00e9m clica em um link <code>mailto<\/code>, ele abre a caixa de correio padr\u00e3o dessa pessoa com o destinat\u00e1rio do e-mail j\u00e1 preenchido. Al\u00e9m do preenchimento do destinat\u00e1rio, voc\u00ea tamb\u00e9m pode personalizar seu link <code>mailto<\/code> para incluir um assunto, um corpo, c\u00f3pia (cc) e c\u00f3pia oculta (bcc).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando algu\u00e9m clica em um link <code>mailto:<\/code>, o navegador abre o cliente de e-mail padr\u00e3o (como Outlook ou Gmail) em uma nova janela ou aba com o endere\u00e7o do destinat\u00e1rio j\u00e1 preenchido. Esses links tamb\u00e9m podem incluir par\u00e2metros para preencher os campos de assunto, corpo, cc e bcc, ativando um modelo de e-mail personaliz\u00e1vel acionado pelo frontend sem enviar um e-mail diretamente pelo JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Os links mailto usam a seguinte sintaxe: <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>mailto:sAddress[sHeaders]<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uma URL <code>mailto:<\/code> abre o cliente de e-mail padr\u00e3o da pessoa com o endere\u00e7o do destinat\u00e1rio preenchido, e \u00e9 poss\u00edvel personaliz\u00e1-la anexando par\u00e2metros como assunto, corpo, cc e bcc usando query strings. <code>sAddress<\/code> refere-se a um ou mais endere\u00e7os de e-mail v\u00e1lidos separados por ponto e v\u00edrgula, e <code>sHeaders<\/code> (opcional) refere-se aos par\u00e2metros de consulta com assunto, corpo, cc e bcc. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para enviar um e-mail pelo seu frontend usando o protocolo <code>mailto<\/code>, crie um formul\u00e1rio HTML para que as pessoas insiram o(s) destinat\u00e1rio(s), o assunto, o corpo, cc e bcc. \u00c9 poss\u00edvel usar essas entradas para gerar uma URL <code>mailto<\/code> com JavaScript. Ao enviar o formul\u00e1rio, o navegador abre a caixa de correio da pessoa usando o link <code>mailto<\/code> que voc\u00ea criou. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para criar o formul\u00e1rio, adicione o seguinte bloco de c\u00f3digo a um novo arquivo HTML: <\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                HTML                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-clipboard-success-label=\"Copiado!\" data-clipboard-error-label=\"N\u00e3o foi poss\u00edvel copiar\" data-tooltip=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copiar para a \u00e1rea de transfer\u00eancia\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-markup\">\r\n                                <code id=\"code_0_content\" class=\"language-markup\">\r\n\r\n                                    &lt;!DOCTYPE html&gt;rn&lt;html lang=&quot;en&quot;&gt;rn  &lt;head&gt;rn    &lt;meta charset=&quot;UTF-8&quot; \/&gt;rn    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;rn    &lt;title&gt;Emails&lt;\/title&gt;rn    &lt;script defer src=&quot;.\/script.js&quot;&gt;&lt;\/script&gt;rn  &lt;\/head&gt;rn  &lt;body&gt;rn     &lt;form method=&quot;post&quot;&gt;rn      &lt;!-- Add recipient field --&gt;rn      &lt;inputrn        id=&quot;recipient&quot;rn        type=&quot;text&quot;rn        name=&quot;recipient&quot;rn        placeholder=&quot;Recipient&quot;rn      \/&gt;rn      &lt;!-- Add subject field --&gt;rn      &lt;input id=&quot;subject&quot; type=&quot;text&quot; name=&quot;subject&quot; placeholder=&quot;Subject&quot; \/&gt;rn      &lt;!-- Add message field --&gt;rn      &lt;textarea id=&quot;message&quot; name=&quot;message&quot; placeholder=&quot;Email Body&quot;&gt;&lt;\/textarea&gt;rn      &lt;!-- Add optional cc &amp; bcc fields --&gt;rn      &lt;input id=&quot;cc&quot; type=&quot;text&quot; name=&quot;cc&quot; placeholder=&quot;CC&quot; \/&gt;rn      &lt;input id=&quot;bcc&quot; type=&quot;text&quot; name=&quot;bcc&quot; placeholder=&quot;BCC&quot; \/&gt;rnrn      &lt;input id=&quot;send&quot; type=&quot;button&quot; value=&quot;Open Mail&quot; \/&gt;rn    &lt;\/form&gt;rnrn    &lt;!-- Basic styles --&gt;rn    &lt;style&gt;rn      body {rn        display: flex;rn        justify-content: center;rn        align-items: center;rn        height: 100vh;rn        margin: 0;rn      }rn      form {rn        display: flex;rn        flex-direction: column;rn        gap: 1rem;rn      }rn      input,rn      textarea {rn        padding: 0.5rem;rn        border: 1px solid #ccc;rn        border-radius: 0.25rem;rn      }rn      input[type=&quot;button&quot;] {rn        background-color: #007bff;rn        color: white;rn        border: none;rn        border-radius: 0.25rem;rn        padding: 0.5rem 1rem;rn        cursor: pointer;rn      }rn    &lt;\/style&gt;rn  &lt;\/body&gt;rn&lt;\/html&gt;rn\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p class=\"wp-block-paragraph\">O formul\u00e1rio inclui um destinat\u00e1rio, cc, bcc, assunto, um campo de corpo e um bot\u00e3o de envio. O c\u00f3digo tamb\u00e9m adiciona um estilo b\u00e1sico ao formul\u00e1rio:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-3976\" width=\"1488\" height=\"808\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_2.03.29_PM.png\" alt=\"Email Form\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_2.03.29_PM.png 1488w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_2.03.29_PM-300x163.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_2.03.29_PM-768x417.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_2.03.29_PM-1024x556.png 1024w\" sizes=\"(max-width: 1488px) 100vw, 1488px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Crie um arquivo <code>script.js<\/code> e cole o c\u00f3digo a seguir para adicionar um ouvinte de evento de <code>click<\/code> ao bot\u00e3o de envio, o qual aciona a fun\u00e7\u00e3o <code>openMailBox<\/code>:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                Javascript                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-clipboard-success-label=\"Copiado!\" data-clipboard-error-label=\"N\u00e3o foi poss\u00edvel copiar\" data-tooltip=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copiar para a \u00e1rea de transfer\u00eancia\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-Javascript\">\r\n                                <code id=\"code_0_content\" class=\"language-Javascript\">\r\n\r\n                                    \/\/ script.jsrnconst submitButton = document.getElementById(&quot;send&quot;);rnrnsubmitButton?.addEventListener(&quot;click&quot;, openMailBox);rnrnfunction openMailBox(e) {rn  e.preventDefault();rnrn  \/\/ Get valuesrn  const recipient = document.getElementById(&quot;recipient&quot;).value;rn  const subject = document.getElementById(&quot;subject&quot;).value;rn  const message = document.getElementById(&quot;message&quot;).value;rn  const cc = document.getElementById(&quot;cc&quot;).valuern  const bcc = document.getElementById(&quot;bcc&quot;).valuernrn  \/\/ Create a mailto link and encode the valuesrn  const mailtoLink = `mailto:${encodeURIComponent(rn    recipientrn  )}?subject=${encodeURIComponent(subject)}&amp;body=${encodeURIComponent(rn    messagern  )}&amp;cc=${encodeURIComponent(cc)}&amp;bcc=${encodeURIComponent(bcc)}`;rnrn  \/\/ Open user&#039;s mailbox with prefilled contentrn  window.open(mailtoLink, &quot;_blank&quot;);rn}rn\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p class=\"wp-block-paragraph\">A fun\u00e7\u00e3o <code>openMailBox<\/code> extrai os valores do formul\u00e1rio e cria um link mailto ao concatenar a vers\u00e3o codificada dos valores para evitar problemas com caracteres especiais (espa\u00e7os, <code>&amp;, =, ?<\/code>) na URL mailto. Ela tamb\u00e9m abre o link <code>mailto<\/code> em uma nova aba para acionar a caixa de correio da pessoa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esse m\u00e9todo de envio de e-mails \u00e9 \u00fatil para aplicativos e sites de pequena escala em que um backend de e-mail \u00e9 desnecess\u00e1rio (como links de &#8220;Fale conosco&#8221;, formul\u00e1rios de feedback e tickets de suporte). Contudo, ele apresenta algumas desvantagens significativas, incluindo o risco de expor credenciais, a falta de rastreamento de entrega de e-mails e desafios de escalabilidade.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como enviar e-mails pelo backend<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Em cen\u00e1rios mais complexos ou sens\u00edveis de tratamento de e-mail, enviar e-mails por um backend oferece seguran\u00e7a aprimorada, pois as credenciais ficam armazenadas no servidor. Tamb\u00e9m \u00e9 mais confi\u00e1vel, j\u00e1 que sistemas de backend podem gerenciar e-mails em massa e filas de e-mail, garantindo o envio seguro de mensagens, mesmo durante picos de tr\u00e1fego.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea pode usar um servi\u00e7o de envio como o Mailgun para simplificar esse processo. O Mailgun lida com as complexidades dos protocolos de e-mail (SMTP, APIs HTTP), verifica\u00e7\u00e3o de dom\u00ednio e preven\u00e7\u00e3o contra spam.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configure seu ambiente de desenvolvimento<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Para enviar e-mails com o Node.js e o Mailgun, primeiro voc\u00ea precisar\u00e1 criar um ambiente de desenvolvimento rodando o seguinte comando:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>mkdir email-service &amp;&amp; cd email-service &amp;&amp; npm init -y<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O comando acima cria uma pasta <code>email-service<\/code> e inicializa o npm com as configura\u00e7\u00f5es padr\u00e3o na pasta.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instale os pacotes necess\u00e1rios com o seguinte comando:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>npm install mailgun.js form-data dotenv<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As depend\u00eancias instaladas incluem:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>Mailgun.js<\/code> (SDK para Node.js do Mailgun), que voc\u00ea precisa para interagir com o Mailgun usando o Node.js. Instale o SDK para Node.js do Mailgun ou o nodemailer (<code>npm install nodemailer<\/code>) para enviar e-mails com seguran\u00e7a pelo seu backend.<\/li>\n\n\n\n<li><code>Dotenv<\/code>, uma biblioteca que carrega vari\u00e1veis de ambiente para <code>process.env<\/code>. Voc\u00ea precisar\u00e1 dela para gerenciar com seguran\u00e7a suas credenciais confidenciais.<\/li>\n\n\n\n<li><code>Form-Data<\/code>, uma biblioteca que cria streams de <code>multipart\/form-data<\/code> leg\u00edveis. O Mailgun aceita apenas dados em <code>multipart\/form-data<\/code>, portanto, essa biblioteca \u00e9 necess\u00e1ria para inicializar o SDK.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Depois de instalar as depend\u00eancias acima, voc\u00ea precisa obter uma chave de API do seu painel do Mailgun.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><b>Obtenha sua chave de API do Mailgun<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Para obter sua chave de API, primeiro fa\u00e7a login na sua conta do Mailgun. No seu painel de usu\u00e1rio, clique no bot\u00e3o suspenso no canto superior direito da tela e, em seguida, clique no bot\u00e3o <b>API Security<\/b>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-3978\" width=\"1952\" height=\"984\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.23_AM.png\" alt=\"Retrieve your Mailgun API key\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.23_AM.png 1952w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.23_AM-300x151.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.23_AM-768x387.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.23_AM-1024x516.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.23_AM-1536x774.png 1536w\" sizes=\"(max-width: 1952px) 100vw, 1952px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Na p\u00e1gina API Security, clique no bot\u00e3o <b>Add new key<\/b> para revelar um modal com um formul\u00e1rio. Preencha a descri\u00e7\u00e3o no modal pop-up, clique no bot\u00e3o <b>Create Key<\/b>, copie a chave de API exibida e adicione-a ao seu arquivo <code>.env<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-4004\" width=\"1956\" height=\"1010\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.30_AM.png\" alt=\"Add New API Key Image\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.30_AM.png 1956w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.30_AM-300x155.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.30_AM-768x397.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.30_AM-1024x529.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/Screenshot_2025-02-27_at_9.14.30_AM-1536x793.png 1536w\" sizes=\"(max-width: 1956px) 100vw, 1956px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Em seguida, crie um arquivo <code>index.js<\/code> e um arquivo <code>.env<\/code> no diret\u00f3rio do seu projeto. No seu arquivo <code>.env<\/code>, adicione as vari\u00e1veis abaixo e substitua o valor do placeholder por seu valor real:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>MAILGUN_API_KEY = <\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><b>Envie e-mails usando o SDK para Node.js do Mailgun<\/b><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Agora que tem a sua chave de API, voc\u00ea j\u00e1 pode inicializar o SDK do Mailgun. No seu arquivo <code>index.js<\/code>, adicione as importa\u00e7\u00f5es necess\u00e1rias e inicialize o <code>dotenv<\/code> incluindo o c\u00f3digo a seguir:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                Javascript                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-clipboard-success-label=\"Copiado!\" data-clipboard-error-label=\"N\u00e3o foi poss\u00edvel copiar\" data-tooltip=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copiar para a \u00e1rea de transfer\u00eancia\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-Javascript\">\r\n                                <code id=\"code_0_content\" class=\"language-Javascript\">\r\n\r\n                                    \/\/ index.jsrnconst formData = require(&quot;form-data&quot;);rnconst Mailgun = require(&quot;mailgun.js&quot;);rnconst dotenv = require(&quot;dotenv&quot;);rnrndotenv.config();rnInitialize the Mailgun SDK with the formData package and connect to the Mailgun client using your credentials:rn\/\/ index.jsrnconst mailgun = new Mailgun(formData);rnrnconst mg = mailgun.client({rn  username: &quot;api&quot;,rn  key: process.env.MAILGUN_API_KEY,rn});rn\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 poss\u00edvel enviar e-mails por meio da fun\u00e7\u00e3o <code>messages.create<\/code> do SDK do Mailgun. Ela recebe como argumentos um dom\u00ednio de e-mail e um objeto que cont\u00e9m detalhes sobre o e-mail que voc\u00ea deseja enviar. O dom\u00ednio de e-mail precisa ser adicionado e verificado na sua conta do Mailgun. Siga <a href=\"https:\/\/help.mailgun.com\/hc\/en-us\/articles\/32884702360603-Domain-Verification-Setup-Guide\" target=\"_tabs\" rel=\"noopener noreferrer\">este guia<\/a> para adicionar e verificar um dom\u00ednio de e-mail personalizado. Como alternativa, voc\u00ea pode usar o dom\u00ednio sandbox padr\u00e3o fornecido pelo Mailgun.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Os detalhes do objeto incluem (entre outros):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>from<\/code> mostra ao destinat\u00e1rio quem enviou o e-mail. Essa propriedade deve ser o seu dom\u00ednio registrado.<\/li>\n\n\n\n<li><code>to<\/code> \u00e9 o(s) endere\u00e7o(s) de e-mail do(s) destinat\u00e1rio(s).<\/li>\n\n\n\n<li><code>subject<\/code> \u00e9 o assunto do e-mail.<\/li>\n\n\n\n<li><code>text<\/code> \u00e9 o conte\u00fado do e-mail.<\/li>\n\n\n\n<li><code>html<\/code> \u00e9 o conte\u00fado do e-mail em HTML. Uma chamada de fun\u00e7\u00e3o n\u00e3o pode ter as propriedades <code>text<\/code> e <code>html<\/code> ao mesmo tempo; uma delas seria descartada.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea pode explorar mais op\u00e7\u00f5es dispon\u00edveis na <a href=\"https:\/\/github.com\/mailgun\/mailgun.js\" target=\"_tabs\" rel=\"noopener noreferrer\">documenta\u00e7\u00e3o oficial do SDK do Node.js<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por exemplo, adicione o bloco de c\u00f3digo abaixo ao seu arquivo <code>index.js<\/code> para implementar uma fun\u00e7\u00e3o que envia um e-mail:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                Javascript                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-clipboard-success-label=\"Copiado!\" data-clipboard-error-label=\"N\u00e3o foi poss\u00edvel copiar\" data-tooltip=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copiar para a \u00e1rea de transfer\u00eancia\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-Javascript\">\r\n                                <code id=\"code_0_content\" class=\"language-Javascript\">\r\n\r\n                                    \/\/ index.jsrnasync function sendEmail(domain, from, to, subject, text) {rn  try {rn    const response = await mg.messages.create(domain, {rn      from,rn      to,rn      subject,rn      text,rn    });rnrn    console.log(response);rn  } catch (error) {rn    console.log(error);rn  }rn}\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea pode chamar a fun\u00e7\u00e3o assim:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                Javascript                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <div class=\"code-snippet__code-wrapper\">\r\n                            <div class=\"nav nav-buttons code-snippet__copy-wrapper\">\r\n                                <button type=\"button\" class=\"nav-link code-snippet__copy\" data-clipboard-target=\"#code_0_content\" data-clipboard-label=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-clipboard-success-label=\"Copiado!\" data-clipboard-error-label=\"N\u00e3o foi poss\u00edvel copiar\" data-tooltip=\"Copiar para a \u00e1rea de transfer\u00eancia\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copiar para a \u00e1rea de transfer\u00eancia\">\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--default\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/file-stack.svg\"><\/svg>\r\n                                    <svg class=\"code-snippet__copy-icon code-snippet__copy-icon--success\" width=\"24\" height=\"24\" aria-hidden=\"true\" data-url=\"https:\/\/www.mailgun.com\/wp-content\/plugins\/sinch-core\/assets\/icons\/sinch\/badge-check.svg\"><\/svg>\r\n                                <\/button>\r\n                            <\/div>\r\n                            <pre class=\"w-100 h-100 m-0 line-numbers language-Javascript\">\r\n                                <code id=\"code_0_content\" class=\"language-Javascript\">\r\n\r\n                                    \/\/ index.jsrnsendEmail(rn  &quot;&lt;MAILGUN_DOMAIN&gt;&quot;,rn  &quot;&lt;SENDER_NAME&gt; &lt;SENDER_EMAIL&gt;&quot;,rn  &quot;&lt;RECIPIENT_EMAIL&gt;&quot;,rn  &quot;&lt;EMAIL_SUBJECT&gt;&quot;,rn  &quot;&lt;EMAIL_BODY&gt;&quot;rn);\r\n                                <\/code>\r\n                            <\/pre>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p class=\"wp-block-paragraph\">Execute a fun\u00e7\u00e3o rodando o seguinte comando:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>node index<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uma resposta parecida com esta deve ser registrada no console:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>{<br>status: 200,<br>id: '',<br>message: 'Queued. Thank you.'<br>}<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O e-mail j\u00e1 deve ter sido entregue na caixa de correio do destinat\u00e1rio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pr\u00e1ticas recomendadas para o envio de e-mails do back-end<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Sem a configura\u00e7\u00e3o adequada, os e-mails enviados do seu back-end podem ser sinalizados como spam, n\u00e3o chegar aos destinat\u00e1rios ou acabar bloqueados pelos provedores. Para melhorar a entregabilidade, siga estas pr\u00e1ticas recomendadas:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Use um ESP confi\u00e1vel:<\/b> ao enviar e-mails do back-end, \u00e9 importante usar um provedor de servi\u00e7os de e-mail (ESP) renomado, como o Mailgun, para lidar com as complexidades da entrega de e-mail. Isso inclui garantir que seus e-mails n\u00e3o sejam marcados como spam por meio da imposi\u00e7\u00e3o da autentica\u00e7\u00e3o de dom\u00ednio de e-mail (SPF, DKIM, DMARC).<\/li>\n\n\n\n<li><b>Armazene as chaves de API com seguran\u00e7a:<\/b> outra considera\u00e7\u00e3o importante \u00e9 armazenar suas chaves de API de forma segura usando vari\u00e1veis de ambiente para garantir que n\u00e3o sejam roubadas e usadas para fins maliciosos, afetando, assim, a reputa\u00e7\u00e3o do remetente. O Mailgun oferece chaves de API com escopo, permitindo que voc\u00ea conceda permiss\u00f5es espec\u00edficas (como &#8220;apenas envio&#8221;) para minimizar o risco de abuso.<\/li>\n\n\n\n<li><b>Monitore as an\u00e1lises de e-mail:<\/b> voc\u00ea tamb\u00e9m precisa rastrear as taxas de entrega, devolu\u00e7\u00f5es e e-mails com falha para tomar a\u00e7\u00f5es corretivas. O painel do Mailgun fornece insights sobre taxas de devolu\u00e7\u00e3o, taxas de entrega e m\u00e9tricas de engajamento que ajudam voc\u00ea a otimizar as campanhas de e-mail. O Mailgun tamb\u00e9m oferece uma API para <a href=\"https:\/\/www.mailgun.com\/blog\/dev-life\/verify-email-with-nodejs\/\" target=\"_tabs\" rel=\"noopener noreferrer\">validar endere\u00e7os de e-mail<\/a>, garantindo que voc\u00ea envie e-mails apenas para destinat\u00e1rios v\u00e1lidos, reduzindo, assim, suas taxas de devolu\u00e7\u00e3o.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Seguir essas pr\u00e1ticas recomendadas ajudar\u00e1 a garantir uma entrega de e-mail confi\u00e1vel e a minimizar a filtragem de spam.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Neste artigo, voc\u00ea explorou como enviar e-mails usando uma abordagem apenas de front-end e uma abordagem de back-end. A abordagem apenas de front-end \u00e9 simples de configurar, mas n\u00e3o \u00e9 a ideal para fun\u00e7\u00f5es de e-mail complexas devido \u00e0s suas limita\u00e7\u00f5es. A abordagem de back-end oferece uma solu\u00e7\u00e3o com mais recursos para a integra\u00e7\u00e3o de e-mail, o que se torna mais simples com provedores de servi\u00e7os de e-mail como o Mailgun.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com o Mailgun, voc\u00ea pode enviar e-mails de forma segura, otimizar sua entregabilidade de e-mail, al\u00e9m de gerenciar e validar suas listas de e-mails. <\/p>\n\n\n\r\n    <aside data-content-type=\"longform\"  class=\"banner-block longform-spacings rounded-lg shadow-lg px-5 py-6 px-md-6 py-md-7 p-lg-7 bg-light\" data-theme=\"dark\" aria-labelledby=\"banner-block-block_0fe7a6a5146fb0b9a815d85be2a466f5\">\r\n                    <p class=\"text-uppercase section-caption text-body-color\">\r\n                Cadastre-se            <\/p>\r\n                            <p class=\"h4 text-accent fw-bold\" id=\"banner-block-block_0fe7a6a5146fb0b9a815d85be2a466f5\">\r\n                \u00c9 f\u00e1cil come\u00e7ar. E \u00e9 gr\u00e1tis.            <\/p>\r\n                            <div class=\"mb-0 text-body-color\">\r\n                                    <div class=\"content-body mb-0 text-body-color\">Veja o que voc\u00ea pode alcan\u00e7ar com a melhor plataforma de entrega de e-mail do mundo.<\/div>\r\n                            <\/div>\r\n        \r\n        <div class=\"text-start mt-5\"><a href=\"https:\/\/signup.mailgun.com\/new\/signup\"  class=\"btn btn-secondary\" >Get started<\/a><\/div>\r\n    <\/aside>\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Adicionar a funcionalidade de e-mail ao seu aplicativo web ajuda a manter sua base de usu\u00e1rios engajada e bem informada. Sejam e-mails de verifica\u00e7\u00e3o de conta ou links para redefinir senhas, o e-mail mant\u00e9m a comunica\u00e7\u00e3o direta e confi\u00e1vel. Nesta postagem, aprenda a enviar esses e-mails com uma abordagem de backend e de frontend usando JavaScript.<\/p>\n","protected":false},"author":12,"featured_media":3952,"menu_order":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"blog_category":[19],"class_list":["post-20065","blog","type-blog","status-publish","has-post-thumbnail","hentry","blog_category-dev-life"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Envio de e-mails em JavaScript: front-end vs. back-end - Transactional Email API Service For Developers | Mailgun<\/title>\n<meta name=\"description\" content=\"Aprenda a enviar e-mails em JavaScript usando o protocolo mailto ou uma abordagem de back-end com o Node.js e a API do Mailgun. Compare a seguran\u00e7a, a confiabilidade e os recursos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mailgun.com\/pt\/blog\/dev-life\/como-enviar-e-mails-em-javascript-frontend-e-backend\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Envio de e-mails em JavaScript: front-end vs. back-end - Transactional Email API Service For Developers | Mailgun\" \/>\n<meta property=\"og:description\" content=\"Aprenda a enviar e-mails em JavaScript usando o protocolo mailto ou uma abordagem de back-end com o Node.js e a API do Mailgun. Compare a seguran\u00e7a, a confiabilidade e os recursos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mailgun.com\/pt\/blog\/dev-life\/como-enviar-e-mails-em-javascript-frontend-e-backend\/\" \/>\n<meta property=\"og:site_name\" content=\"Transactional Email API Service For Developers | Mailgun\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-14T22:06:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Dev-Life.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"448\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/dev-life\\\/como-enviar-e-mails-em-javascript-frontend-e-backend\\\/\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/dev-life\\\/como-enviar-e-mails-em-javascript-frontend-e-backend\\\/\",\"name\":\"Envio de e-mails em JavaScript: front-end vs. back-end - Transactional Email API Service For Developers | Mailgun\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/dev-life\\\/como-enviar-e-mails-em-javascript-frontend-e-backend\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/dev-life\\\/como-enviar-e-mails-em-javascript-frontend-e-backend\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Dev-Life.png\",\"datePublished\":\"2025-09-15T17:36:29+00:00\",\"dateModified\":\"2026-09-14T22:06:39+00:00\",\"description\":\"Aprenda a enviar e-mails em JavaScript usando o protocolo mailto ou uma abordagem de back-end com o Node.js e a API do Mailgun. Compare a seguran\u00e7a, a confiabilidade e os recursos.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/dev-life\\\/como-enviar-e-mails-em-javascript-frontend-e-backend\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/dev-life\\\/como-enviar-e-mails-em-javascript-frontend-e-backend\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/dev-life\\\/como-enviar-e-mails-em-javascript-frontend-e-backend\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Dev-Life.png\",\"contentUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Dev-Life.png\",\"width\":720,\"height\":448},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/dev-life\\\/como-enviar-e-mails-em-javascript-frontend-e-backend\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/inicio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como enviar e-mails em JavaScript: frontend e backend\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/#website\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"description\":\"Poderosas APIs de e-mail transacional que permitem a voc\u00ea enviar, receber e rastrear e-mails, criadas com os desenvolvedores em mente. Saiba mais hoje mesmo!\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/#organization\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/cropped-android-chrome-512x512-1.png\",\"contentUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/cropped-android-chrome-512x512-1.png\",\"width\":512,\"height\":512,\"caption\":\"Transactional Email API Service For Developers | Mailgun\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/pt\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Envio de e-mails em JavaScript: front-end vs. back-end - Transactional Email API Service For Developers | Mailgun","description":"Aprenda a enviar e-mails em JavaScript usando o protocolo mailto ou uma abordagem de back-end com o Node.js e a API do Mailgun. Compare a seguran\u00e7a, a confiabilidade e os recursos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mailgun.com\/pt\/blog\/dev-life\/como-enviar-e-mails-em-javascript-frontend-e-backend\/","og_locale":"pt_BR","og_type":"article","og_title":"Envio de e-mails em JavaScript: front-end vs. back-end - Transactional Email API Service For Developers | Mailgun","og_description":"Aprenda a enviar e-mails em JavaScript usando o protocolo mailto ou uma abordagem de back-end com o Node.js e a API do Mailgun. Compare a seguran\u00e7a, a confiabilidade e os recursos.","og_url":"https:\/\/www.mailgun.com\/pt\/blog\/dev-life\/como-enviar-e-mails-em-javascript-frontend-e-backend\/","og_site_name":"Transactional Email API Service For Developers | Mailgun","article_modified_time":"2026-09-14T22:06:39+00:00","og_image":[{"width":720,"height":448,"url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Dev-Life.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.mailgun.com\/pt\/blog\/dev-life\/como-enviar-e-mails-em-javascript-frontend-e-backend\/","url":"https:\/\/www.mailgun.com\/pt\/blog\/dev-life\/como-enviar-e-mails-em-javascript-frontend-e-backend\/","name":"Envio de e-mails em JavaScript: front-end vs. back-end - Transactional Email API Service For Developers | Mailgun","isPartOf":{"@id":"https:\/\/www.mailgun.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mailgun.com\/pt\/blog\/dev-life\/como-enviar-e-mails-em-javascript-frontend-e-backend\/#primaryimage"},"image":{"@id":"https:\/\/www.mailgun.com\/pt\/blog\/dev-life\/como-enviar-e-mails-em-javascript-frontend-e-backend\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Dev-Life.png","datePublished":"2025-09-15T17:36:29+00:00","dateModified":"2026-09-14T22:06:39+00:00","description":"Aprenda a enviar e-mails em JavaScript usando o protocolo mailto ou uma abordagem de back-end com o Node.js e a API do Mailgun. Compare a seguran\u00e7a, a confiabilidade e os recursos.","breadcrumb":{"@id":"https:\/\/www.mailgun.com\/pt\/blog\/dev-life\/como-enviar-e-mails-em-javascript-frontend-e-backend\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mailgun.com\/pt\/blog\/dev-life\/como-enviar-e-mails-em-javascript-frontend-e-backend\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.mailgun.com\/pt\/blog\/dev-life\/como-enviar-e-mails-em-javascript-frontend-e-backend\/#primaryimage","url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Dev-Life.png","contentUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Dev-Life.png","width":720,"height":448},{"@type":"BreadcrumbList","@id":"https:\/\/www.mailgun.com\/pt\/blog\/dev-life\/como-enviar-e-mails-em-javascript-frontend-e-backend\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mailgun.com\/pt\/inicio\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/www.mailgun.com\/pt\/blog\/"},{"@type":"ListItem","position":3,"name":"Como enviar e-mails em JavaScript: frontend e backend"}]},{"@type":"WebSite","@id":"https:\/\/www.mailgun.com\/pt\/#website","url":"https:\/\/www.mailgun.com\/pt\/","name":"Transactional Email API Service For Developers | Mailgun","description":"Poderosas APIs de e-mail transacional que permitem a voc\u00ea enviar, receber e rastrear e-mails, criadas com os desenvolvedores em mente. Saiba mais hoje mesmo!","publisher":{"@id":"https:\/\/www.mailgun.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mailgun.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.mailgun.com\/pt\/#organization","name":"Transactional Email API Service For Developers | Mailgun","url":"https:\/\/www.mailgun.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.mailgun.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/06\/cropped-android-chrome-512x512-1.png","contentUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/06\/cropped-android-chrome-512x512-1.png","width":512,"height":512,"caption":"Transactional Email API Service For Developers | Mailgun"},"image":{"@id":"https:\/\/www.mailgun.com\/pt\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/blog\/20065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/users\/12"}],"version-history":[{"count":1,"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/blog\/20065\/revisions"}],"predecessor-version":[{"id":20066,"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/blog\/20065\/revisions\/20066"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/media\/3952"}],"wp:attachment":[{"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/media?parent=20065"}],"wp:term":[{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.mailgun.com\/pt\/wp-json\/wp\/v2\/blog_category?post=20065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}