How to send an email with HTML syntax instead of HTML text | JavaScript Mastery - Programming & Coding Community | Page 1

solemn sequoia Sep 12, 2023, 9:31 PM

#

I want send an email with HTML syntax instead of HTML text like this

<!DOCTYPE html > <body data-id="__react-email-body"><a data-id="react-email-button" target="_blank" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;padding:0px 0px"><span><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%;mso-text-raise:0" hidden>&nbsp;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:0">Click me</span><span><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]--></span></a></body>

frigid fjord Sep 12, 2023, 9:40 PM

#

What is "HTML text"? I am not aware of any formal definition of this or how "HTML text" differs from "HTML syntax". What I see here is just HTML. This only differs from how HTML normally looks in 2 ways:

Line breaks and indents are absent.
It contains conditional comments, which were once common during the browser wars, but now they are very rarely used in web development. They are still useful in HTML mail because mail clients do not fully implement all the features present in regular browsers.

dire cypress Sep 12, 2023, 10:02 PM

#

You can save the innerHTML as a txt

solemn sequoia Sep 13, 2023, 12:06 AM

#

frigid fjord What is "HTML text"? I am not aware of any formal definition of this or how "HTM...

HTML text is

<!DOCTYPE html > <body data-id="__react-email-body"><a data-id="react-email-button" target="_blank" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;padding:0px 0px"><span><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%;mso-text-raise:0" hidden>&nbsp;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:0">Click me</span><span><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]--></span></a></body>

#

Example of HTML syntax

frigid fjord Sep 13, 2023, 12:18 AM

#

solemn sequoia HTML text is ```html <!DOCTYPE html > <body data-id="__react-email-body"><a data...

I think this means the HTML code is visible in the message instead of being interpretted by the mail client. This is a problem of the headers sent. You must specify the MIME version and Content-type. If you omit them from the header, the message won't be interpretted as HTML.

solemn sequoia Sep 13, 2023, 12:25 AM

#

frigid fjord I think this means the HTML code is visible in the message instead of being inte...

I do it like this

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <!-- HTML content -->
</body>

</html>

#

but it still send me a text instead of HTML

frigid fjord Sep 13, 2023, 12:45 AM

#

solemn sequoia I do it like this ```html <!DOCTYPE html> <html lang="en"> <head> <meta chars...

This is completely unrelated to what I said. The header has to be set when sending the message. It is not part of the HTML code. What are you using to send it?

solemn sequoia Sep 13, 2023, 12:47 AM

#

frigid fjord This is completely unrelated to what I said. The header has to be set when sendi...

I just copy paste code

solemn sequoia Sep 13, 2023, 12:47 AM

#

frigid fjord This is completely unrelated to what I said. The header has to be set when sendi...

I use resend.com and react-email

#

In response I got this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><a data-id="react-email-button" target="_blank" style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;padding:0px 0px"><span><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%;mso-text-raise:0" hidden>&nbsp;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:0">Click me</span><span><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]--></span></a>

frigid fjord Sep 13, 2023, 12:49 AM

#

solemn sequoia I just copy paste code

I though you were sending message programmatically. I don't know how to help you with your method of sending messages.

frigid fjord Sep 13, 2023, 12:50 AM

#

solemn sequoia I use resend.com and react-email

So are you using Gmail sending manuallly or are you using resend.com sending programmatically. These are two completely different things and you appear to say you are doing both.

frigid fjord Sep 13, 2023, 12:50 AM

#

solemn sequoia I use resend.com and react-email

There is a header section when sending via resend.com. https://resend.com/docs/api-reference/emails/send-email

Resend

Send Email - Resend

Start sending emails through the Resend Email API.

solemn sequoia Sep 13, 2023, 12:50 AM

#

frigid fjord So are you using Gmail sending manuallly or are you using resend.com sending pro...

I tried both variants

#

And got the same result

frigid fjord Sep 13, 2023, 12:53 AM

#

solemn sequoia And got the same result

Did you follow this example? https://resend.com/docs/send-with-express

Resend

Express - Resend

Learn how to send your first email using Express and the Resend Node.js SDK.

solemn sequoia Sep 13, 2023, 12:53 AM

#

frigid fjord Did you follow this example? https://resend.com/docs/send-with-express

Yes I have already set up

frigid fjord Sep 13, 2023, 12:53 AM

#

It includes this snippet:

const data = await resend.emails.send({
      from: "Acme <[email protected]>",
      to: ["[email protected]"],
      subject: "hello world",
      html: "<strong>it works!</strong>",
    });

The html key must be used.

frigid fjord Sep 13, 2023, 12:54 AM

#

solemn sequoia Yes I have already set up

Did you use an html key in the object?

solemn sequoia Sep 13, 2023, 12:55 AM

#

frigid fjord Did you use an html key in the object?

I don't know what you mean by html key

#

const resend = new Resend(process.env.VITE_RESEND_PUBLIC);

app.post('/send-email',  async (req: Request, res: Response) => {
     try {
       const { from, to, subject, react } = req.body;

     console.log('-------------------------')
     console.log('from - ',from)
     console.log('to - ',to)
     console.log('subject- ',subject)
     console.log('react - ',react)
     console.log('-------------------------')

    const data = await resend.emails.send({
      from:from,
      to:to,
      subject:subject,
      react:react,
    });
     res.sendStatus(200);

    console.log(data);
  } catch (error) {
    console.error(error);
     res.sendStatus(500);
  }
})