diff --git a/dynamic-templates/README.md b/dynamic-templates/README.md new file mode 100644 index 0000000..b717d51 --- /dev/null +++ b/dynamic-templates/README.md @@ -0,0 +1,29 @@ +Welcome to dynamic template examples! For more information about how to send with a dynamic template, check out [the documentation](https://sendgrid.com/docs/User_Guide/Transactional_Templates/Using_handlebars.html) + +## Using these examples + +Each folder contains one HTML file and one or more examples of JSON data. Paste the HTML and JSON data into your account for easy use. Use the HTML in the CODE section, and use the JSON in the TEST DATA section. + +## Basic Examples + +These examples make use of the basic helpers. Use these to get started with handlebars quickly. + +### Transactional request + +Use this example for transactional email - like password resets or account activations. + +### Different Languages + +Use this example if you want to have one email template that dynamically updates based on the language of the recipient. This template shows how you can have a single email with content in multiple languages. + +### Newsletter + +Use this example to create a newsletter. It automatically creates the correct formatting for each story you want to share. + +### Receipt + +This is an example receipt. It can automatically adjust based on the number of items bought. It also has a place for the customers delivery address. + +### Special Sale + +This is a sales email. It is best for advertising groups of items that are for sale rather than individual items. diff --git a/dynamic-templates/different-languages/different_languages.html b/dynamic-templates/different-languages/different_languages.html new file mode 100644 index 0000000..b302b5a --- /dev/null +++ b/dynamic-templates/different-languages/different_languages.html @@ -0,0 +1,342 @@ + + + + + + + + + + + + + + + +
+
+ + + + +
+ + + + +
+ + + + +
+ + + + + +
+ + + + + + + + + + + +
+ +
+ +{{#if english}} + + + + +
+
+

This content can be presented in multiple languages. This current example is in English language.

+

 

+

How much wood could a woodchuck chuck

+

If a woodchuck could chuck wood?

+

As much wood as a woodchuck could chuck,

+

If a woodchuck could chuck wood.

+
+
+{{else if spanish}} + + + + +
+
+

Este contenido puede presentarse en varios idiomas. Este ejemplo actual está en lenguaje Spanish.

+

 

+

¿Cuánta madera podría hacer una marmota

+

Si una marmota podría tirar madera?

+

Tanta madera como una marmota podría arrojar,

+

Si una marmota pudiera tirar madera.

+
+
+{{else if french}} + + + + +
+
+

Ce contenu peut être présenté dans plusieurs langues. Cet exemple actuel est en langage French.

+

 

+

Quelle quantité de bois peut avoir un mandrin de marmotte

+

Si une marmotte pouvait jeter du bois?

+

Autant de bois qu'une marmotte pourrait jeter,

+

Si une marmotte pouvait jeter du bois.

+
+
+{{/if}} + + + + + +
+ + + + +
+
+ + + + + + +
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt elementum sem.
+
+ + + + + + + +
+ + + + + + + + + + + +
+ + Facebook + + + + Twitter + + + + Instagram + + + + Google + + + + Pinterest + +
+
+ +

[Sender_Name]

[Sender_Address], [Sender_City], [Sender_State] [Sender_Zip]

Unsubscribe - Unsubscribe Preferences

+ + +
+ +
+
+
+
+
+ + \ No newline at end of file diff --git a/dynamic-templates/different-languages/different_languages_data_english.json b/dynamic-templates/different-languages/different_languages_data_english.json new file mode 100644 index 0000000..9933cba --- /dev/null +++ b/dynamic-templates/different-languages/different_languages_data_english.json @@ -0,0 +1,3 @@ +{ + "english":true +} \ No newline at end of file diff --git a/dynamic-templates/different-languages/different_languages_data_french.json b/dynamic-templates/different-languages/different_languages_data_french.json new file mode 100644 index 0000000..4eddc48 --- /dev/null +++ b/dynamic-templates/different-languages/different_languages_data_french.json @@ -0,0 +1,3 @@ +{ + "french":true +} \ No newline at end of file diff --git a/dynamic-templates/different-languages/different_languages_data_spanish.json b/dynamic-templates/different-languages/different_languages_data_spanish.json new file mode 100644 index 0000000..76bcba3 --- /dev/null +++ b/dynamic-templates/different-languages/different_languages_data_spanish.json @@ -0,0 +1,3 @@ +{ + "spanish":true +} \ No newline at end of file diff --git a/dynamic-templates/newsletter/news_feed.html b/dynamic-templates/newsletter/news_feed.html new file mode 100644 index 0000000..cf70769 --- /dev/null +++ b/dynamic-templates/newsletter/news_feed.html @@ -0,0 +1,406 @@ + + + + + + + + + + + + + + + +
+
+ + + + +
+ + + + +
+ + + + +
+ + + + + +
+ + + + + + + + + + + +
+ +
+ + + + + +
+

News Feed

+ +
+ +{{#each news}} + + + + +
+

{{article}}

+ +
+ + + + + +
+ + + + + + + + +
+ + + + + +
+ +
+ +
+ + + + + + + + +
+ + + + + +
+
{{text}}
+
+ +
+ + + +
+
{{c2a_button}}
+ + + + +
+ + + + +
+
+{{/each}} + + + + + + +
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt elementum sem.
+
+ + + + + + + +
+ + + + + + + + + + + +
+ + Facebook + + + + Twitter + + + + Instagram + + + + Google + + + + Pinterest + +
+
+ +

[Sender_Name]

[Sender_Address], [Sender_City], [Sender_State] [Sender_Zip]

Unsubscribe - Unsubscribe Preferences

+ + +
+ +
+
+
+
+
+ + \ No newline at end of file diff --git a/dynamic-templates/newsletter/news_feed_data.json b/dynamic-templates/newsletter/news_feed_data.json new file mode 100644 index 0000000..429120d --- /dev/null +++ b/dynamic-templates/newsletter/news_feed_data.json @@ -0,0 +1,9 @@ +{ + "news":[{"article":"First News Story","image":"https://marketing-image-production.s3.amazonaws.com/uploads/d13f90f1285040cd12f86d57ab9e61fee852def9f17e9d65c7a875b213c0fc414235679aa4016327adad5e78758cd9d131db32da4385e226d43fe01cfcd273eb.png","text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt elementum sem non luctus. Ut dolor nisl, facilisis non magna quis, elementum ultricies tortor. In mattis, purus ut tincidunt egestas, ligula nulla accumsan justo, vitae bibendum orci ligula id ipsum. Nunc elementum tincidunt libero, in ullamcorper magna volutpat a.","c2a_link":"","c2a_button":"Read Story" +} +,{ + "article":"Second News Story","image":"https://marketing-image-production.s3.amazonaws.com/uploads/d13f90f1285040cd12f86d57ab9e61fee852def9f17e9d65c7a875b213c0fc414235679aa4016327adad5e78758cd9d131db32da4385e226d43fe01cfcd273eb.png","text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt elementum sem non luctus. Ut dolor nisl, facilisis non magna quis, elementum ultricies tortor. In mattis, purus ut tincidunt egestas, ligula nulla accumsan justo, vitae bibendum orci ligula id ipsum. Nunc elementum tincidunt libero, in ullamcorper magna volutpat a.","c2a_link":"","c2a_button":"Read Story" +} +,{ + "article":"Third News Story","image":"https://marketing-image-production.s3.amazonaws.com/uploads/d13f90f1285040cd12f86d57ab9e61fee852def9f17e9d65c7a875b213c0fc414235679aa4016327adad5e78758cd9d131db32da4385e226d43fe01cfcd273eb.png","text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt elementum sem non luctus. Ut dolor nisl, facilisis non magna quis, elementum ultricies tortor. In mattis, purus ut tincidunt egestas, ligula nulla accumsan justo, vitae bibendum orci ligula id ipsum. Nunc elementum tincidunt libero, in ullamcorper magna volutpat a.","c2a_link":"","c2a_button":"Read Story"}] +} \ No newline at end of file diff --git a/dynamic-templates/receipt/receipt.html b/dynamic-templates/receipt/receipt.html new file mode 100644 index 0000000..4b35105 --- /dev/null +++ b/dynamic-templates/receipt/receipt.html @@ -0,0 +1,400 @@ + + + + + + + + + + + + + + + +
+
+ + + + +
+ + + + +
+ + + + +
+ + + + + +
+ + + + + + + + + + + +
+ +
+ + + + {{#if receipt}} + + + + + +
+

Receipt

+
+ + + + +
+
+ + + + {{#each items}} + + + + + + + + {{/each}} + + + + + + + + + + + + + + + + + +
{{this.text}}
{{this.price}}
   
 
Total
{{total}}
   
+ +
+
+ + + + +
+ + + + +
+
+ + {{/if}} + + + + + +
+

Delivery Address

+ +
+ + + + + +
+
{{name}}
+ +
{{address01}}
+ +
{{address02}}
+ +
{{city}}, {{state}} {{zip}}
+ +
+ + + + + +
+ + + + +
+
+ + + + + +
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt elementum sem.
+
+ + + + + + + +
+ + + + + + + + + + + +
+ + Facebook + + + + Twitter + + + + Instagram + + + + Google + + + + Pinterest + +
+
+ +

[Sender_Name]

[Sender_Address], [Sender_City], [Sender_State] [Sender_Zip]

Unsubscribe - Unsubscribe Preferences

+ +
+ +
+
+
+
+
+ + \ No newline at end of file diff --git a/dynamic-templates/receipt/receipt_data.json b/dynamic-templates/receipt/receipt_data.json new file mode 100644 index 0000000..53339cb --- /dev/null +++ b/dynamic-templates/receipt/receipt_data.json @@ -0,0 +1,9 @@ +{ + "total":"$ 239.85","items":[{"text":"New Line Sneakers","image":"https://marketing-image-production.s3.amazonaws.com/uploads/8dda1131320a6d978b515cc04ed479df259a458d5d45d58b6b381cae0bf9588113e80ef912f69e8c4cc1ef1a0297e8eefdb7b270064cc046b79a44e21b811802.png","price":"$ 79.95" +} +,{ + "text":"Old Line Sneakers","image":"https://marketing-image-production.s3.amazonaws.com/uploads/3629f54390ead663d4eb7c53702e492de63299d7c5f7239efdc693b09b9b28c82c924225dcd8dcb65732d5ca7b7b753c5f17e056405bbd4596e4e63a96ae5018.png","price":"$ 79.95" +} +,{ + "text":"Blue Line Sneakers","image":"https://marketing-image-production.s3.amazonaws.com/uploads/00731ed18eff0ad5da890d876c456c3124a4e44cb48196533e9b95fb2b959b7194c2dc7637b788341d1ff4f88d1dc88e23f7e3704726d313c57f350911dd2bd0.png","price":"$ 79.95"}],"receipt":true,"name":"Sample Name","address01":"1234 Fake St.","address02":"Apt. 123","city":"Place","state":"CO","zip":"80202" +} \ No newline at end of file diff --git a/dynamic-templates/special-sale/special_sale.html b/dynamic-templates/special-sale/special_sale.html new file mode 100644 index 0000000..7b6ee91 --- /dev/null +++ b/dynamic-templates/special-sale/special_sale.html @@ -0,0 +1,648 @@ + + + + + + + + + + + + + + + +
+
+ + + + +
+ + + + +
+ + + + +
+ + + + + +
+ + + + + + + + + + + +
+ +
+ + {{#each user.w_deal}} + {{#if this.deal01}} + + + + +
+
{{this.header}}
+
+ + + + + +
+ +
+ + + + + +
+
{{this.text}}
+
+
{{this.c2a_button}}
+ + + + +
+ + + + +
+
+ {{else if this.deal02}} + + + + +
+

{{this.header}}

+
+ + + + + +
+ + + + + + + + +
+ + + + + +
+ +
+ +
+ + + + + + + + +
+ + + + + +
+ +
+ +
+ + + + + + + + +
+ + + + + +
+ +
+ +
+ + + +
+ + + + + +
+ + + + + + + + +
+ + + + + +
+ +
+ +
+ + + + + + + + +
+ + + + + +
+ +
+ +
+ + + +
+ + + + + +
+
{{this.text}}
+
+
{{this.c2a_button}}
+ + + + +
+ + + + +
+
+ {{else if this.deal03}} + + + + +
+

{{this.header}}

+
+ + + + + +
+ +
+ + + + + +
+
{{this.text}}
+
+
{{this.c2a_button}}
+ + + + +
+ + + + +
+
+ {{/if}} + {{/each}} + + + + + + +
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt elementum sem.
+
+ + + + + + + +
+ + + + + + + + + + + +
+ + Facebook + + + + Twitter + + + + Instagram + + + + Google + + + + Pinterest + +
+
+ +

[Sender_Name]

[Sender_Address], [Sender_City], [Sender_State] [Sender_Zip]

Unsubscribe - Unsubscribe Preferences

+ + +
+ +
+
+
+
+
+ + \ No newline at end of file diff --git a/dynamic-templates/special-sale/special_sale_data.json b/dynamic-templates/special-sale/special_sale_data.json new file mode 100644 index 0000000..2832133 --- /dev/null +++ b/dynamic-templates/special-sale/special_sale_data.json @@ -0,0 +1,10 @@ +{ + "user":{ + "w_deal":[{"image01":"https://marketing-image-production.s3.amazonaws.com/uploads/d07758f089b2d998dd72e34d160c75e0a225a9a5bbfa1a7d3c77cdb79a776f3383eac8029c0222211178b488c377d35e575c150c801429029d8a436f4659ed75.png","text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt elementum sem non luctus. Ut dolor nisl, facilisis non magna quis.","header":"WEEKLY DEALS","c2a_link":"","deal01":true,"c2a_button":"Call to Action" + } + ,{ + "image01":"https://marketing-image-production.s3.amazonaws.com/uploads/3629f54390ead663d4eb7c53702e492de63299d7c5f7239efdc693b09b9b28c82c924225dcd8dcb65732d5ca7b7b753c5f17e056405bbd4596e4e63a96ae5018.png","image02":"https://marketing-image-production.s3.amazonaws.com/uploads/8dda1131320a6d978b515cc04ed479df259a458d5d45d58b6b381cae0bf9588113e80ef912f69e8c4cc1ef1a0297e8eefdb7b270064cc046b79a44e21b811802.png","image03":"https://marketing-image-production.s3.amazonaws.com/uploads/00731ed18eff0ad5da890d876c456c3124a4e44cb48196533e9b95fb2b959b7194c2dc7637b788341d1ff4f88d1dc88e23f7e3704726d313c57f350911dd2bd0.png","image04":"https://marketing-image-production.s3.amazonaws.com/uploads/0c1d509fc4341821e53b56defb99abca6dcb5294c9e05b58166946f8b88c0388cb613aeb6dbfe73944c4ed66cb7fe7fde0f01d533287b513b9fd940b1d7e3b0b.png","image05":"https://marketing-image-production.s3.amazonaws.com/uploads/8b13c419668b6a2d05e9bad5f1937258ef1b04bababb60976bed47f1ac86931fd799f5ac48ca93878ee513f31f653b7d2e29d044c6c7809aefb8c0e6ebf20286.png","text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt elementum sem non luctus. Ut dolor nisl, facilisis non magna quis.","header":"Sneaker Styles","c2a_link":"","deal02":true,"c2a_button":"Call to Action" + } + ,{ + "image01":"https://marketing-image-production.s3.amazonaws.com/uploads/d13f90f1285040cd12f86d57ab9e61fee852def9f17e9d65c7a875b213c0fc414235679aa4016327adad5e78758cd9d131db32da4385e226d43fe01cfcd273eb.png","c2a_button":"Call to Action","text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt elementum sem non luctus. Ut dolor nisl, facilisis non magna quis.","header":"Accessories","c2a_link":"","deal03":true}]} + } \ No newline at end of file diff --git a/dynamic-templates/transactional-actions/activate_account_data.json b/dynamic-templates/transactional-actions/activate_account_data.json new file mode 100644 index 0000000..1bd6ecc --- /dev/null +++ b/dynamic-templates/transactional-actions/activate_account_data.json @@ -0,0 +1,3 @@ +{ + "header":"Activate Account","text":"Your almost there. To finish activating your account please click the link below.","c2a_link":"","c2a_button":"Activate Account" +} \ No newline at end of file diff --git a/dynamic-templates/transactional-actions/call_to_action.html b/dynamic-templates/transactional-actions/call_to_action.html new file mode 100644 index 0000000..02f7ee3 --- /dev/null +++ b/dynamic-templates/transactional-actions/call_to_action.html @@ -0,0 +1,308 @@ + + + + + + + + + + + + + + + +
+
+ + + + +
+ + + + +
+ + + + +
+ + + + + +
+ + + + + + + + + + + +
+ +
+ + + + + +
+
{{header}}
+
+ + + + + +
+
{{text}}
+
+
{{c2a_button}}
+ + + + +
+ + + + +
+
+ + + + + + +
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt elementum sem.
+
+ + + + + + + +
+ + + + + + + + + + + +
+ + Facebook + + + + Twitter + + + + Instagram + + + + Google + + + + Pinterest + +
+
+ +

[Sender_Name]

[Sender_Address], [Sender_City], [Sender_State] [Sender_Zip]

Unsubscribe - Unsubscribe Preferences

+ + +
+ +
+
+
+
+
+ + \ No newline at end of file diff --git a/dynamic-templates/transactional-actions/password_reset_data.json b/dynamic-templates/transactional-actions/password_reset_data.json new file mode 100644 index 0000000..b0d2616 --- /dev/null +++ b/dynamic-templates/transactional-actions/password_reset_data.json @@ -0,0 +1,3 @@ +{ + "header":"Password Reset","text":"You requested a password reset. Please use the button below to continue the process.","c2a_link":"","c2a_button":"Reset Password" +} \ No newline at end of file