Skip to content
HTML Email Builder
HTML Email Builder
Examples
Pack Code
More
Share
Explore
Examples

icon picker
Charts

⁠
image.png
⁠
⁠

Charts requires the
QuickChart ↗️
⁠
Pack


Subject:
HTML Email Builder - Facepile and BulletedList Example
⁠
⁠


Email content with charts
0
Type
Content / Title / Alt Text
Link of Image or Button Destination
HTML
1
Logo
Coda logo
⁠
https://cdn.coda.io/external/img/coda_logo_tomato_soup.png
⁠
⁠
​
2
Image
Header image alt text here
https://codaio.imgix.net/docs/zpOMnDbn8A/blobs/bl-aAd6BFTsMB/9f6af20da940d31181168e86e46846a886f25e5b6c0ae3422f9766616212eec5c057d007b0119d58313be07573871cca700bd7bb24ac460d64d27e621d860731cba9cbb17c7be3bc6db2c91c5f36ae13f69119e052a4a1c780f89537c48bea32a0e8d277?auto=format%2Ccompress&fit=max
​
3
H2
Thank you David for the Quick Charts pack!
​
​
4
Image
Bar chart of dogs, cats, and bunnies
https://quickchart.io/chart?c={%22type%22:%22bar%22,%22data%22:{%22labels%22:[%22January%22,%22February%22,%22March%22,%22April%22,%22May%22],%22datasets%22:[{%22label%22:%22BigDogs%22,%22data%22:[50,60,70,180,190]},{%22label%22:%22Cats%22,%22data%22:[190,180,70,60,50]},{%22label%22:%22Bunnies%22,%22data%22:[2,3,5,4,13]}]}}
​
5
Spacer
​
​
​
There are no rows in this table
⁠

Footer Text:
This is your footer text!
⁠
⁠


⁠
Send a test to myself
⁠
⁠

Quick Charts


Sample Chart Data
0
Month
Dogs
Cats
Bunnies
1
January
50
190
2
2
February
60
180
3
3
March
70
70
5
4
April
180
60
4
5
May
190
50
13
There are no rows in this table
⁠

Chart helper code

⁠
https://quickchart.io/chart?c={%22type%22:%22bar%22,%22data%22:{%22labels%22:[%22January%22,%22February%22,%22March%22,%22April%22,%22May%22],%22datasets%22:[{%22label%22:%22BigDogs%22,%22data%22:[50,60,70,180,190]},{%22label%22:%22Cats%22,%22data%22:[190,180,70,60,50]},{%22label%22:%22Bunnies%22,%22data%22:[2,3,5,4,13]}]}}
⁠
⁠
⁠
Copy chart link
⁠
⁠

Chart Example

⁠
⁠
⁠

Generated Email Code

