Warning
You are viewing the technical documentation for Sharetribe. If you are looking for our no-code documentation, see our new help center.

Last updated

Add a new email notification

Learn how to add a new email notification to the existing transaction process.

Table of Contents

In this example, we will add a new email notification that will be sent to the customer when their booking time is approaching. We will edit the biketribe-instant-booking transaction process, which was created in the earlier part of this tutorial.

Fetch transaction process

Before we modify our transaction process, it's better to ensure that we have most the up-to-date version of the process. You can fetch any process version with Sharetribe CLI:

flex-cli process pull --process=biketribe-instant-booking --alias=release-1 --path=./biketribe-instant-booking --marketplace=biketribe-dev

Create a new email template

When the latest version of the transaction process is pulled, we can navigate to the templates directory. We want to add a new directory for the new notification there.

└── biketribe-instant-booking
    └── templates
        └── booking-reminder-customer

Copy the notification files

Create two files in the new directory with the following file names, and add the linked contents:

Remember to follow the naming convention where the file ends with *-html.html or *-subject.txt. Otherwise, the notification files will not work.

Templates use the Handlebars syntax which will be rendered as HTML when the email is sent. Handlebars enables adding variables like recipient name, marketplace name, and transaction details to the template. You can see all variables that are available in the transaction email context reference.

At the beginning of the notification file, we define global variables for managing email texts. After that, the email template format follows a structure of a standard HTML document. You can add styles with CSS, edit the structure with HTML, and add text sections and transaction details by using variables within {{}}.

You can modify the text content of the emails in Sharetribe Console. However, if you want to add a completely new text section, you can add it using the same helper {{t}} that is used across the template.

The structure of the helper is as follows:

{{ t
  "TemplateName.MessageKey"
  "Fallback message in case key not found"
  listingFieldVariable=listing.publicData.someListingField
}}

So if you want to, for instance, add a description block that refers to the listing field "brand", you would add the following snippet:

{{ t
  "BookingReminder.BrandDescription"
  "You have booked a {brand} bike!"
  brand=listing.publicData.brand
}}

Add new email texts in Console

The email text editor in Console allows operators to change email template texts without code changes. Since the template we just added has new email text content, your previews were rendered with the template fallback values.

To allow making email text changes in this template as well, add the following email texts into the email text editor:

{
  "BookingReminder.ContactProvider": "If you have questions about your booking, you can contact {providerDisplayName} through the order page.",
  "BookingReminder.ContentForDaily": "You have booked {listingTitle} {dateStart,date,::YYYYMMMd} to {dateEnd,date,::YYYYMMMd}.",
  "BookingReminder.ContentForHourly": "You have booked {listingTitle} from {dateStart,date,::hmmaYYYYMMMd} to {dateEnd,date,::hmmaYYYYMMMd}.",
  "BookingReminder.ContentForNightly": "You have booked {listingTitle} from {dateStart,date,::YYYYMMMd} to {dateEnd,date,::YYYYMMMd}.",
  "BookingReminder.Cta": "View order details",
  "BookingReminder.Subject": "Your booking for {listingTitle} is approaching!",
  "BookingReminder.Title": "Your booking for {listingTitle} is approaching!"
}

Preview your changes

Once we have created the email notification, we can preview them with Sharetribe CLI. To preview the changes we just made, we can run the command:

flex-cli notifications preview --template biketribe-instant-booking/templates/booking-reminder-customer --marketplace=biketribe-dev

You should see the HTML preview of the template in the address http://localhost:3535. If you make any changes to the template, you can refresh the browser to reload the template and render a new preview

You can also test sending the preview email:

flex-cli notifications send --template biketribe-instant-booking/templates/booking-reminder-customer --marketplace=biketribe-dev

You can also modify the email texts in the Console email text editor, and then use these same preview functionalities to see your no-code changes.

Update process.edn

Once we have the new notification files in place, we need to add the notification to the process.edn file. In the process.edn file, all the notifications are added under the :notifications key. We can use the booking-confirmed-customer notification as an example.

The :name of the notification should be unique, so we use the name booking-reminder-customer. We want this notification to be sent to the customer as well, so the :to parameter stays the same. We also want to make sure that the value of :template is the same as the directory we created earlier.

We want this notification to be sent two days before the booking starts. One way to do this would be to add a new automatic transition two days before the booking start date, and send this notification on the . Instead, we will use the same confirm-payment transition as in booking-confirmed-customer, but add an :at parameter, where we can specify the sending time more specifically.

 :notifications
  [{:name :notification/booking-confirmed-customer,
   :on :transition/confirm-payment,
   :to :actor.role/customer,
   :template :booking-confirmed-customer}
+ {:name :notification/booking-reminder-customer
+  :on :transition/confirm-payment,
+  :to :actor.role/customer
+  :template :booking-reminder-customer
+  :at {:fn/minus
+       [{:fn/timepoint [:time/booking-start]}
+        {:fn/period ["P2D"]}]}}
...

Push process changes

Now that you have edited the email templates, you need to push a new version of your process. If you have done the earlier parts of the tutorial, this process should be already quite familiar to you. If you need more detailed information, take a look at the Edit transaction process with Sharetribe CLI tutorial.

Push the updated process:

flex-cli process push --process=biketribe-instant-booking --path=./biketribe-instant-booking --marketplace=biketribe-dev

Check version number with process list command:

flex-cli process list --process=biketribe-instant-booking --marketplace=biketribe-dev

Update the alias to point to the latest version of the transaction process:

flex-cli process update-alias --alias=release-1 --process=biketribe-instant-booking --version=3 --marketplace=biketribe-dev

Summary

In this tutorial, you:

  • Created a new email template folder
  • Previewed your email template
  • Added a new email notification to the transaction process
  • Updated the transaction process

Can't find what you're looking for?

Reach out to our support team by email, or consult the Sharetribe Developer Community at Sharetribe Developers Slack Channel. You can also contact our support team through the chat widget in Flex Console.

‹ Previous