Inboxes

Create an inbox to save and track emails. It's free!

+New inbox
Back
Back
Back 
<!DOCTYPE html>
<html lang="en" xmlns="//www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
 <head>
  <title>
   Mallet Newsletter: More UI components, JS “run script”, and custom canvas headers
  </title>
  <!--[if !mso]><!-- -->
  <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
  <!--<![endif]-->
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
  <meta content="Mallet Newsletter: More UI components, JS “run script”, and custom canvas headers" property="og:title"/>
  <meta content="Mallet Newsletter: More UI components, JS “run script”, and custom canvas headers" property="og:title"/>
  <meta content="width=device-width,initial-scale=1" name="viewport"/>
  <meta content="HubSpot" name="generator"/>
  <meta content="//retool-7660877.hs-sites.com/-temporary-slug-6272f3dc-393c-4b04-9f58-031ad74b12a6" property="og:url"/>
  <meta name="x-apple-disable-message-reformatting"/>
  <meta content="noindex,follow" name="robots"/>
 </head>
 <body style="background-color:#f5f5f5;">
  <style type="text/css">
   #outlook a {
      padding: 0;
    }
    body {
      margin: 0;
      padding: 0;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
    table,
    td {
      border-collapse: collapse;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }
    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      -ms-interpolation-mode: bicubic;
    }
    p {
      display: block;
      margin: 13px 0;
    }
  </style>
  <!--[if mso]>
        <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
        <![endif]-->
  <!--[if lte mso 11]>
        <style type="text/css">
          .mj-outlook-group-fix { width:100% !important; }
        </style>
        <![endif]-->
  <style type="text/css">
   @media only screen and (min-width:480px) {
      .mj-column-per-100 {
        width: 100% !important;
        max-width: 100% ;
      }
      
      .mj-column-per-50 {
        width: 50% !important;
        max-width: 50%;
      }
      .mj-column-per-33-333333333333336 {
        width: 33.333333333333336% !important;
        max-width: 33.333333333333336%;
      }
    }
  </style>
  <style type="text/css">
   @media only screen and (max-width:480px) {
      table.mj-full-width-mobile {
        width: 100% !important;
      }
      td.mj-full-width-mobile {
        width: auto !important;
      }
    }
  </style>
  <style type="text/css">
   * {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    body {
      -webkit-font-smoothing: antialiased !important;
    }
    ul {
      margin: 0;
    }
    li {
      margin-bottom: 8px;
      color: #848EE0
    }
    li span {
      color: #656465;
    }
    li:last-child {
      margin-bottom: 0;
    }
    li strong {
      color: #656465;
      font-weight: 600;
    }
    .link {
      color: #3574E3 !important;
      text-decoration: none !important;
    }
    
    .grey-link {
      color: #979797 !important;
      text-decoration: none !important;
    }  
    @media (max-width: 599px) {
      .hide-mobile table {
        display: none;
        mso-hide: all;
        max-height: 0;
        overflow: hidden;
      }
      .main>table>tbody>tr>td:first-child {
        padding: 20px !important;
      }
      .main {
        border-radius: 6px !important;
      }
    }
  </style>
  <div id="preview_text" style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
   Our latest updates help you condense JavaScript workflows, create custom canvas headers, and build with powerful, updated UI components.
  </div>
  <div style="background-color:#f5f5f5;">
   <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="hide-mobile-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   <div class="hide-mobile" style="margin:0px auto;max-width:600px;">
    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
     <tbody>
      <tr>
       <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
         <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
          <tbody>
           <tr>
            <td style="vertical-align:top;padding:0;">
             <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
              <tbody>
               <tr>
                <td style="font-size:0px;padding:0;word-break:break-word;">
                 <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                 <div style="height:26px;">
                 </div>
                 <!--[if mso | IE]></td></tr></table><![endif]-->
                </td>
               </tr>
              </tbody>
             </table>
            </td>
           </tr>
          </tbody>
         </table>
        </div>
        <!--[if mso | IE]></td></tr></table><![endif]-->
       </td>
      </tr>
     </tbody>
    </table>
   </div>
   <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="main-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   <div class="main widget-span widget-type-email_body" data-widget-type="email_body" style="background:#ffffff;background-color:#ffffff;margin:0px auto;border-radius:6px;max-width:600px;">
    <div class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text" id="hs_cos_wrapper_hs_email_body" style="color: inherit; font-size: inherit; line-height: inherit;">
     <table align="center" cellspacing="0" role="presentation" style="background: #ffffff; width: 100%; border-radius: 6px; border-width: 0px;">
      <tbody>
       <tr>
        <td style="direction: ltr; font-size: 0px; padding: 48px 30px 28px; text-align: center; border-width: 0px;">
         <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:480px;" ><![endif]-->
         <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;">
          <table cellspacing="0" role="presentation" style="border-width: 0px;" width="100%">
           <tbody>
            <tr>
             <td style="vertical-align: top; padding: 0px; border-width: 0px;">
              <table cellspacing="0" role="presentation" style="height: 4050.03px; width: 100%; border-width: 0px;" width="100%">
               <tbody>
                <tr style="height: 21px;">
                 <td align="left" style="font-size: 0px; word-break: break-word; height: 21px; border-width: 0px; padding: 0px;">
                  <table cellspacing="0" role="presentation" style="border-collapse: collapse; border-spacing: 0px; border-width: 0px;">
                   <tbody>
                    <tr>
                     <td style="width: 100px; border-width: 0px; padding: 0px;">
                      <img alt="Retool logo" height="20" src="https://inboxflows.com/_/image/https%253A%252F%252Fd3399nw8s4ngfo.cloudfront.net%252Fhtml_email_assets%252Fretool_logo_lockup_200x40.png/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZkMzM5OW53OHM0biJ9:1mBJcX:Vl04I8L-n6Ru20dD5f6ESsclBHBeRlQfhTr3TyeY7Rw" style="border: 0; display: block; outline: none; text-decoration: none; height: 20px; width: 100%; font-size: 13px;" width="100"/>
                     </td>
                    </tr>
                   </tbody>
                  </table>
                 </td>
                </tr>
                <tr style="height: 16px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 16px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 16px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr>
                 <td style="direction: ltr; font-size: 0px; padding: 0px; text-align: center; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;"><![endif]-->
                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;">
                   <table cellspacing="0" role="presentation" style="vertical-align: top; border-width: 0px;" width="100%">
                    <tbody>
                     <tr>
                      <td align="center" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                       <table cellspacing="0" role="presentation" style="border-collapse: collapse; border-spacing: 0px; border-width: 0px;">
                        <tbody>
                         <tr>
                          <td style="width: 550px; border-width: 0px; padding: 0px;">
                           <a data-hs-link-id="0" linktext="  " rel="noopener" target="_blank">
                            <img alt="The Mallet" src="https://inboxflows.com/_/image/https%253A%252F%252Fuserimg-bee.customeriomail.com%252Fimages%252Fclient-env-76159%252Fmallet-header.jpg/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZ1c2VyaW1nLWJlZSJ9:1mBJcX:EACGaHXQEoQWrDRF5VLD9FgfVxhwXTd1CtC55dtCb1w" style="border: 0; display: block; outline: none; text-decoration: none; height: auto; width: 100%; max-width: 550px; font-size: 13px;" width="550"/>
                           </a>
                          </td>
                         </tr>
                        </tbody>
                       </table>
                      </td>
                     </tr>
                    </tbody>
                   </table>
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr style="height: 20px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 20px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 20px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr>
                 <td align="left" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                   👋  Hello, Retool community! We recently released a few exciting updates including custom canvas headers, streamlined JavaScript event handler operations, and several new and improved components. Scroll down to learn more, or stay up-to-date in real time with
                   <a data-hs-link-id="1" data-target-href="https://updates.retool.com/en" rel="noreferrer nofollow noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                    our changelog
                   </a>
                   .
                  </div>
                 </td>
                </tr>
                <tr style="height: 36px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 36px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 36px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr style="height: 2px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 2px; border-width: 0px;">
                  <p style="margin-bottom: 1em; border-top: solid 1px #e5e5e5; font-size: 1px; margin: 0px auto; width: 100%;">
                  </p>
                 </td>
                </tr>
                <tr style="height: 16px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 16px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 16px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr>
                 <td align="left" style="font-size: 0px; padding: 20px 0px 12px; word-break: break-word; border-width: 0px;">
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; font-weight: 600; line-height: 1.4; text-align: left; color: #262626;">
                   🚀  Product Updates
                  </div>
                 </td>
                </tr>
                <tr>
                 <td align="center" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                  <table cellspacing="0" role="presentation" style="border-collapse: collapse; border-spacing: 0px; border-width: 0px;">
                   <tbody>
                    <tr>
                     <td style="width: 550px; border-width: 0px; padding: 0px;">
                      <a data-hs-link-id="0" linktext="  " rel="noopener" target="_blank">
                       <img alt="Updated Input Components" sizes="(max-width: 550px) 100vw, 550px" src="https://inboxflows.com/_/image/https%253A%252F%252Fhs-7660877.f.hubspotemail.net%252Fhub%252F7660877%252Fhubfs%252Fupdated-input-components.png%253Fwidth%253D1100%2526upscale%253Dtrue%2526name%253Dupdated-input-components.png/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZocy03NjYwODc3LiJ9:1mBJcX:biAAkdWnZKKX3RrFKBVx2ZWTlLDCadRG3KQlQTlnJMc" srcset="https://hs-7660877.f.hubspotemail.net/hub/7660877/hubfs/updated-input-components.png?upscale=true&amp;width=1100&amp;upscale=true&amp;name=updated-input-components.png 550w, https://hs-7660877.f.hubspotemail.net/hub/7660877/hubfs/updated-input-components.png?upscale=true&amp;width=2200&amp;upscale=true&amp;name=updated-input-components.png 1100w" style="border: 0; display: block; outline: none; text-decoration: none; height: auto; width: 100%; max-width: 550px; font-size: 13px;" width="550"/>
                      </a>
                     </td>
                    </tr>
                   </tbody>
                  </table>
                 </td>
                </tr>
                <tr>
                 <td align="left" style="font-size: 0px; padding: 20px 0px 12px; word-break: break-word; border-width: 0px;">
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                   <strong>
                    <span style="color: #262626;">
                     Updated Input Components
                    </span>
                   </strong>
                   —We’re rolling out 15+ fully rebuilt and redesigned input components. These include components you know and love, like the Text Input and Checkbox, as well as entirely new ones, like the Segmented Control and Range Slider. Our grid also saw major upgrades to row height, allowing for greater data density and better layout control. Check out the full details in the
                   <a data-hs-link-id="1" rel="noopener" style="color: #3574e3; text-decoration: none;" target="_blank">
                    changelog
                   </a>
                   . 👉
                  </div>
                 </td>
                </tr>
                <tr style="height: 20px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 20px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 20px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr style="height: 10px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 10px; border-width: 0px;">
                  <p style="margin-bottom: 1em; border-top: solid 1px #e5e5e5; font-size: 1px; margin: 0px auto; width: 100%;">
                  </p>
                 </td>
                </tr>
                <tr style="height: 36px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 36px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 36px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr>
                 <td align="center" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                  <table cellspacing="0" role="presentation" style="border-collapse: collapse; border-spacing: 0px; border-width: 0px;">
                   <tbody>
                    <tr>
                     <td style="width: 550px; border-width: 0px; padding: 0px;">
                      <a data-hs-link-id="0" linktext="  " rel="noopener" target="_blank">
                       <img alt="New Navigation Component" sizes="(max-width: 550px) 100vw, 550px" src="https://inboxflows.com/_/image/https%253A%252F%252Fhs-7660877.f.hubspotemail.net%252Fhub%252F7660877%252Fhubfs%252Fnew-navigation-component.jpeg%253Fwidth%253D1100%2526upscale%253Dtrue%2526name%253Dnew-navigation-component.jpeg/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZocy03NjYwODc3LiJ9:1mBJcX:biAAkdWnZKKX3RrFKBVx2ZWTlLDCadRG3KQlQTlnJMc" srcset="https://hs-7660877.f.hubspotemail.net/hub/7660877/hubfs/new-navigation-component.jpeg?upscale=true&amp;width=1100&amp;upscale=true&amp;name=new-navigation-component.jpeg 550w, https://hs-7660877.f.hubspotemail.net/hub/7660877/hubfs/new-navigation-component.jpeg?upscale=true&amp;width=2200&amp;upscale=true&amp;name=new-navigation-component.jpeg 1100w" style="border: 0; display: block; outline: none; text-decoration: none; height: auto; width: 100%; max-width: 550px; font-size: 13px;" width="550"/>
                      </a>
                     </td>
                    </tr>
                   </tbody>
                  </table>
                 </td>
                </tr>
                <tr>
                 <td align="left" style="font-size: 0px; padding: 20px 0px 12px; word-break: break-word; border-width: 0px;">
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                   <strong>
                    <span style="color: #262626;">
                     New Navigation Component
                    </span>
                   </strong>
                   —Now you can build a navigation bar for users to navigate between Retool apps and external links—and reuse it across multiple apps with Modules. You can also configure a list of menu items or submenus to do anything from open another app to run a query.
                   <a data-hs-link-id="1" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                    Read the docs.
                   </a>
                   👉
                  </div>
                 </td>
                </tr>
                <tr style="height: 26px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 26px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 26px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr style="height: 2px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 2px; border-width: 0px;">
                  <p style="margin-bottom: 1em; border-top: solid 1px #e5e5e5; font-size: 1px; margin: 0px auto; width: 100%;">
                  </p>
                 </td>
                </tr>
                <tr style="height: 36px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 36px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 36px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr>
                 <td align="center" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                  <table cellspacing="0" role="presentation" style="border-collapse: collapse; border-spacing: 0px; border-width: 0px;">
                   <tbody>
                    <tr>
                     <td style="width: 550px; border-width: 0px; padding: 0px;">
                      <a data-hs-link-id="0" rel="noopener" target="_blank">
                       <img alt="Header Frames" sizes="(max-width: 550px) 100vw, 550px" src="https://inboxflows.com/_/image/https%253A%252F%252Fhs-7660877.f.hubspotemail.net%252Fhub%252F7660877%252Fhubfs%252Fheader-frames.png%253Fwidth%253D1100%2526upscale%253Dtrue%2526name%253Dheader-frames.png/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZocy03NjYwODc3LiJ9:1mBJcX:biAAkdWnZKKX3RrFKBVx2ZWTlLDCadRG3KQlQTlnJMc" srcset="https://hs-7660877.f.hubspotemail.net/hub/7660877/hubfs/header-frames.png?upscale=true&amp;width=1100&amp;upscale=true&amp;name=header-frames.png 550w, https://hs-7660877.f.hubspotemail.net/hub/7660877/hubfs/header-frames.png?upscale=true&amp;width=2200&amp;upscale=true&amp;name=header-frames.png 1100w" style="border: 0; display: block; outline: none; text-decoration: none; height: auto; width: 100%; max-width: 550px; font-size: 13px;" width="550"/>
                      </a>
                     </td>
                    </tr>
                   </tbody>
                  </table>
                 </td>
                </tr>
                <tr>
                 <td align="left" style="font-size: 0px; padding: 20px 0px 12px; word-break: break-word; border-width: 0px;">
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                   <strong>
                    <span style="color: #262626;">
                     Header Frames
                    </span>
                   </strong>
                   —Create custom headers for your applications using our new header frame. Drag any component into the header frame to create a personalized experience for all users in view mode. Header frames are available now for all cloud customers, and will be available in the on-prem release on 8/4. To learn more about canvas frames,
                   <a data-hs-link-id="1" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                    check out our docs
                   </a>
                   . 👉
                  </div>
                 </td>
                </tr>
                <tr style="height: 26px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 26px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 26px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr style="height: 2px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 2px; border-width: 0px;">
                  <p style="margin-bottom: 1em; border-top: solid 1px #e5e5e5; font-size: 1px; margin: 0px auto; width: 100%;">
                  </p>
                 </td>
                </tr>
                <tr style="height: 36px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 36px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 36px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr>
                 <td align="center" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                  <table cellspacing="0" role="presentation" style="border-collapse: collapse; border-spacing: 0px; border-width: 0px;">
                   <tbody>
                    <tr>
                     <td style="width: 550px; border-width: 0px; padding: 0px;">
                      <a data-hs-link-id="0" linktext="  " rel="noopener" target="_blank">
                       <img alt="Event Handlers: Run Script" sizes="(max-width: 550px) 100vw, 550px" src="https://inboxflows.com/_/image/https%253A%252F%252Fhs-7660877.f.hubspotemail.net%252Fhub%252F7660877%252Fhubfs%252Fevent-handlers-run-script.png%253Fwidth%253D1100%2526upscale%253Dtrue%2526name%253Devent-handlers-run-script.png/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZocy03NjYwODc3LiJ9:1mBJcX:biAAkdWnZKKX3RrFKBVx2ZWTlLDCadRG3KQlQTlnJMc" srcset="https://hs-7660877.f.hubspotemail.net/hub/7660877/hubfs/event-handlers-run-script.png?upscale=true&amp;width=1100&amp;upscale=true&amp;name=event-handlers-run-script.png 550w, https://hs-7660877.f.hubspotemail.net/hub/7660877/hubfs/event-handlers-run-script.png?upscale=true&amp;width=2200&amp;upscale=true&amp;name=event-handlers-run-script.png 1100w" style="border: 0; display: block; outline: none; text-decoration: none; height: auto; width: 100%; max-width: 550px; font-size: 13px;" width="550"/>
                      </a>
                     </td>
                    </tr>
                   </tbody>
                  </table>
                 </td>
                </tr>
                <tr>
                 <td align="left" style="font-size: 0px; padding: 20px 0px 12px; word-break: break-word; border-width: 0px;">
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                   <strong>
                    <span style="color: #262626;">
                     Event Handlers: “Run Script”
                    </span>
                   </strong>
                   —Now, you can run JavaScript with side effects, like triggering a query or downloading data, directly in your event handler–without creating and managing a JS query. Read more in the
                   <a data-hs-link-id="1" rel="noopener" style="color: #3574e3; text-decoration: none;" target="_blank">
                    changelog
                   </a>
                   , or dive deeper into JavaScript
                   <a data-hs-link-id="0" rel="noopener" style="color: #3574e3; text-decoration: none;" target="_blank">
                    with this guide
                   </a>
                   . 👉
                   <br/>
                   <br/>
                   <a class="link" data-hs-link-id="2" rel="noopener" style="color: #3574e3; text-decoration: none;" target="_blank">
                    👉 See everything we’ve shipped in the Retool changelog
                   </a>
                  </div>
                 </td>
                </tr>
                <tr style="height: 20px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 20px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 20px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr style="height: 2px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 2px; border-width: 0px;">
                  <p style="margin-bottom: 1em; border-top: solid 1px #e5e5e5; font-size: 1px; margin: 0px auto; width: 100%;">
                  </p>
                 </td>
                </tr>
                <tr style="height: 36px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 36px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 36px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr>
                 <td align="left" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                   <strong>
                    <span style="color: #262626;">
                     🔌  Integration and Template Updates
                    </span>
                   </strong>
                   <br/>
                   <br/>
                   <strong>
                    <span style="color: #262626;">
                     OneSignal Integration
                    </span>
                   </strong>
                   : Build admin panels, dashboards, and utilities on top of your OneSignal data. Send texts or make calls programmatically from Retool. Learn more in our
                   <span style="color: #3574e3;">
                    <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                     docs
                    </a>
                   </span>
                   .
                  </div>
                 </td>
                </tr>
                <tr style="height: 16px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 16px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 16px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr style="height: 20px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 20px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 20px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr style="height: 2px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 2px; border-width: 0px;">
                  <p style="margin-bottom: 1em; border-top: solid 1px #e5e5e5; font-size: 1px; margin: 0px auto; width: 100%;">
                  </p>
                 </td>
                </tr>
                <tr style="height: 36px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 36px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 36px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr>
                 <td align="left" style="font-size: 0px; padding: 0px; word-break: break-word; border-width: 0px;">
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                   <strong>
                    💡
                    <span style="color: #262626;">
                     Community Updates
                    </span>
                   </strong>
                   <br/>
                   <span>
                   </span>
                   <span style="color: #262626;">
                    <span>
                    </span>
                   </span>
                  </div>
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                   <br/>
                   <div>
                    <div>
                     Want to see how other companies use data visualization in Retool? Hear about the apps that GetAround, Wheels, Archilogic, and ThePowerMBA built using visual components in
                     <span style="color: #3574e3;">
                      <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                       our event recording
                      </a>
                     </span>
                     .
                    </div>
                    <div>
                    </div>
                    <div>
                     Church, a Retool community member,
                     <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                      shared how they use a custom component and html2pdf
                     </a>
                     to create and export PDFs in Retool.
                    </div>
                    <div>
                    </div>
                    <div>
                     Sid Puri, who works on Growth at Retool, walked through how to
                     <span style="color: #3574e3;">
                      <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                       automate document management
                      </a>
                     </span>
                     (and create an NDA workflow app) with Revv and Retool.
                    </div>
                    <div>
                    </div>
                    <div>
                     <span style="color: #3574e3;">
                      <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                       Iñigo, a Retool community member, built a Retool app
                      </a>
                     </span>
                     that lets you configure your dream Tesla with some slick custom CSS.
                    </div>
                    <div>
                    </div>
                    <div>
                     Check out our most recent “Retool on Retool” build—an
                     <span style="color: #3574e3;">
                      <a data-hs-link-id="0" rel="noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                       Account Team Dashboard
                      </a>
                     </span>
                     to manage user licenses that saves our team dozens of hours per month.
                    </div>
                    <div>
                    </div>
                    <div>
                     <span>
                      To get more involved in our community, check out
                     </span>
                     <span style="color: #3574e3;">
                      <a data-hs-link-id="0" data-target-href="https://community.retool.com/" rel="noreferrer nofollow noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                       our forums
                      </a>
                     </span>
                     <span>
                      and
                     </span>
                     <span style="color: #3574e3;">
                      <a data-hs-link-id="0" data-target-href="https://retool.com/community/#power-users-slack" rel="noreferrer nofollow noopener" style="text-decoration: none; color: #3574e3;" target="_blank">
                       request access
                      </a>
                     </span>
                     <span>
                      to our power users Slack group.
                     </span>
                    </div>
                   </div>
                  </div>
                 </td>
                </tr>
                <tr style="height: 16px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 16px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="16" style="height:16px;"><![endif]-->
                  <div style="height: 16px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr style="height: 16px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 16px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 16px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr style="height: 2px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 2px; border-width: 0px;">
                  <p style="margin-bottom: 1em; border-top: solid 1px #e5e5e5; font-size: 1px; margin: 0px auto; width: 100%;">
                  </p>
                 </td>
                </tr>
                <tr style="height: 16px;">
                 <td style="font-size: 0px; padding: 0px; word-break: break-word; height: 16px; border-width: 0px;">
                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="36" style="height:36px;"><![endif]-->
                  <div style="height: 16px;">
                  </div>
                  <!--[if mso | IE]></td></tr></table><![endif]-->
                 </td>
                </tr>
                <tr>
                 <td align="left" style="font-size: 0px; padding: 20px 0px 12px; word-break: break-word; border-width: 0px;">
                  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 1.4; text-align: left; color: #656465;">
                   That's all for this month. As always, if you need anything (or just want to say hello), feel free to hit reply.
                   <br/>
                   <br/>
                   Kevin Garcia
                   <br/>
                   PMM @ Retool
                  </div>
                 </td>
                </tr>
               </tbody>
              </table>
             </td>
            </tr>
           </tbody>
          </table>
         </div>
         <!--[if mso | IE]></td></tr></table><![endif]-->
        </td>
       </tr>
      </tbody>
     </table>
    </div>
   </div>
   <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
   <div style="margin:0px auto;max-width:600px;">
    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
     <tbody>
      <tr>
       <td style="direction:ltr;font-size:0px;padding:24px 48px;text-align:center;">
        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:504px;" ><![endif]-->
        <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
         <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
          <tbody>
           <tr>
            <td style="vertical-align:top;padding:0;">
             <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
              <tbody>
               <tr>
                <td align="center" style="font-size:0px;padding:0;word-break:break-word;">
                 <div style="font-family:-apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';font-size:13px;line-height:18px;text-align:center;color:#979797;">
                  <span class="grey-link footer-company">
                   ©
                   <a class="grey-link hubspot-mergetag" data-hs-link-id="0" style="color: #979797;text-decoration: none;" target="_blank">
                    Retool, Inc.
                   </a>
                  </span>
                  <span class="grey-link footer-address">
                   <a class="grey-link hubspot-mergetag" data-hs-link-id="0" style="color: #979797;text-decoration: none;" target="_blank">
                    292 Ivy St. San Francisco, CA 94102
                   </a>
                  </span>
                 </div>
                </td>
               </tr>
               <tr>
                <td align="center" style="font-size:0px;padding:0;word-break:break-word;">
                 <div style="font-family:-apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Segoe UI', 'Helvetica Neue', Helvetica, Noto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';font-size:13px;line-height:18px;text-align:center;color:#979797;">
                  <span class="footer-address">
                   <a class="grey-link hubspot-mergetag" data-hs-link-id="0" data-unsubscribe="true" style="color: #979797;text-decoration: none;" target="_blank">
                    Update Email Preferences
                   </a>
                  </span>
                  <span class="footer-bullet">
                   ·
                  </span>
                  <span class="footer-address">
                   <a class="grey-link hubspot-mergetag" data-hs-link-id="0" data-unsubscribe="true" style="color: #979797;text-decoration: none;" target="_blank">
                    Unsubscribe
                   </a>
                  </span>
                 </div>
                </td>
               </tr>
              </tbody>
             </table>
            </td>
           </tr>
          </tbody>
         </table>
        </div>
        <!--[if mso | IE]></td></tr></table><![endif]-->
       </td>
      </tr>
     </tbody>
    </table>
   </div>
   <!--[if mso | IE]></td></tr></table><![endif]-->
  </div>
  <img alt="" border="0" height="1" src="https://inboxflows.com/_/image/https%253A%252F%252Fi7.t.hubspotemail.net%252Fe2t%252Fto%252FVVzQnx73h9GWW8RPPBK8C_W0pW5BVC1m4vRHwvW72QTLc1gHdcX132/?inbox_flows_img_sig=eyJwYXRoIjoiaHR0cHMlM0ElMkYlMkZpNy50Lmh1YnNwbyJ9:1mBJcX:iD_kmFTD6KwguIhw5DCEC31QoFr0Qrec-cFfjkJId44" style="display:none!important;min-height:1px!important;width:1px!important;border-width:0!important;margin-top:0!important;margin-bottom:0!important;margin-right:0!important;margin-left:0!important;padding-top:0!important;padding-bottom:0!important;padding-right:0!important;padding-left:0!important" width="1"/>
 </body>
</html>