⁠
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" style="font-family:helvetica, 'helvetica neue', arial, verdana, sans-serif"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1" name="viewport"> <meta name="x-apple-disable-message-reformatting"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="telephone=no" name="format-detection"> <title>HTML Email Builder - Facepile and BulletedList Example</title> <!--[if (mso 16)]> <style type="text/css"> a {text-decoration: none;} </style> <![endif]--> <!--[if gte mso 9]> <style>sup { font-size: 100% !important; }</style> <![endif]--> <!--[if gte mso 9]> <xml> <o:OfficeDocumentSettings> <o:AllowPNG></o:AllowPNG> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> <![endif]--> <style type="text/css"> #outlook a { padding:0; } .es-button { mso-style-priority:100!important; text-decoration:none!important; } a[x-apple-data-detectors] { color:inherit!important; text-decoration:none!important; font-size:inherit!important; font-family:inherit!important; font-weight:inherit!important; line-height:inherit!important; } .es-desk-hidden { float:left; overflow:hidden; width:0; max-height:0; line-height:0; mso-hide:all; } [data-ogsb] .es-button { border-width:0!important; padding:12px 35px 12px 35px!important; } @media only screen and (max-width:600px) { p, ul li, ol li, a { line-height:150%!important } h1, h2, h3, h1 a, h2 a, h3 a { line-height:120% } h1 { font-size:30px!important; text-align:left; margin-bottom:18px } h2 { font-size:26px!important; text-align:left; margin-bottom:16px } h3 { font-size:20px!important; text-align:left; margin-bottom:12px } .es-content-body h1 a, .es-footer-body h1 a { font-size:30px!important } .es-content-body h2 a, .es-footer-body h2 a { font-size:26px!important } .es-content-body h3 a, .es-footer-body h3 a { font-size:20px!important } .es-menu td a { font-size:16px!important } .es-content-body p, .es-content-body ul li, .es-content-body ol li, .es-content-body a { font-size:16px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li, .es-footer-body a { font-size:12px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li, .es-infoblock a { font-size:12px!important } .es-m-txt-c, .es-m-txt-c h1, .es-m-txt-c h2, .es-m-txt-c h3 { text-align:center!important } .es-m-txt-r, .es-m-txt-r h1, .es-m-txt-r h2, .es-m-txt-r h3 { text-align:right!important } .es-m-txt-l, .es-m-txt-l h1, .es-m-txt-l h2, .es-m-txt-l h3 { text-align:left!important } .es-m-txt-r img, .es-m-txt-c img, .es-m-txt-l img { display:inline!important } .es-adaptive table, .es-left, .es-right { width:100%!important } .es-content table, .es-footer table, .es-content, .es-footer { width:100%!important; max-width:600px!important } .es-adapt-td { display:block!important; width:100%!important } .adapt-img { width:100%!important; height:auto!important } .es-m-p0 { padding:0px!important } .es-m-p0r { padding-right:0px!important } .es-m-p0l { padding-left:0px!important } .es-m-p0t { padding-top:0px!important } .es-m-p0b { padding-bottom:0!important } .es-m-p20b { padding-bottom:20px!important } tr.es-desk-hidden, td.es-desk-hidden, table.es-desk-hidden { width:auto!important; overflow:visible!important; float:none!important; max-height:inherit!important; line-height:inherit!important } tr.es-desk-hidden { display:table-row!important } table.es-desk-hidden { display:table!important } td.es-desk-menu-hidden { display:table-cell!important } .es-menu td { width:1%!important } table.es-table-not-adapt, .esd-block-html table { width:auto!important } table.es-social { display:inline-block!important } table.es-social td { display:inline-block!important } p, ul li, ol li { margin-bottom:11px!important } .es-footer-body p, .es-footer-body ul li, .es-footer-body ol li { margin-bottom:12px!important } .es-infoblock p, .es-infoblock ul li, .es-infoblock ol li { margin-bottom:9px!important } } </style> </head> <body style="width:100%;font-family:helvetica, 'helvetica neue', arial, verdana, sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;padding:0;Margin:0"> <div class="es-wrapper-color" style="background-color:#F9F9F9;padding:20px;"> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" color="#f9f9f9" origin="0.5, 0" position="0.5, 0"></v:fill> </v:background> <![endif]--> <table class="es-wrapper" width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top;background-color:#F9F9F9"> <tr> <td valign="top" style="padding:0;Margin:0"> <table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%"> <tr> <td align="center" style="padding:0;Margin:0"> <table class="es-content-body" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:590px;border:1px solid #dddddd;"> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" valign="top" style="padding:0;Margin:0;width:530px"> <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="padding:0;Margin:0;padding-top:5px;padding-bottom:10px;font-size:0"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td style="padding:0;Margin:0;border-bottom:0px solid #ffffff;background:none;height:1px;width:100%;margin:0px"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="left" style="Margin:0;padding-top:15px;padding-bottom:15px;font-size:0px"> <img src="https://cdn.coda.io/external/img/coda_logo_tomato_soup.png" alt="Coda logo" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" width="68px" /> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="Margin:0;padding-top:15px;padding-bottom:15px;font-size:0px"> <img class="adapt-img" src="https://codaio.imgix.net/docs/zpOMnDbn8A/blobs/bl-aAd6BFTsMB/9f6af20da940d31181168e86e46846a886f25e5b6c0ae3422f9766616212eec5c057d007b0119d58313be07573871cca700bd7bb24ac460d64d27e621d860731cba9cbb17c7be3bc6db2c91c5f36ae13f69119e052a4a1c780f89537c48bea32a0e8d277?auto=format%2Ccompress&fit=max" alt="Header image alt text here" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" width="530px"> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="left" style="Margin:0;padding:0px;"> <h3 style="Margin:0;line-height:28px;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:24px;font-style:normal;font-weight:normal;color:#282F33;margin-bottom:7px"> Thank you David for the Quick Charts pack! </h3> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="Margin:0;padding-top:15px;padding-bottom:15px;font-size:0px"> <img class="adapt-img" src="https://quickchart.io/chart?c={%22type%22:%22bar%22,%22data%22:{%22labels%22:[%22January%22,%22February%22,%22March%22,%22April%22,%22May%22],%22datasets%22:[{%22label%22:%22BigDogs%22,%22data%22:[50,60,70,180,190]},{%22label%22:%22Cats%22,%22data%22:[190,180,70,60,50]},{%22label%22:%22Bunnies%22,%22data%22:[2,3,5,4,13]}]}}" alt="Bar chart of dogs, cats, and bunnies" style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" width="530px"> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td valign="top" align="center" style="padding:0;Margin:0;width:530px"> <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="Margin:0;padding-top:15px;padding-bottom:15px;font-size:0px"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td style="padding:0;Margin:0;border-bottom:0px solid #ffffff;background:none;height:1px;width:100%;margin:0px"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td align="left" style="padding:0;Margin:0;padding-left:30px;padding-right:30px"> <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" valign="top" style="padding:0;Margin:0;width:530px"> <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="padding:0;Margin:0;padding-top:5px;padding-bottom:10px;font-size:0"> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td style="padding:0;Margin:0;border-bottom:0px solid #ffffff;background:none;height:1px;width:100%;margin:0px"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> <table class="es-footer" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%;background-color:transparent;background-repeat:repeat;background-position:center top"> <tr> <td align="center" style="padding:0;Margin:0"> <table class="es-footer-body" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:transparent;width:590px;border:0;"> <tr> <td align="left" style="Margin:0;padding-left:15px;padding-right:15px;padding-top:20px;padding-bottom:20px"> <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" valign="top" style="padding:0;Margin:0;width:560px"> <table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> <tr> <td align="center" style="padding:0;Margin:0"> <p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:helvetica, 'helvetica neue', arial, verdana, sans-serif;line-height:18px;color:#B7B7B7;font-size:12px"> This is your footer text! </p></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </div> </body> </html>
⁠
⁠

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.