How to Create Email Templates

These two videos will show you how to create universal email templates for your project.

For this to be of practical use, I suggest creating a separate NodeJS project in Wappler that can be used to create the template. The compiled file can then be copied to the respective project which does not have to be NodesJS based.

I hope this can be of use to you.

6 Likes

Hey @ben !

Thanks for the great videos!

Question for you. In the 2nd video towards the end, you remove the links to App Connect and Bootstrap.

I take this to mean that newsletter would not be dynamic in nature and would have to be recreated every time you had a newsletter with new dynamic content.

What I am looking at is utilizing this process to send out a monthly newsletter.

Additionally, will this work with the built-in Wappler mailer component? There’s an import file icon when you go to design the email, so I would assume that the complied file could be imported into the Wappler mailer.

Thanks again for the great video and detailed explanation!! :slight_smile:

1 Like

Hi @scott.

The email template can contain dynamic content. If you go to

slide 26 shows:

The dynamic content shown as {{$_POST.textarea1}} can be placed anywhere within the created email template.

As an illustration, here I have a template that the site’s administrator uses to send the newsletter.

To use the template, have a look at

Would be nice if one day within the Wappler UI an easy way to include repeat region (table data) for order confirmations etc.

3 Likes

Thanks @ben, I’ll check out the link you posted.

I did have a question regarding images. It looks like if the image is displayed on the email template, it is done using a relative link:

img src="/assets/site/email-verified.jpg"

This shows just fine in Wappler when viewing the document directly. However, when imported into the Mailer, it shows a broken link for the image.

I am sure there is an easy solution to this, it just escapes me at the moment.

Image links in email bodies need to be full links :slight_smile:

src="https://site.com/img/myimg.jpg"

Closely related is when i select the mail body >>file>>i get file does not exists!

That is what I was thinking initially.

Since I am working locally and have not pushed to the production/staging server, what I think I should do is set a global variable that can be easily switched between the two environments. For example, set it to the localhost when working locally and the change it to the production domain when publishing to the production server.

I am just not sure exactly how to accomplish that or if that would be the best way to do things.

To explain my setup, I have three environments.

  1. Local Docker
  2. Staging .info
  3. Production .org

So directly linking without using a variable could be burdensome.

If you have not uploaded the image(s), then just use the local link and change the link once the images have been uploaded.

I usually upload the images first so that I do not have to revise the links.