{"id":19945,"date":"2025-09-15T17:36:29","date_gmt":"2025-09-15T17:36:29","guid":{"rendered":"https:\/\/www.mailgun.com\/blog\/enviar-emails-javascript-frontend-backend\/"},"modified":"2026-09-14T22:06:40","modified_gmt":"2026-09-14T22:06:40","slug":"enviar-emails-javascript-frontend-backend","status":"publish","type":"blog","link":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/enviar-emails-javascript-frontend-backend\/","title":{"rendered":"C\u00f3mo enviar emails en JavaScript: frontend y backend"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">There are two ways to integrate email into your app: a frontend-only approach or a backend-powered method. The frontend approach uses the <code>mailto<\/code> protocol and vanilla JavaScript, but it\u2019s limited and exposes sensitive information. The backend method, using <code>Node.js<\/code> and the Mailgun API, gives you better control, security, and flexibility.<\/p>\n\n<p class=\"wp-block-paragraph\">This guide walks you through both options, so you can decide what works best for your setup.<\/p>\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-8098\"><p class=\"h5 m-0\" id=\"toc-title-8098\">\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=\"#sending-emails-from-the-frontend\">Sending emails from the frontend<\/a><a class=\"scrollme link-body-color\" href=\"#sending-emails-from-the-frontend-using-the-mailto-protocol\">Sending emails from the frontend using the mailto protocol<\/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=\"#sending-emails-from-the-backend\">Sending emails from the backend<\/a><a class=\"scrollme link-body-color\" href=\"#set-up-your-development-environment\">Set up your development environment<\/a><a class=\"scrollme link-body-color\" href=\"#retrieve-your-mailgun-api-key\">Retrieve your Mailgun API key<\/a><a class=\"scrollme link-body-color\" href=\"#send-emails-using-mailguns-node-js-sdk\">Send emails using Mailgun&#8217;s Node.js SDK<\/a><a class=\"scrollme link-body-color\" href=\"#best-practices-for-sending-emails-from-the-backend\">Best practices for sending emails from the backend<\/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=\"#wrapping-up\">Wrapping up<\/a><\/div><\/div><\/nav>\n<h2 class=\"wp-block-heading\">Sending emails from the frontend<\/h2>\n\n<p class=\"wp-block-paragraph\">The Simple Mail Transfer Protocol (SMTP) is the standard protocol for sending emails on the internet. To send an email from the frontend, you need a connection to an SMTP server, which requires a username, password, or API key provided by an SMTP host like Mailgun for authentication. However, that connection will also expose the SMTP host&#8217;s credentials, leaving them vulnerable to theft.<\/p>\n\n<p class=\"wp-block-paragraph\">As a more secure alternative, you can set up a dedicated serverless function or a simple backend that uses the Mailgun API to send emails and connects securely with your frontend. However, this approach is not \u00abfrontend-only,\u00bb as it involves servers and can be challenging to set up without a traditional backend.<\/p>\n\n<p class=\"wp-block-paragraph\">The most feasible and secure \u00abfrontend-only\u00bb method for sending emails involves using a hyperlink to trigger the user&#8217;s default mail app with a prefilled template for them to send. This approach doesn&#8217;t need an SMTP server or credentials because the email is sent through the user&#8217;s email client instead of your application. You can set this up using the <a href=\"https:\/\/learn.microsoft.com\/en-us\/previous-versions\/aa767737(v=vs.85)\" target=\"_tabs\" rel=\"noopener noreferrer\">mailto protocol<\/a>.<\/p>\n\n<p class=\"wp-block-paragraph\">\u00a0Client-side JavaScript cannot send emails directly via SMTP because browsers do not support direct server socket connections due to security restrictions. The most feasible and secure frontend-only method involves using a <a href=\"https:\/\/learn.microsoft.com\/en-us\/previous-versions\/aa767737(v=vs.85)\">mailto hyperlink<\/a> to open the user\u2019s default email client with a prefilled template, avoiding the need for SMTP servers or exposing credentials.<\/p>\n\n<h3 class=\"wp-block-heading\">Sending emails from the frontend using the mailto protocol<\/h3>\n\n<p class=\"wp-block-paragraph\">The <code>mailto<\/code> protocol is a URL scheme that lets users send emails by clicking a link. When a user clicks a <code>mailto<\/code> link, it opens their default mailbox with the recipient of the email prefilled. In addition to the recipient of the email being prefilled, you can also customize your <code>mailto<\/code> link to include a subject, a body, and carbon copy (cc) and blind carbon copy (bcc).<\/p>\n\n<p class=\"wp-block-paragraph\">When a user clicks a <code>mailto:<\/code> link, their browser opens the default email client (such as Outlook or Gmail) in a new window or tab with the recipient\u2019s address pre-filled. These links can also include parameters to prefill the subject, body, cc, and bcc fields, enabling a customizable email template triggered from the frontend without sending an email directly from JavaScript.<\/p>\n\n<p class=\"wp-block-paragraph\">mailto links use the following syntax: <\/p>\n\n<p class=\"wp-block-paragraph\"><code>mailto:sAddress[sHeaders]<\/code><\/p>\n\n<p class=\"wp-block-paragraph\">A <code>mailto:<\/code> URL opens the user\u2019s default email client with the recipient\u2019s address prefilled, and you can customize it by appending parameters such as subject, body, cc, and bcc using query strings. <code>sAddress<\/code> refers to one or more valid email addresses separated by a semicolon, and <code>sHeaders<\/code> (optional) refers to query parameters containing the subject, body, cc, and bcc. <\/p>\n\n<p class=\"wp-block-paragraph\">To send an email from your frontend using the <code>mailto<\/code> protocol, create an HTML form that allows users to input the recipient(s), subject, body, cc, and bcc. You can use these inputs to generate a <code>mailto<\/code> URL with JavaScript. When the user submits the form, the browser opens the user&#8217;s mailbox using the <code>mailto<\/code> link you created. <\/p>\n\n<p class=\"wp-block-paragraph\">To create the form, add the following code block to a new HTML file: <\/p>\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=\"Copia al portapapeles\" data-clipboard-success-label=\"\u00a1Copiado!\" data-clipboard-error-label=\"No se ha podido copiar\" data-tooltip=\"Copia al portapapeles\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copia al portapapeles\">\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<p class=\"wp-block-paragraph\">The form includes a recipient, a cc, a bcc, a subject, a body field, and a submit button. The code also adds some basic styling to the form:<\/p>\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<p class=\"wp-block-paragraph\">Create a <code>script.js<\/code> file and paste in the following code to add a <code>click<\/code> event listener to the submit button, which triggers the <code>openMailBox<\/code> function:<\/p>\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=\"Copia al portapapeles\" data-clipboard-success-label=\"\u00a1Copiado!\" data-clipboard-error-label=\"No se ha podido copiar\" data-tooltip=\"Copia al portapapeles\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copia al portapapeles\">\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<p class=\"wp-block-paragraph\">The <code>openMailBox<\/code> function extracts the form&#8217;s values and creates a mailto link by concatenating the encoded version of the values to avoid issues with special characters (spaces, <code>&amp;, =, ?<\/code>) in the mailto URL. It also opens the <code>mailto<\/code> link in a new tab to trigger the user&#8217;s mailbox.<\/p>\n\n<p class=\"wp-block-paragraph\">This method of sending emails is useful for small-scale applications and websites where an email backend is unnecessary (such as \u00abContact Us\u00bb links, feedback forms, and support tickets). However, it has some significant disadvantages, including the risk of exposing credentials, a lack of email delivery tracking, and challenges with scaling.<\/p>\n\n<h2 class=\"wp-block-heading\">Sending emails from the backend<\/h2>\n\n<p class=\"wp-block-paragraph\">For more complex or sensitive email handling scenarios, sending emails from a backend offers enhanced security as credentials are stored on the server. It&#8217;s also more reliable as backend systems can manage bulk emails and email queues, ensuring messages are sent reliably even during high traffic.<\/p>\n\n<p class=\"wp-block-paragraph\">You can use a mailing service like Mailgun to simplify this process. Mailgun handles the complexities of email protocols (SMTP, HTTP APIs), domain verification, and spam prevention.<\/p>\n\n<h3 class=\"wp-block-heading\">Set up your development environment<\/h3>\n\n<p class=\"wp-block-paragraph\">To send emails using Node.js and Mailgun, you&#8217;ll first need to create a development environment by running the following command:<\/p>\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<p class=\"wp-block-paragraph\">The command above creates an <code>email-service<\/code> folder and initializes npm with its defaults in the folder.<\/p>\n\n<p class=\"wp-block-paragraph\">Install the required packages with the following command:<\/p>\n\n<p class=\"wp-block-paragraph\"><code>npm install mailgun.js form-data dotenv<\/code><\/p>\n\n<p class=\"wp-block-paragraph\">The installed dependencies include:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><code>Mailgun.js<\/code> (Mailgun&#8217;s Node.js SDK), which you need to interact with Mailgun using Node.js. Install Mailgun\u2019s Node.js SDK or nodemailer (<code>npm install nodemailer<\/code>) to send emails securely from your backend.<\/li>\n\n\n\n<li><code>Dotenv<\/code>, a library that loads environmental variables to <code>process.env<\/code>. You&#8217;ll need it to manage your sensitive credentials securely.<\/li>\n\n\n\n<li><code>Form-Data<\/code>, a library that creates readable <code>multipart\/form-data<\/code> streams. Mailgun only accepts data in <code>multipart\/form-data<\/code>, so you need this library to initialize the SDK.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">After installing the dependencies above, you need to get an API key from your Mailgun dashboard.<\/p>\n\n<h3 class=\"wp-block-heading\"><b>Retrieve your Mailgun API key<\/b><\/h3>\n\n<p class=\"wp-block-paragraph\">To get your API key, first log in to your Mailgun account. On your user dashboard, click the dropdown button at the top right of your screen and click the <b>API Security<\/b> button.<\/p>\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<p class=\"wp-block-paragraph\">On the API Security page, click the <b>Add new key<\/b> button to reveal a modal with a form. Fill out the description on the pop-up modal and click the <b>Create Key<\/b> button, copy the API key displayed, and add it to your <code>.env<\/code> file.<\/p>\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<p class=\"wp-block-paragraph\">Next, create an <code>index.js<\/code> file and a <code>.env<\/code> file in your project directory. In your <code>.env<\/code> file, add the variables below, and replace the placeholder value with its actual value:<\/p>\n\n<p class=\"wp-block-paragraph\"><code>MAILGUN_API_KEY = <\/code><\/p>\n\n<h3 class=\"wp-block-heading\"><b>Send emails using Mailgun&#8217;s Node.js SDK<\/b><\/h3>\n\n<p class=\"wp-block-paragraph\">Now that you have your API key, you can initialize your Mailgun SDK. In your <code>index.js<\/code> file, add the required imports and initialize <code>dotenv<\/code> by adding the following code:<\/p>\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=\"Copia al portapapeles\" data-clipboard-success-label=\"\u00a1Copiado!\" data-clipboard-error-label=\"No se ha podido copiar\" data-tooltip=\"Copia al portapapeles\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copia al portapapeles\">\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<p class=\"wp-block-paragraph\">You can send emails using the Mailgun SDK&#8217;s <code>messages.create<\/code> function. It takes an email domain and an object containing details about the email you want to send as arguments. The email domain must be added to your Mailgun account and verified. Follow <a href=\"https:\/\/help.mailgun.com\/hc\/en-us\/articles\/32884702360603-Domain-Verification-Setup-Guide\" target=\"_tabs\" rel=\"noopener noreferrer\">this guide<\/a> to add and verify a custom email domain. Alternatively, you can use the default sandbox domain provided by Mailgun.<\/p>\n\n<p class=\"wp-block-paragraph\">The details in the object include (but are not limited to) the following:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><code>from<\/code> shows the recipient who the email is from. This property should be your registered domain.<\/li>\n\n\n\n<li><code>to<\/code> is the recipient&#8217;s (or recipients&#8217;) email address(es).<\/li>\n\n\n\n<li><code>subject<\/code> is the subject of the email.<\/li>\n\n\n\n<li><code>text<\/code> is the content of the email.<\/li>\n\n\n\n<li><code>html<\/code> is the content of the email in HTML. One function call cannot have <code>text<\/code> and <code>html<\/code> properties at the same time; one would be discarded.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">You can explore more of the available options in the <a href=\"https:\/\/github.com\/mailgun\/mailgun.js\" target=\"_tabs\" rel=\"noopener noreferrer\">official Node.js SDK docs<\/a>.<\/p>\n\n<p class=\"wp-block-paragraph\">For example, add the code block below to your <code>index.js<\/code> file to implement a function that sends an email:<\/p>\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=\"Copia al portapapeles\" data-clipboard-success-label=\"\u00a1Copiado!\" data-clipboard-error-label=\"No se ha podido copiar\" data-tooltip=\"Copia al portapapeles\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copia al portapapeles\">\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<p class=\"wp-block-paragraph\">You can call the function like this:<\/p>\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=\"Copia al portapapeles\" data-clipboard-success-label=\"\u00a1Copiado!\" data-clipboard-error-label=\"No se ha podido copiar\" data-tooltip=\"Copia al portapapeles\" data-tooltip-placement=\"left\" role=\"tooltip\" aria-label=\"Copia al portapapeles\">\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<p class=\"wp-block-paragraph\">Execute the function by running the following command:<\/p>\n\n<p class=\"wp-block-paragraph\"><code>node index<\/code><\/p>\n\n<p class=\"wp-block-paragraph\">A response similar to the following should be logged to the console:<\/p>\n\n<p class=\"wp-block-paragraph\"><code>{<br \/>status: 200,<br \/>id: '&lt;2025011324959830.5ae661a4e9fbf66f@sandboxca2ef9affjfiokfi7e431e95fc6ec3.mailgun.org&gt;',<br \/>message: 'Queued. Thank you.'<br \/>}<\/code><\/p>\n\n<p class=\"wp-block-paragraph\">The email should now be delivered to the recipient&#8217;s mailbox.<\/p>\n\n<h3 class=\"wp-block-heading\">Best practices for sending emails from the backend<\/h3>\n\n<p class=\"wp-block-paragraph\">Without proper setup, emails sent from your backend may be flagged as spam, fail to reach recipients, or get blocked by providers. To improve deliverability, follow these best practices:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><b>Use a reputable ESP:<\/b> When sending emails from the backend, it&#8217;s important to use a reputable email service provider (ESP) like Mailgun to handle the complexities of email delivery, including ensuring your emails are not marked as spam by enforcing email domain authentication (SPF, DKIM, DMARC).<\/li>\n\n\n\n<li><b>Store API keys securely:<\/b> Another important consideration is securely storing your API keys using environment variables to ensure they&#8217;re not stolen and used for malicious purposes, thus affecting your sender reputation. Mailgun offers scoped API keys, allowing you to grant specific permissions (such as \u00absending only\u00bb) to minimize the risk of abuse.<\/li>\n\n\n\n<li><b>Monitor email analytics:<\/b> You also need to track delivery rates, bounces, and failed emails in order to take corrective action. Mailgun&#8217;s dashboard provides insights into bounce rates, delivery rates, and engagement metrics that help you optimize email campaigns. Mailgun also offers an API to <a href=\"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/verificar-email-con-nodejs\/\" target=\"_tabs\" rel=\"noopener noreferrer\">validate email addresses<\/a>, ensuring you only send emails to valid recipients, thus reducing your bounce rates.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Following these best practices will help ensure reliable email delivery and minimize spam filtering.<\/p>\n\n<h2 class=\"wp-block-heading\">Wrapping up<\/h2>\n\n<p class=\"wp-block-paragraph\">In this article, you explored how to send emails using a frontend-only approach and a backend approach. The frontend-only approach is simple to set up, but it&#8217;s not ideal for complex email functions due to its limitations. The backend approach offers a more feature-rich solution to email integration that&#8217;s made simpler by email service providers like Mailgun.<\/p>\n\n<p class=\"wp-block-paragraph\">With Mailgun, you can send emails securely, optimize your email deliverability, and manage and validate your mailing lists. <\/p>\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_458d188c19c3835414d669a62af45d21\">\r\n                    <p class=\"text-uppercase section-caption text-body-color\">\r\n                Sign Up            <\/p>\r\n                            <p class=\"h4 text-accent fw-bold\" id=\"banner-block-block_458d188c19c3835414d669a62af45d21\">\r\n                It&#8217;s easy to get started. And it&#8217;s free.            <\/p>\r\n                            <div class=\"mb-0 text-body-color\">\r\n                                    <div class=\"content-body mb-0 text-body-color\">See what you can accomplish with the world\u2019s best email delivery platform.<\/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>A\u00f1adir funcionalidades de email a tu aplicaci\u00f3n web te ayuda a mantener a tu base de usuarios interesada e informada. Ya sean emails de verificaci\u00f3n de cuenta o enlaces para restablecer contrase\u00f1as, el email mantiene la comunicaci\u00f3n directa y fiable. En este art\u00edculo, aprende a enviar estos emails con un enfoque tanto de backend como 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-19945","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>Enviar emails en JavaScript: enfoques de frontend frente a backend - Transactional Email API Service For Developers | Mailgun<\/title>\n<meta name=\"description\" content=\"Aprende a enviar emails en JavaScript mediante el protocolo mailto o un enfoque de backend con Node.js y la API de Mailgun. Compara la seguridad, la fiabilidad y las funciones.\" \/>\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\/es\/blog\/dev-life\/enviar-emails-javascript-frontend-backend\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Enviar emails en JavaScript: enfoques de frontend frente a backend - Transactional Email API Service For Developers | Mailgun\" \/>\n<meta property=\"og:description\" content=\"Aprende a enviar emails en JavaScript mediante el protocolo mailto o un enfoque de backend con Node.js y la API de Mailgun. Compara la seguridad, la fiabilidad y las funciones.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/enviar-emails-javascript-frontend-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:40+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\\\/es\\\/blog\\\/dev-life\\\/enviar-emails-javascript-frontend-backend\\\/\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/dev-life\\\/enviar-emails-javascript-frontend-backend\\\/\",\"name\":\"Enviar emails en JavaScript: enfoques de frontend frente a backend - Transactional Email API Service For Developers | Mailgun\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/dev-life\\\/enviar-emails-javascript-frontend-backend\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/dev-life\\\/enviar-emails-javascript-frontend-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:40+00:00\",\"description\":\"Aprende a enviar emails en JavaScript mediante el protocolo mailto o un enfoque de backend con Node.js y la API de Mailgun. Compara la seguridad, la fiabilidad y las funciones.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/dev-life\\\/enviar-emails-javascript-frontend-backend\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/dev-life\\\/enviar-emails-javascript-frontend-backend\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/dev-life\\\/enviar-emails-javascript-frontend-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\\\/es\\\/blog\\\/dev-life\\\/enviar-emails-javascript-frontend-backend\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo enviar emails en JavaScript: frontend y backend\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"description\":\"Potentes API de email transaccional que te permiten enviar, recibir y hacer seguimiento de emails, creadas pensando en los desarrolladores. \u00a1Descubre m\u00e1s!\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#organization\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#\\\/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\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Enviar emails en JavaScript: enfoques de frontend frente a backend - Transactional Email API Service For Developers | Mailgun","description":"Aprende a enviar emails en JavaScript mediante el protocolo mailto o un enfoque de backend con Node.js y la API de Mailgun. Compara la seguridad, la fiabilidad y las funciones.","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\/es\/blog\/dev-life\/enviar-emails-javascript-frontend-backend\/","og_locale":"es_ES","og_type":"article","og_title":"Enviar emails en JavaScript: enfoques de frontend frente a backend - Transactional Email API Service For Developers | Mailgun","og_description":"Aprende a enviar emails en JavaScript mediante el protocolo mailto o un enfoque de backend con Node.js y la API de Mailgun. Compara la seguridad, la fiabilidad y las funciones.","og_url":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/enviar-emails-javascript-frontend-backend\/","og_site_name":"Transactional Email API Service For Developers | Mailgun","article_modified_time":"2026-09-14T22:06:40+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\/es\/blog\/dev-life\/enviar-emails-javascript-frontend-backend\/","url":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/enviar-emails-javascript-frontend-backend\/","name":"Enviar emails en JavaScript: enfoques de frontend frente a backend - Transactional Email API Service For Developers | Mailgun","isPartOf":{"@id":"https:\/\/www.mailgun.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/enviar-emails-javascript-frontend-backend\/#primaryimage"},"image":{"@id":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/enviar-emails-javascript-frontend-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:40+00:00","description":"Aprende a enviar emails en JavaScript mediante el protocolo mailto o un enfoque de backend con Node.js y la API de Mailgun. Compara la seguridad, la fiabilidad y las funciones.","breadcrumb":{"@id":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/enviar-emails-javascript-frontend-backend\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mailgun.com\/es\/blog\/dev-life\/enviar-emails-javascript-frontend-backend\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/enviar-emails-javascript-frontend-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\/es\/blog\/dev-life\/enviar-emails-javascript-frontend-backend\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mailgun.com\/es\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/www.mailgun.com\/es\/blog\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo enviar emails en JavaScript: frontend y backend"}]},{"@type":"WebSite","@id":"https:\/\/www.mailgun.com\/es\/#website","url":"https:\/\/www.mailgun.com\/es\/","name":"Transactional Email API Service For Developers | Mailgun","description":"Potentes API de email transaccional que te permiten enviar, recibir y hacer seguimiento de emails, creadas pensando en los desarrolladores. \u00a1Descubre m\u00e1s!","publisher":{"@id":"https:\/\/www.mailgun.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mailgun.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.mailgun.com\/es\/#organization","name":"Transactional Email API Service For Developers | Mailgun","url":"https:\/\/www.mailgun.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.mailgun.com\/es\/#\/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\/es\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog\/19945","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/users\/12"}],"version-history":[{"count":3,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog\/19945\/revisions"}],"predecessor-version":[{"id":20068,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog\/19945\/revisions\/20068"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/media\/3952"}],"wp:attachment":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/media?parent=19945"}],"wp:term":[{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog_category?post=19945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}