Novu

Set up an SMTP connection to send Novu notification emails with Loops.

​

Set up Loops SMTP in Novu

Go to the Integration Store settings in Novu and create a new email provider.

Click Connect Provider and then Custom SMTP.

Give your provider a name like “Loops SMTP” in the Name field.

Then add the following details into each field:

You also have to add values to the From email address and Sender name fields because Novu requires them. You can add any value here because Loops will overwrite these values when sending emails.

Click Create Integration to finish setup.

​

Create Transactional emails in Loops

Next, create new transactional emails for the emails you are sending from Novu.

In Loops, go to the Transactional page and click New. Alternatively, you can select one of our many ready-made templates from the Templates page.

You can then use the Loops editor to create nicely-designed templates or make them as simple as you like.

You can even save styles so you can easily apply consistent branding to all of your emails.

For each Loops template you create, you can add add data variables, which allow data from Novu to be inserted into each email.

Once you’re done creating the email and adding the data variables, click Next. On the next page, click the Show payload button to view the API payload for your template. You will need this for the next step.

Make sure to also publish your email! It won’t send unless it’s published.

​

Configure email templates in Novu

The final setup step is to add email templates in Novu.

Loops SMTP integrations work a bit differently than most. Instead of sending a text or HTML email body, you set them up to send API-like data.

In Novu, go to Workflows and create a new workflow. Give it a descriptive name and click Create workflow.

You will enter the workflow UI. Add an Email node. In the email body paste the transactional payload from Loops from the previous step.

Add a subject, but note that this will be overwritten by the subject you added to your Loops transactional email.

Next you need to add some Novu data into the template, namely the recipient’s email and any data variables you added in Loops.

Here is an example Confirm signup email template. This payload was copied from the template’s Publish page in Loops, then the {{ subscriber.email }} and {{ payload.loginUrl }} variables from Novu were added.

You can add any custom data to the payload object when triggering emails from Novu. We need to pass those same values to your Loops transactional email via the dataVariables data.

{
  "transactionalId": "cm67vfcgs00pha22s3qevs7nr",
  "email": "{{ subscriber.email }}",
  "dataVariables": {
    "loginUrl": "{{ payload.loginUrl }}"
  }
}

If you want to add each Novu subscriber to your Loops audience so you can send marketing email to them, add the addToAudience flag to your template as below. This will create a contact in Loops using the {{ subscriber.email }} value.

{
  "transactionalId": "cm67vfcgs00pha22s3qevs7nr",
  "email": "{{ subscriber.email }}",
  "addToAudience": true,
  "dataVariables": {
    "loginUrl": "{{ payload.loginUrl }}"
  }
}

If you want to include Novu subscriber attributes to personalise your Loops email, you can add them into your Novu template just like the following example.

Make sure to add fallbacks for all non-required values and add the corresponding data variables (e.g. firstName here) into your Loops transactional email.

{
  "transactionalId": "cm67vfcgs00pha22s3qevs7nr",
  "email": "{{ subscriber.email }}",
  "dataVariables": {
    "loginUrl": "{{ payload.loginUrl }}",
    "firstName": "{{ subscriber.firstName | default: 'subscriber' }}"
  }
}

Here’s how a template with variables added looks in the Novu editor:

Now you’re all set up to start sending!

​

Trigger emails with Novu

When it comes to triggering Novu notifications to subscribers, you can use the Novu SDKs or API.

In each call, you need to specify your workflow by its ID, add recipient data and also pass in any data variables for your Loops transactional email into the payload.

Using the same example from above, here’s the trigger using Novu’s Node SDK.

import { Novu } from "@novu/node";

const novu = new Novu("<NOVU_SECRET_KEY>");

await novu.trigger("<WORKFLOW_TRIGGER_IDENTIFIER>", {
  to: {
    subscriberId: "67867a14722783d44d69fc5a"
  },
  payload: {
    loginUrl: "https://myapp.com/login/"
  }
});

Here’s the same request using the API:

POST https://api.novu.co/v1/events/trigger

{
  "name": "<WORKFLOW_TRIGGER_IDENTIFIER>",
  "to": {
    "subscriberId": "67867a14722783d44d69fc5a"
  },
  "payload": {
    "loginUrl": "https://myapp.com/login/"
  }
}

​

Testing the integration

Novu offers a testing UI where you can try out your set up before going live.

Go to the Workflows page and click on your workflow, then select the Trigger tab.

Here you will be able to set different subscriber and payload data and send test email notifications. The SDK examples below also update, so you can easily create code for your application.

You can also see logs of all emails sent from the Activity Feed page in Novu.

​

Important notes

• The subject in Novu templates is always overwritten by the subject added to the corresponding template in Loops.
• The From email address and Sender name configured in your Novu SMTP settings are always overwritten by the sender details added to your templates in Loops.