Integrations
React E-mail
Integrating Novu Echo with React.Email for your Next.js application can be done in three steps. If you don’t have an app, you can clone our Next.js example.
1
Install React.Email components
Install the required React.Email components.
npm i @react-email/components react-email
2
Write your email
Create a new sample-email.tsx
file for your email template.
import * as React from "react";
import { Button, Html } from "@react-email/components";
function Email(props) {
return (
<Html>
<Button
href="https://example.com"
style={{ background: "#000", color: "#fff", padding: "12px 20px" }}
>
Click me
</Button>
</Html>
);
}
export function renderEmail(inputs) {
return render(<Email {...inputs} />);
}
3
Write your workflow
Define your Echo Workflow using the above template
import { renderEmail } from './react-email.template';
import { Echo } from '@novu/echo';
const echo = new Echo();
echo.workflow('new-signup', async ({ step, payload }) => {
await step.email('send-email', async (inputs) => {
return {
subject: `Welcome to React E-mail`,
body: renderEmail(inputs),
}
});
});
Was this page helpful?