Downloading templates
In some cases, you may need to programatically 'download templates'. Common use cases:
- Keeping a copy of the raw template within your codebase.
- Using the raw or processed template to deliver the email through a separate service due to compliance constraints (eg. HIPAA).
- Preview a template within your own application before sending through Waypoint (eg. invoicing platform).
These can all be done through the following API requests.
⚠️ These template download API calls are only available as an opt-in feature on paid plans. Contact support for access.
Template preview (with custom data)
Download a preview of their template with custom data. Optionally pass in custom template data into the data object of the call. The response is the final HTML with data passed through the template.
POST /v1/templates/TEMPLATE_ID/preview
URL params:
| Property | Description |
|---|---|
| TEMPLATE_ID | The id of the Waypoint template. |
Code examples
const axios = require('axios'); axios({ method: "post", url: "https://live.waypointapi.com/v1/templates/wptemplate_qzJuYidNgPYNoba6/preview", headers: { "Content-Type": "application/json" }, auth: { username: API_KEY_USERNAME, password: API_KEY_PASSWORD }, data: { "passcode": "222222", "expiresIn": "1 minute" } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); })
curl "https://live.waypointapi.com/v1/templates/wptemplate_qzJuYidNgPYNoba6/preview" \ -H "Content-Type: application/json" \ -u "API_KEY_USERNAME:API_KEY_PASSWORD" \ -d '{ "passcode": "222222", "expiresIn": "1 minute" }'
Response
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" dir="ltr" style="-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; -webkit-text-size-adjust: 100%;"> <head> <meta http-equiv="Content-Type" content="text/html charset=UTF-8"> <style data-emotion="css-global o6gwfi"> @media print { body { background-color: #fff; } } </style> <style> @media screen and (max-width: 599.95px) { .block-mobile { display: block !important; } .block-desktop { display: none !important; } } </style> </head> <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;"> <div class="MuiBox-root css-17txpnt" 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: 'Nimbus Mono PS', 'Courier New', 'Cutive Mono', monospace; color: #242424;"> <div style="box-sizing: inherit; display: none; overflow: hidden; line-height: 1px; opacity: 0; max-height: 0; max-width: 0;">This code will expire in 1 minute.<div style="box-sizing: inherit;"> </div> </div> <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"> <tbody style="box-sizing: inherit;"> <tr style="box-sizing: inherit; width: 100%;"> <td style="box-sizing: inherit;"> <div style="font-family: inherit; font-size: 16px; font-weight: normal; padding: 32px 24px 24px 24px; text-align: left; max-width: 100%; box-sizing: border-box;"> <div class style="box-sizing: inherit;"> <table align="center" width="100%" cellpadding="0" border="0" style="box-sizing: inherit; table-layout: fixed; border-collapse: collapse;"> <tbody style="box-sizing: inherit; width: 100%;"> <tr style="box-sizing: inherit; width: 100%;"> <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"> <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;"> <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_pqVAk6zw4NNzFhNm/images/wptemplateimage_FQWgtu4Gg5sjwHFu/GENIE.png" style="box-sizing: inherit; display: inline-block; outline: none; border: none; text-decoration: none; vertical-align: middle; max-width: 100%; height: 20px;" height="20"></div> </div> </td> <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"> <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;"> <div style="font-family: inherit; font-size: 14px; font-weight: bold; padding: 0px 0px 0px 0px; text-align: right; max-width: 100%; box-sizing: border-box;"><a href="https://www.usewaypoint.com" target="_blank" style="box-sizing: inherit; background-color: #2458AF; color: #FFFFFF; padding: 0px 0px; border-radius: 0; 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: #2458AF; color: #FFFFFF; padding: 12px 20px; border-radius: 0; 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;">Login</span><span style="box-sizing: inherit;"><!--[if mso]><i style="letter-spacing: undefinedpx;mso-font-width:-100%" hidden> </i><![endif]--></span></a></div> </div> </td> </tr> </tbody> </table> </div> </div> <div style="color: #000000; font-family: inherit; font-size: 16px; font-weight: normal; padding: 16px 24px 16px 24px; text-align: left; max-width: 100%; box-sizing: border-box;"> <div class="MuiBox-root css-vii0ua" style="box-sizing: inherit;"> <div style="box-sizing: inherit;"> <p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px;">Here is your one-time passcode:</p> </div> </div> </div> <div style="font-family: inherit; font-weight: bold; padding: 24px 24px 0px 24px; text-align: left; max-width: 100%; box-sizing: border-box;"> <h1 style="box-sizing: inherit; margin-top: 40px; margin-bottom: 16px; font-weight: inherit; margin: 0; font-size: 32px;">222222</h1> </div> <div style="color: #191A1A; font-family: inherit; font-size: 12px; font-weight: normal; padding: 0px 24px 40px 24px; text-align: left; max-width: 100%; box-sizing: border-box;"> <div class="MuiBox-root css-vii0ua" style="box-sizing: inherit;"> <div style="box-sizing: inherit;"> <p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px;">This code will expire in 1 minute.</p> </div> </div> </div> <div style="font-family: inherit; font-size: 12px; font-weight: normal; padding: 24px 24px 32px 24px; text-align: left; max-width: 100%; box-sizing: border-box;"> <div class="MuiBox-root css-vii0ua" style="box-sizing: inherit;"> <div style="box-sizing: inherit;"> <p style="box-sizing: inherit; margin-top: 0px; margin-bottom: 0px;">Need help? Just reply to this email or email us at <a href="mailto:support@example.com" target="_blank" style="box-sizing: inherit; color: #2458AF;">support@example.com</a>.</p> </div> </div> </div> </td> </tr> </tbody> </table> </div> </body> </html>
Template preview (with test data)
Download a preview of their template with test data (using the test data in the data tab in the template builder).
GET /v1/templates/TEMPLATE_ID/preview
URL 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>"}}
Downloading a raw LiquidJS template
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.
GET /v1/templates/TEMPLATE_ID/raw
URL 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>"}}