Downloading templates
⚠️ Downloading templates is only available as opt-in feature for paid plans. Contact support for access.
For cases where data is highly sensitive (eg. HIPAA compliance), some teams choose to use Waypoint's template builder to create the template but not send the email through the API. In these cases, teams can download their raw template with LiquidJS templating to run and send from within their own application.
Teams can also download a finalized HTML preview using the test data in the builder.
Downloading a raw LiquidJS template
GET /v1/templates/TEMPLATE_ID/raw
Query params:
| Property | Description |
|---|---|
| TEMPLATE_ID | The id of the Waypoint template. |
Successful response:
| Property | Description |
|---|---|
| ID | The template ID. |
| type | The type of the template. |
| createdAt | Timestamp of when the template was created. |
| updatedAt | Timestamp of when the template was last updated. |
| rawSubject | The subject line of the email with LiquidJS templating. |
| rawBodyHtml | The HTML body of the email with LiquidJS templating. |
Code examples
curl "https://live.waypointapi.com/v1/templates/wptemplate_qzJuYidNgPYNoba6/raw" \ -H "Content-Type: application/json" \ -u "API_KEY_USERNAME:API_KEY_PASSWORD"
Response
{"data":{"id":"wptemplate_qzJuYidNgPYNoba6","type":"Template","createdAt":"2023-11-28T14:42:09.867Z","updatedAt":"2023-12-04T18:32:48.547Z","rawSubject":"{{user.displayName}}, you got {{report.metric.value | downcase}} {{report.metric.title | downcase}} {{report.duration | downcase}}","rawBodyHtml":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html lang=\"en\" dir=\"ltr\" style=\"-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; -webkit-text-size-adjust: 100%;\">\n\n <head>\n <meta http-equiv=\"Content-Type\" content=\"text/html charset=UTF-8\">\n <style data-emotion=\"css-global o6gwfi\">\n@media print {\n body {\n background-color: #fff;\n }\n}\n</style>\n <style>\n@media screen and (max-width: 599.95px) {\n .block-mobile {\n display: block !important;\n }\n\n .block-desktop {\n display: none !important;\n }\n}\n</style>\n </head>\n\n <body style=\"box-sizing: inherit; margin: 0; color: rgba(0, 0, 0, 0.87); font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; letter-spacing: 0.00938em; background-color: #EEEEEE;\">\n \n <div class=\"MuiBox-root css-b5fgh5\" style=\"box-sizing: inherit; font-weight: 400; font-size: 16px; padding: 32px 0; margin: 0; letter-spacing: 0.15008px; line-height: 1.5; background-color: #EEEEEE; font-family: 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif; color: #242424;\">\n <div id=\"__react-email-preview\" style=\"box-sizing: inherit; display: none; overflow: hidden; line-height: 1px; opacity: 0; max-height: 0; max-width: 0;\">Plus your top performing post {{report.duration | downcase}}.<div style=\"box-sizing: inherit;\"> </div>\n </div>\n <table align=\"center\" width=\"100%\" style=\"box-sizing: inherit; background-color: #FFFFFF; max-width: 600px; min-height: 48px;\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" bgcolor=\"#FFFFFF\">\n <tbody style=\"box-sizing: inherit;\">\n <tr style=\"box-sizing: inherit; width: 100%;\">\n <td style=\"box-sizing: inherit;\">\n <div style=\"font-family: inherit; font-size: 16px; font-weight: normal; padding: 24px 24px 24px 24px; text-align: left; max-width: 100%; box-sizing: border-box;\">\n <div class style=\"box-sizing: inherit;\">\n <table align=\"center\" width=\"100%\" cellpadding=\"0\" border=\"0\" style=\"box-sizing: inherit; table-layout: fixed; border-collapse: collapse;\">\n <tbody style=\"box-sizing: inherit; width: 100%;\">\n <tr style=\"box-sizing: inherit; width: 100%;\">\n <td style=\"box-sizing: content-box; vertical-align: middle; text-align: left; width: 50%; padding-left: 0; padding-right: 8px;\" width=\"50%\" valign=\"middle\" align=\"left\">\n <div style=\"font-family: inherit; font-size: 16px; font-weight: normal; padding: 0px 0px 0px 0px; text-align: left; max-width: 100%; box-sizing: border-box;\">\n <div style=\"padding: 0px 0px 0px 0px; text-align: left; max-width: 100%; box-sizing: border-box;\"><img alt src=\"https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_n3eLjsf37dcjFaj5/Narrative.png\" style=\"box-sizing: inherit; display: block; outline: none; border: none; text-decoration: none;\"></div>\n </div>\n </td>\n <td style=\"box-sizing: content-box; vertical-align: middle; text-align: left; width: 50%; padding-left: 8px; padding-right: 0;\" width=\"50%\" valign=\"middle\" align=\"left\">\n <div style=\"font-family: inherit; font-size: 16px; font-weight: normal; padding: 0px 0px 0px 0px; text-align: left; max-width: 100%; box-sizing: border-box;\">\n <div style=\"font-family: inherit; font-weight: normal; padding: 0px 0px 0px 0px; text-align: right; max-width: 100%; box-sizing: border-box;\"><img src=\"{{user.avatarUrl}}\" alt=\"{{user.displayName}}\" style=\"box-sizing: inherit; display: inline-block; object-fit: cover; height: 32px; width: 32px; max-width: 100%; vertical-align: middle; text-align: center; border-radius: 32px;\" width=\"32\" height=\"32\"></div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <div style=\"font-family: inherit; font-weight: bold; padding: 24px 24px 0px 24px; text-align: center; max-width: 100%; box-sizing: border-box;\">\n <h3 style=\"box-sizing: inherit; margin-top: 40px; margin-bottom: 16px; font-weight: inherit; font-size: 20px; margin: inherit;\">{{report.duration}}, your posts received</h3>\n </div>\n <div style=\"font-family: inherit; font-size: 48px; font-weight: bold; padding: 16px 24px 0px 24px; text-align: center; max-width: 100%; box-sizing: border-box;\">\n \n <div class=\"MuiBox-root css-vii0ua\" style=\"box-sizing: inherit;\">\n <div style=\"box-sizing: inherit;\">\n <p style=\"box-sizing: inherit; margin-top: 0px; margin-bottom: 0px;\">{{report.metric.value}}</p>\n </div>\n </div>\n </div>\n <div style=\"font-family: inherit; font-size: 14px; font-weight: bold; padding: 0px 24px 16px 24px; text-align: center; max-width: 100%; box-sizing: border-box;\">\n <div class=\"MuiBox-root css-vii0ua\" style=\"box-sizing: inherit;\">\n <div style=\"box-sizing: inherit;\">\n <p style=\"box-sizing: inherit; margin-top: 0px; margin-bottom: 0px;\">{{report.metric.title}}</p>\n </div>\n </div>\n </div>\n <div style=\"font-family: inherit; font-size: 16px; font-weight: bold; padding: 16px 24px 40px 24px; text-align: center; max-width: 100%; box-sizing: border-box;\"><a href=\"https://narrative.example.com/{{user.username}}/analytics\" style=\"box-sizing: inherit; color: #24AF7F; background-color: #24AF7F; padding: 0; border-radius: 4px; width: auto; display: inline-block; text-decoration: none; max-width: 100%; line-height: 100%;\"><span style=\"box-sizing: inherit; color: #FFFFFF; padding: 12px 20px; width: 100%; display: inline-block; max-width: 100%; line-height: 120%; text-decoration: none; text-transform: none;\">View your analytics →</span></a></div>\n <div style=\"font-family: inherit; font-weight: bold; padding: 24px 24px 8px 24px; text-align: center; max-width: 100%; box-sizing: border-box;\">\n <h3 style=\"box-sizing: inherit; margin-top: 40px; margin-bottom: 16px; font-weight: inherit; font-size: 20px; margin: inherit;\">Top performing post {{report.duration | downcase}}</h3>\n </div>\n <div style=\"font-family: inherit; font-size: 16px; font-weight: normal; padding: 16px 24px 16px 24px; text-align: left; max-width: 100%; box-sizing: border-box;\">\n <div style=\"border: 1px solid #d0d0d0; border-radius: 8px; font-family: inherit; font-size: 16px; font-weight: normal; padding: 24px 24px 24px 24px; text-align: left; max-width: 100%; box-sizing: border-box;\">\n <div style=\"font-family: inherit; font-size: 16px; font-weight: normal; padding: 0px 0px 0px 0px; text-align: left; max-width: 100%; box-sizing: border-box;\">\n <div class=\"MuiBox-root css-vii0ua\" style=\"box-sizing: inherit;\">\n <div style=\"box-sizing: inherit;\">\n <p style=\"box-sizing: inherit; margin-top: 0px; margin-bottom: 0px;\">{{report.topPerformingPost}}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div style=\"font-family: inherit; font-size: 16px; font-weight: bold; padding: 16px 24px 16px 24px; text-align: center; max-width: 100%; box-sizing: border-box;\"><a href=\"https://narrative.example.com/{{user.username}}/posts\" style=\"box-sizing: inherit; color: #24AF7F; background-color: #EEEEEE; padding: 0; border-radius: 4px; width: auto; display: inline-block; text-decoration: none; max-width: 100%; line-height: 100%;\"><span style=\"box-sizing: inherit; color: #000000; padding: 12px 20px; width: 100%; display: inline-block; max-width: 100%; line-height: 120%; text-decoration: none; text-transform: none;\">Show more</span></a></div>\n <div style=\"padding: 40px 0px 0px 0px; max-width: 100%; box-sizing: border-box;\">\n <hr style=\"box-sizing: inherit; margin: 0px; width: 100%; border: none; border-top: 1px solid #eaeaea; border-color: rgb(233, 233, 233); border-top-width: 1px;\">\n </div>\n <div style=\"color: #474849; font-family: inherit; font-size: 12px; font-weight: normal; padding: 24px 24px 24px 24px; text-align: center; max-width: 100%; box-sizing: border-box;\">\n <div class=\"MuiBox-root css-vii0ua\" style=\"box-sizing: inherit;\">\n <div style=\"box-sizing: inherit;\">\n <p style=\"box-sizing: inherit; margin-top: 0px; margin-bottom: 0px;\">Questions? Just reply to this email.</p>\n </div>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </body>\n\n</html>"}}
Downloading a finalized HTML template
GET /v1/templates/TEMPLATE_ID/preview
Query params:
| Property | Description |
|---|---|
| TEMPLATE_ID | The id of the Waypoint template. |
Successful response:
| Property | Description |
|---|---|
| ID | The template ID. |
| type | The type of the template. |
| createdAt | Timestamp of when the template was created. |
| updatedAt | Timestamp of when the template was last updated. |
| bodyHtml | The HTML body of the email with LiquidJS templating. |
Code examples
curl "https://live.waypointapi.com/v1/templates/wptemplate_qzJuYidNgPYNoba6/preview" \ -H "Content-Type: application/json" \ -u "API_KEY_USERNAME:API_KEY_PASSWORD"
Response
{"data":{"id":"wptemplate_qzJuYidNgPYNoba6","type":"Template","createdAt":"2023-11-28T14:42:09.867Z","updatedAt":"2023-12-04T18:32:48.547Z","bodyHtml":"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html lang=\"en\" dir=\"ltr\" style=\"-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; -webkit-text-size-adjust: 100%;\">\n\n <head>\n <meta http-equiv=\"Content-Type\" content=\"text/html charset=UTF-8\">\n <style data-emotion=\"css-global o6gwfi\">\n@media print {\n body {\n background-color: #fff;\n }\n}\n</style>\n <style>\n@media screen and (max-width: 599.95px) {\n .block-mobile {\n display: block !important;\n }\n\n .block-desktop {\n display: none !important;\n }\n}\n</style>\n </head>\n\n <body style=\"box-sizing: inherit; margin: 0; color: rgba(0, 0, 0, 0.87); font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.5; letter-spacing: 0.00938em; background-color: #EEEEEE;\">\n \n <div class=\"MuiBox-root css-b5fgh5\" style=\"box-sizing: inherit; font-weight: 400; font-size: 16px; padding: 32px 0; margin: 0; letter-spacing: 0.15008px; line-height: 1.5; background-color: #EEEEEE; font-family: 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif; color: #242424;\">\n <div id=\"__react-email-preview\" style=\"box-sizing: inherit; display: none; overflow: hidden; line-height: 1px; opacity: 0; max-height: 0; max-width: 0;\">Plus your top performing post last week.<div style=\"box-sizing: inherit;\"> </div>\n </div>\n <table align=\"center\" width=\"100%\" style=\"box-sizing: inherit; background-color: #FFFFFF; max-width: 600px; min-height: 48px;\" role=\"presentation\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" bgcolor=\"#FFFFFF\">\n <tbody style=\"box-sizing: inherit;\">\n <tr style=\"box-sizing: inherit; width: 100%;\">\n <td style=\"box-sizing: inherit;\">\n <div style=\"font-family: inherit; font-size: 16px; font-weight: normal; padding: 24px 24px 24px 24px; text-align: left; max-width: 100%; box-sizing: border-box;\">\n <div class style=\"box-sizing: inherit;\">\n <table align=\"center\" width=\"100%\" cellpadding=\"0\" border=\"0\" style=\"box-sizing: inherit; table-layout: fixed; border-collapse: collapse;\">\n <tbody style=\"box-sizing: inherit; width: 100%;\">\n <tr style=\"box-sizing: inherit; width: 100%;\">\n <td style=\"box-sizing: content-box; vertical-align: middle; text-align: left; width: 50%; padding-left: 0; padding-right: 8px;\" width=\"50%\" valign=\"middle\" align=\"left\">\n <div style=\"font-family: inherit; font-size: 16px; font-weight: normal; padding: 0px 0px 0px 0px; text-align: left; max-width: 100%; box-sizing: border-box;\">\n <div style=\"padding: 0px 0px 0px 0px; text-align: left; max-width: 100%; box-sizing: border-box;\"><img src=\"https://d1iiu589g39o6c.cloudfront.net/live/platforms/platform_A9wwKSL6EV6orh6f/images/wptemplateimage_n3eLjsf37dcjFaj5/Narrative.png\" style=\"box-sizing: inherit; display: inline-block; outline: none; border: none; text-decoration: none; vertical-align: middle; max-width: 100%; height: 16px;\" height=\"16\"></div>\n </div>\n </td>\n <td style=\"box-sizing: content-box; vertical-align: middle; text-align: left; width: 50%; padding-left: 8px; padding-right: 0;\" width=\"50%\" valign=\"middle\" align=\"left\">\n <div style=\"font-family: inherit; font-size: 16px; font-weight: normal; padding: 0px 0px 0px 0px; text-align: left; max-width: 100%; box-sizing: border-box;\">\n <div style=\"font-family: inherit; font-weight: normal; padding: 0px 0px 0px 0px; text-align: right; max-width: 100%; box-sizing: border-box;\"><img alt=\"Jordan\" src=\"https://d1iiu589g39o6c.cloudfront.net/avatars?color=FFFFFF&name=JO&background=24AF7F&size=32&rounded=true\" style=\"box-sizing: inherit; display: inline-block; outline: none; border: none; text-decoration: none; vertical-align: middle; text-align: center; max-width: 100%;\"></div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n <div style=\"font-family: inherit; font-weight: bold; padding: 24px 24px 0px 24px; text-align: center; max-width: 100%; box-sizing: border-box;\">\n <h3 style=\"box-sizing: inherit; margin-top: 40px; margin-bottom: 16px; font-weight: inherit; margin: 0; font-size: 20px;\">Last week, your posts received</h3>\n </div>\n <div style=\"font-family: inherit; font-size: 48px; font-weight: bold; padding: 16px 24px 0px 24px; text-align: center; max-width: 100%; box-sizing: border-box;\">\n \n <div class=\"MuiBox-root css-vii0ua\" style=\"box-sizing: inherit;\">\n <div style=\"box-sizing: inherit;\">\n <p style=\"box-sizing: inherit; margin-top: 0px; margin-bottom: 0px;\">1,511</p>\n </div>\n </div>\n </div>\n <div style=\"font-family: inherit; font-size: 14px; font-weight: bold; padding: 0px 24px 16px 24px; text-align: center; max-width: 100%; box-sizing: border-box;\">\n <div class=\"MuiBox-root css-vii0ua\" style=\"box-sizing: inherit;\">\n <div style=\"box-sizing: inherit;\">\n <p style=\"box-sizing: inherit; margin-top: 0px; margin-bottom: 0px;\">Post impressions</p>\n </div>\n </div>\n </div>\n <div style=\"font-family: inherit; font-size: 16px; font-weight: bold; padding: 16px 24px 40px 24px; text-align: center; max-width: 100%; box-sizing: border-box;\"><a href=\"https://narrative.example.com/jordanisip/analytics\" target=\"_blank\" style=\"box-sizing: inherit; background-color: #24AF7F; color: #FFFFFF; padding: 0px 0px; border-radius: 4px; width: auto; display: inline-block; line-height: 100%; text-decoration: none; max-width: 100%;\"><span style=\"box-sizing: inherit;\"><!--[if mso]><i style=\"letter-spacing: undefinedpx;mso-font-width:-100%;mso-text-raise:0\" hidden> </i><![endif]--></span><span style=\"box-sizing: inherit; background-color: #24AF7F; color: #FFFFFF; padding: 12px 20px; border-radius: 4px; width: auto; display: inline-block; max-width: 100%; line-height: 120%; text-decoration: none; text-transform: none; mso-padding-alt: 0px; mso-text-raise: 0;\">View your analytics →</span><span style=\"box-sizing: inherit;\"><!--[if mso]><i style=\"letter-spacing: undefinedpx;mso-font-width:-100%\" hidden> </i><![endif]--></span></a></div>\n <div style=\"font-family: inherit; font-weight: bold; padding: 24px 24px 8px 24px; text-align: center; max-width: 100%; box-sizing: border-box;\">\n <h3 style=\"box-sizing: inherit; margin-top: 40px; margin-bottom: 16px; font-weight: inherit; margin: 0; font-size: 20px;\">Top performing post last week</h3>\n </div>\n <div style=\"font-family: inherit; font-size: 16px; font-weight: normal; padding: 16px 24px 16px 24px; text-align: left; max-width: 100%; box-sizing: border-box;\">\n <div style=\"border: 1px solid #d0d0d0; border-radius: 8px; font-family: inherit; font-size: 16px; font-weight: normal; padding: 24px 24px 24px 24px; text-align: left; max-width: 100%; box-sizing: border-box;\">\n <div style=\"font-family: inherit; font-size: 16px; font-weight: normal; padding: 0px 0px 0px 0px; text-align: left; max-width: 100%; box-sizing: border-box;\">\n <div class=\"MuiBox-root css-vii0ua\" style=\"box-sizing: inherit;\">\n <div style=\"box-sizing: inherit;\">\n <p style=\"box-sizing: inherit; margin-top: 0px; margin-bottom: 0px;\">So excited to now have drag and drop on Waypoint. This builds on top of our new Navigator feature that we shipped earlier this week 🚢.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div style=\"font-family: inherit; font-size: 16px; font-weight: bold; padding: 16px 24px 16px 24px; text-align: center; max-width: 100%; box-sizing: border-box;\"><a href=\"https://narrative.example.com/jordanisip/posts\" target=\"_blank\" style=\"box-sizing: inherit; background-color: #EEEEEE; color: #000000; padding: 0px 0px; border-radius: 4px; width: auto; display: inline-block; line-height: 100%; text-decoration: none; max-width: 100%;\"><span style=\"box-sizing: inherit;\"><!--[if mso]><i style=\"letter-spacing: undefinedpx;mso-font-width:-100%;mso-text-raise:0\" hidden> </i><![endif]--></span><span style=\"box-sizing: inherit; background-color: #EEEEEE; color: #000000; padding: 12px 20px; border-radius: 4px; width: auto; display: inline-block; max-width: 100%; line-height: 120%; text-decoration: none; text-transform: none; mso-padding-alt: 0px; mso-text-raise: 0;\">Show more</span><span style=\"box-sizing: inherit;\"><!--[if mso]><i style=\"letter-spacing: undefinedpx;mso-font-width:-100%\" hidden> </i><![endif]--></span></a></div>\n <div style=\"padding: 40px 0px 0px 0px; max-width: 100%; box-sizing: border-box;\">\n <hr style=\"box-sizing: inherit; margin: 0px; width: 100%; border: none; border-top: 1px solid #eaeaea; border-color: rgb(233, 233, 233); border-top-width: 1px;\">\n </div>\n <div style=\"color: #474849; font-family: inherit; font-size: 12px; font-weight: normal; padding: 24px 24px 24px 24px; text-align: center; max-width: 100%; box-sizing: border-box;\">\n <div class=\"MuiBox-root css-vii0ua\" style=\"box-sizing: inherit;\">\n <div style=\"box-sizing: inherit;\">\n <p style=\"box-sizing: inherit; margin-top: 0px; margin-bottom: 0px;\">Questions? Just reply to this email.</p>\n </div>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </body>\n\n</html>"}}