htmlreactjsfrontendhtml-emailreact-fullstack

Sending HTML hyperlinks to EmailJS API (and other possible alternatives)

My goal is to send an html fragment wrapped in a string in my react app, to emailjs, an email api that holds your template.

my code

const getMessage = () => {
let base = "localhost:3000/approval/"
let link = base + employeeEmail + "/" + month + "/" + year
let msg = "<a href=\"" + link + "\" style=\" padding: 12px; border-left: 4px solid #d0d0d0; font-style: italic;\">View Timesheet</a>"
setMessage(msg);
console.log(message)
};
  
const sendEmail = (e) => {
e.preventDefault();
emailjs.sendForm('service', 'template', form.current, 'abc')
.then((result) => {
console.log(form.current)
}, (error) => {
console.log(error.text);
});
};

I've tried sending that which is received by a variable {{{ message }}} in my emailJS template. It renders "View Timesheet" in the email body without the hyperlink.

The msg variable looks like this when I log it to console View Timesheet

and this when it gets passed to a form value

Can anyone help point out what I am missing or a different solution to my problem?

Solution

  • The link URL is invalid, you have to add a protocol.

    Instead of sending HTML, it is better to create a link in your template. And send the URL as a dynamic variable.

    <a href="{{link}}" style="padding: 12px; border-left: 4px solid #d0d0d0; font-style: italic;">View Timesheet</a>