Copy about a feature or an action that the user should be aware of.

Banner title

Display a dismissible banner for conferences, events, or important notices.

Show a prominent, dismissible banner at the top of your app to promote conferences, webinars, or other time-sensitive announcements. Users can dismiss the banner once they've seen it.

Build a conference banner component

Default

Single-action

Multi-action

Conference banner

Power in-app messaging like Webflow and Assembly.

Announcing Guides 1.0

Announce new features with an in-app card including image and action buttons.

Display rich feature announcements within your app using a card format with an image, title, description, and primary/secondary action buttons. Perfect for product launches and major updates.

Build a feature announcement component

Feature announcement

Start with a prebuilt content block, then customize the copy, image, and link.

Pair each message with a clear CTA so readers know where to go next.

Show two side-by-side content blocks with images, text, and CTA links.

Use this partial to compare two announcements, features, recommendations, or resources in a single email section. It pairs each item with its own image, heading, body copy, and CTA link while preserving responsive email markup.

Image shown above the first content block.

Paragraph-style text shown below the first heading.

Destination URL for the second block CTA.

Image shown above the second content block.

Paragraph-style text shown below the second heading.

{%- assign first_header = block_1_header_text | default: 'Build your emails faster' -%}
{%- assign first_body = block_1_paragraph_text | default: 'Start with a prebuilt content block, then customize the copy, image, and link.' -%}
{%- assign first_cta = block_1_cta_text | default: 'Browse templates' -%}
{%- assign second_header = block_2_header_text | default: 'Design every message with confidence' -%}
{%- assign second_body = block_2_paragraph_text | default: 'Pair each message with a clear CTA so readers know exactly where to go next.' -%}
{%- assign second_cta = block_2_cta_text | default: 'View best practices' -%}

<style>
  @media only screen and (max-width: 600px) {
    .two-column-content-block-column {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .two-column-content-block-spacer {
      display: block !important;
      height: 24px !important;
      line-height: 24px !important;
      font-size: 24px !important;
    }

    .two-column-content-block-image {
      width: 100% !important;
      max-width: 100% !important;
    }
  }
</style>

<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
  <tbody>
    <tr>
      <td align="center" style="padding: 16px 0">
        <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px">
          <tbody>
            <tr>
              <td class="two-column-content-block-column" valign="top" width="288" style="padding: 0">
                <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
                  <tbody>
                    <tr>
                      <td>
                        <img
                          class="two-column-content-block-image"
                          src="{{ block_1_image.url }}"
                          alt="{{ block_1_image.alt | default: first_header }}"
                          width="288"
                          height="216"
                          style="display: block; width: 100%; max-width: 288px; height: 216px; object-fit: cover; border: 1px solid #d1d5db; border-radius: 10px; outline: none; text-decoration: none;"
                        />
                      </td>
                    </tr>
                    <tr>
                      <td style="padding: 16px 0 0 0">
                        <h2 style="margin: 0 0 8px 0; color: #111827; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 20px; line-height: 28px; font-weight: 700;">
                          {{ first_header }}
                        </h2>
                        <p style="margin: 0 0 8px 0; color: #4b5563; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 22px; font-weight: 400;">
                          {{ first_body }}
                        </p>
                        {% if block_1_cta_url and block_1_cta_url != "" %}
                        <a href="{{ block_1_cta_url }}" style="color: #000000; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 22px; font-weight: 600; text-decoration: underline;">
                          {{ first_cta }}
                        </a>
                        {% endif %}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td class="two-column-content-block-spacer" width="24" style="font-size: 0; line-height: 0">&nbsp;</td>
              <td class="two-column-content-block-column" valign="top" width="288" style="padding: 0">
                <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
                  <tbody>
                    <tr>
                      <td>
                        <img
                          class="two-column-content-block-image"
                          src="{{ block_2_image.url }}"
                          alt="{{ block_2_image.alt | default: second_header }}"
                          width="288"
                          height="216"
                          style="display: block; width: 100%; max-width: 288px; height: 216px; object-fit: cover; border: 1px solid #d1d5db; border-radius: 10px; outline: none; text-decoration: none;"
                        />
                      </td>
                    </tr>
                    <tr>
                      <td style="padding: 16px 0 0 0">
                        <h2 style="margin: 0 0 8px 0; color: #111827; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 20px; line-height: 28px; font-weight: 700;">
                          {{ second_header }}
                        </h2>
                        <p style="margin: 0 0 8px 0; color: #4b5563; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 22px; font-weight: 400;">
                          {{ second_body }}
                        </p>
                        {% if block_2_cta_url and block_2_cta_url != "" %}
                        <a href="{{ block_2_cta_url }}" style="color: #000000; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 22px; font-weight: 600; text-decoration: underline;">
                          {{ second_cta }}
                        </a>
                        {% endif %}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>


Build a two-column content email partial

2-column content block

Add paired approve and reject buttons to decision-focused emails.

Use this partial to give recipients two clear choices from a single email. It works well for review flows, access requests, moderation queues, and any workflow where users need to approve or reject an item.

The label displayed on the approve button.

The destination URL for the approve button.

The label displayed on the reject button.

The destination URL for the reject button.

<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
  <tbody style="width: 100%">
    <tr style="width: 100%">
      <td align="left" style="padding: 16px 0">
        <table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation">
          <tbody>
            <tr>
              <td align="center" style="padding-right: 8px">
                <a href="{{ approve_url }}" style="display: inline-block; padding: 10px 20px; background-color: #2EB67D; color: #ffffff; text-decoration: none; border-radius: 8px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">{{ approve_text }}</a>
              </td>
              <td align="center">
                <a href="{{ reject_url }}" style="display: inline-block; padding: 10px 20px; background-color: #E01E5A; color: #ffffff; text-decoration: none; border-radius: 8px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;">{{ reject_text }}</a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>


Build approve and reject email buttons

Approve and reject buttons

CEO, InGen

Display author information with avatar, name, title, and signoff.

Add a professional author signature block to your emails with avatar image, name, title, signoff message, and email address. Perfect for personalized transactional emails and newsletters.

<div style="text-align: center; margin: 24px 0">
  {% if author_image.url %}
  <div style="margin-bottom: 16px">
    <img
      src="{{ author_image.url }}"
      alt="{{ author_image.alt | default: author_name | default: 'Author' }}"
      style="
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        margin: 0 auto;
      "
    />
  </div>
  {% endif %} {% if signoff %}
  <div
    style="
      font-family: Georgia, Times, 'Times New Roman', serif;
      font-size: 16px;
      color: #222222;
    "
  >
    {{ signoff }}
  </div>
  {% endif %} {% if author_name %}
  <div
    style="
      font-family: Georgia, Times, 'Times New Roman', serif;
      font-size: 16px;
      font-weight: bold;
      color: #222222;
    "
  >
    {{ author_name }}
  </div>
  {% endif %} {% if author_title %}
  <div
    style="
      font-family: Georgia, Times, 'Times New Roman', serif;
      font-size: 16px;
      color: #7a7a7a;
    "
  >
    {{ author_title }}
  </div>
  {% endif %} {% if author_email %}
  <div
    style="
      font-family: Georgia, Times, 'Times New Roman', serif;
      font-size: 16px;
    "
  >
    <a
      href="mailto:{{ author_email }}"
      style="color: #fc5b22; text-decoration: none"
      >{{ author_email }}</a
    >
  </div>
  {% endif %}
</div>

Build an author block email partial

Author block

Create trackable links with UTM parameters for campaign analytics.

Automatically append UTM parameters (source, medium, campaign, term, content) to your links for accurate campaign tracking in analytics tools. Essential for measuring email campaign performance.

Differentiates ads or links pointing to the same URL.

Identifies which site sent the traffic (e.g. newsletter, google).

<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
{%- assign params = '' -%}
{%- if utm_source != '' and utm_source -%}{%- assign params = params | append: 'utm_source=' | append: utm_source -%}{%- endif -%}
{%- if utm_medium != '' and utm_medium -%}{%- if params != '' -%}{%- assign params = params | append: '&' -%}{%- endif -%}{%- assign params = params | append: 'utm_medium=' | append: utm_medium -%}{%- endif -%}
{%- if utm_campaign != '' and utm_campaign -%}{%- if params != '' -%}{%- assign params = params | append: '&' -%}{%- endif -%}{%- assign params = params | append: 'utm_campaign=' | append: utm_campaign -%}{%- endif -%}
{%- if utm_term != '' and utm_term -%}{%- if params != '' -%}{%- assign params = params | append: '&' -%}{%- endif -%}{%- assign params = params | append: 'utm_term=' | append: utm_term -%}{%- endif -%}
{%- if utm_content != '' and utm_content -%}{%- if params != '' -%}{%- assign params = params | append: '&' -%}{%- endif -%}{%- assign params = params | append: 'utm_content=' | append: utm_content -%}{%- endif -%}
{%- assign final_url = button_url -%}
{%- if params != '' -%}
  {%- if button_url contains '?' -%}
    {%- assign final_url = button_url | append: '&' | append: params -%}
  {%- else -%}
    {%- assign final_url = button_url | append: '?' | append: params -%}
  {%- endif -%}
{%- endif -%}
  <tbody style="width: 100%">
    <tr style="width: 100%">
      <td align="center" style="padding: 16px 0">
        <a href="{{ final_url }}" style="display: inline-block; padding: 12px 24px; background-color: #ea580c; color: #ffffff; text-decoration: none; border-radius: 6px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px;">{{ button_text }}</a>
      </td>
    </tr>
  </tbody>
</table>


Build a button with UTM link email partial

Button with UTM link

Show ordered steps, requirements, or recommendations in email.

Use this partial to render up to five ordered items with numbered badges and consistent spacing. It helps teams add structured instructions, onboarding tasks, and ranked recommendations without rebuilding table-based email markup.

<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
  <tbody>
    {%- if list_item_1 != '' and list_item_1 -%}
    <tr>
      <td valign="top" width="36" style="padding: 0 16px 18px 0">
        <table width="32" height="32" border="0" cellpadding="0" cellspacing="0" role="presentation">
          <tr>
            <td
              align="center"
              valign="middle"
              width="32"
              height="32"
              style="width: 32px; height: 32px; border-radius: 50%; background-color: #ff5a45; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 32px; font-weight: 700;"
            >
              1
            </td>
          </tr>
        </table>
      </td>
      <td valign="top" style="padding: 0 0 18px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #5f6470; font-size: 16px; line-height: 24px;">
        {{ list_item_1 }}
      </td>
    </tr>
    {%- endif -%}
    {%- if list_item_2 != '' and list_item_2 -%}
    <tr>
      <td valign="top" width="36" style="padding: 0 16px 18px 0">
        <table width="32" height="32" border="0" cellpadding="0" cellspacing="0" role="presentation">
          <tr>
            <td
              align="center"
              valign="middle"
              width="32"
              height="32"
              style="width: 32px; height: 32px; border-radius: 50%; background-color: #ff5a45; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 32px; font-weight: 700;"
            >
              2
            </td>
          </tr>
        </table>
      </td>
      <td valign="top" style="padding: 0 0 18px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #5f6470; font-size: 16px; line-height: 24px;">
        {{ list_item_2 }}
      </td>
    </tr>
    {%- endif -%}
    {%- if list_item_3 != '' and list_item_3 -%}
    <tr>
      <td valign="top" width="36" style="padding: 0 16px 18px 0">
        <table width="32" height="32" border="0" cellpadding="0" cellspacing="0" role="presentation">
          <tr>
            <td
              align="center"
              valign="middle"
              width="32"
              height="32"
              style="width: 32px; height: 32px; border-radius: 50%; background-color: #ff5a45; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 32px; font-weight: 700;"
            >
              3
            </td>
          </tr>
        </table>
      </td>
      <td valign="top" style="padding: 0 0 18px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #5f6470; font-size: 16px; line-height: 24px;">
        {{ list_item_3 }}
      </td>
    </tr>
    {%- endif -%}
    {%- if list_item_4 != '' and list_item_4 -%}
    <tr>
      <td valign="top" width="36" style="padding: 0 16px 18px 0">
        <table width="32" height="32" border="0" cellpadding="0" cellspacing="0" role="presentation">
          <tr>
            <td
              align="center"
              valign="middle"
              width="32"
              height="32"
              style="width: 32px; height: 32px; border-radius: 50%; background-color: #ff5a45; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 32px; font-weight: 700;"
            >
              4
            </td>
          </tr>
        </table>
      </td>
      <td valign="top" style="padding: 0 0 18px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #5f6470; font-size: 16px; line-height: 24px;">
        {{ list_item_4 }}
      </td>
    </tr>
    {%- endif -%}
    {%- if list_item_5 != '' and list_item_5 -%}
    <tr>
      <td valign="top" width="36" style="padding: 0 16px 0 0">
        <table width="32" height="32" border="0" cellpadding="0" cellspacing="0" role="presentation">
          <tr>
            <td
              align="center"
              valign="middle"
              width="32"
              height="32"
              style="width: 32px; height: 32px; border-radius: 50%; background-color: #ff5a45; color: #ffffff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 32px; font-weight: 700;"
            >
              5
            </td>
          </tr>
        </table>
      </td>
      <td valign="top" style="padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #5f6470; font-size: 16px; line-height: 24px;">
        {{ list_item_5 }}
      </td>
    </tr>
    {%- endif -%}
  </tbody>
</table>


Build a numbered list email partial

Numbered list

Draft campaign report

Display a single task item with title, status, and metadata.

Render individual task items in notification emails for productivity and collaboration apps. Shows task details in a clean, structured format that matches your app's design.

<table
  border="0"
  cellpadding="0"
  cellspacing="0"
  width="100%"
  style="border: 1px solid #e5e5e5"
>
  <tr>
    <td style="padding: 16px">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td width="24" valign="top" style="padding-right: 12px">
            <div
              style="
                width: 24px;
                height: 24px;
                border-radius: 50%;
                background-color: #6b7280;
                line-height: 24px;
                text-align: center;
              "
            >
              <span style="color: white; font-size: 14px; font-weight: bold"
                >✓</span
              >
            </div>
          </td>
          <td
            style="
              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                'Helvetica Neue', Arial, sans-serif;
            "
          >
            <a
              href="{{ link }}"
              style="color: #1a1a1a; text-decoration: none; display: block"
            >
              <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td>
                    <span
                      style="font-size: 16px; line-height: 24px; color: #1a1a1a"
                      >{{ name | truncate: 35 }}</span
                    >
                  </td>
                  <td align="right" style="padding-left: 16px">
                    <table border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        {% assign task_date_unix = date | date: "%s" %}
                        {% assign current_date_unix = "now" | date: "%s" %}
                        {% if task_date_unix < current_date_unix %}
                        <td
                          style="
                            font-size: 16px;
                            line-height: 24px;
                            color: #dc2626;
                          "
                        >
                          {{ date | date: "%b %d" }}
                        </td>
                        {% else %}
                        <td
                          style="
                            font-size: 16px;
                            line-height: 24px;
                            color: #4b5563;
                          "
                        >
                          {{ date | date: "%b %d" }}
                        </td>
                        {% endif %}
                        <td style="padding-left: 8px">
                          <img
                            src="https://d3ki9tyy5l5ruj.cloudfront.net/obj/44f5654475ec4d9fad41014461c7561e0a5811fa/right_icon-16x16@2x.png"
                            width="16"
                            height="16"
                            style="display: block"
                            alt="Arrow icon"
                          />
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>


Build a task item email partial

Task item

Steve Jobs

Co-founder of Apple

Show social proof with a quote and image.

The large avatar or photo displayed on the left side of the testimonial

Full name of the person giving the testimonial

Job title or company of the person giving the testimonial

Build a testimonial email partial

Testimonial with large avatar

We shipped several updates to help you get started with Knock faster.

Highlight a short summary or key takeaway in an email.

Use this partial to give readers a focused summary before they read the rest of an email. It supports a heading, paragraph text, and color treatment so teams can match the callout to the message context.

Choose the color treatment for the callout container.

The H1-style heading shown at the top of the callout.

The paragraph-style summary text shown below the heading.

{%- assign callout_header = header_text | default: 'TLDR' -%}
{%- assign callout_body = paragraph_text | default: 'Add a concise summary of the most important takeaway here.' -%}
{%- assign callout_background = '#fff7ed' -%}
{%- assign callout_border = '#fed7aa' -%}
{%- assign callout_heading = '#9a3412' -%}
{%- assign callout_text = '#7c2d12' -%}
{%- if color == 'blue' -%}
  {%- assign callout_background = '#eff6ff' -%}
  {%- assign callout_border = '#bfdbfe' -%}
  {%- assign callout_heading = '#1d4ed8' -%}
  {%- assign callout_text = '#1e3a8a' -%}
{%- elsif color == 'green' -%}
  {%- assign callout_background = '#f0fdf4' -%}
  {%- assign callout_border = '#bbf7d0' -%}
  {%- assign callout_heading = '#15803d' -%}
  {%- assign callout_text = '#14532d' -%}
{%- elsif color == 'purple' -%}
  {%- assign callout_background = '#faf5ff' -%}
  {%- assign callout_border = '#e9d5ff' -%}
  {%- assign callout_heading = '#7e22ce' -%}
  {%- assign callout_text = '#581c87' -%}
{%- elsif color == 'gray' -%}
  {%- assign callout_background = '#f8fafc' -%}
  {%- assign callout_border = '#e2e8f0' -%}
  {%- assign callout_heading = '#334155' -%}
  {%- assign callout_text = '#475569' -%}
{%- endif -%}

<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
  <tbody>
    <tr>
      <td style="padding: 16px 0">
        <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: {{ callout_background }}; border: 1px solid {{ callout_border }}; border-collapse: separate; border-radius: 12px; border-spacing: 0; overflow: hidden;">
          <tbody>
            <tr>
              <td style="background-color: {{ callout_background }}; border-radius: 12px; padding: 20px 24px;">
                <h1 style="margin: 0 0 8px 0; color: {{ callout_heading }}; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 24px; line-height: 32px; font-weight: 700;">
                  {{ callout_header }}
                </h1>
                <p style="margin: 0; color: {{ callout_text }}; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 24px; font-weight: 400;">
                  {{ callout_body }}
                </p>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>


Build a TLDR callout email partial

TLDR callout block

Add a clickable video thumbnail with play icon overlay to emails.

Use this partial to turn a static image into a video teaser in your email layout. It overlays a play icon, supports responsive behavior, and links users to your hosted video or landing page.

Upload or provide the URL for the video cover image.

Fallback destination URL used when no image action is set.

{%- assign destination_url = cover_image.action | default: optional_link -%}
<style>
  @media only screen and (max-width: 480px) {
    .video-cover-play-circle {
      width: 54px !important;
      height: 54px !important;
    }
    .video-cover-play-triangle {
      border-top-width: 8px !important;
      border-bottom-width: 8px !important;
      border-left-width: 13px !important;
    }
  }
</style>

<table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td align="center" style="padding: 0">
      <div style="max-width: 640px; margin: 0 auto; position: relative; line-height: 0; font-size: 0">
        {% if destination_url and destination_url != "" %}
        <a
          href="{{ destination_url }}"
          style="text-decoration: none; display: block; position: relative"
        >
        {% endif %}
          <img
            src="{{ cover_image.url }}"
            alt="{{ cover_image.alt | default: 'Video cover image' }}"
            width="640"
            style="
              display: block;
              width: 100%;
              max-width: 640px;
              height: auto;
              border: 0;
              border-radius: 8px;
              outline: none;
              text-decoration: none;
            "
          />
          <div
            style="
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              -webkit-transform: translate(-50%, -50%);
              mso-hide: all;
            "
          >
            <div
              class="video-cover-play-circle"
              style="
                width: 72px;
                height: 72px;
                border-radius: 36px;
                background-color: rgba(0, 0, 0, 0.72);
                display: table;
              "
            >
              <div
                style="
                  display: table-cell;
                  vertical-align: middle;
                  text-align: center;
                  line-height: 0;
                "
              >
                <span
                  class="video-cover-play-triangle"
                  style="
                    display: inline-block;
                    width: 0;
                    height: 0;
                    border-top: 11px solid transparent;
                    border-bottom: 11px solid transparent;
                    border-left: 18px solid #ffffff;
                    margin-left: 4px;
                  "
                ></span>
              </div>
            </div>
          </div>
        {% if destination_url and destination_url != "" %}
        </a>
        {% endif %}
      </div>
    </td>
  </tr>
</table>

Build a video cover image email partial

Video cover image

Batch non-critical alerts into a daily or weekly digest.

Accumulate alerts over a 24-hour window and deliver a consolidated email and in-app summary. Reduces alert fatigue while keeping users informed of everything they missed.

Batch

Build alert digest notifications

Alert digest

Power user-configurable alerts with batches and channel selections.

Send customizable alerts across multiple channels with intelligent batching to prevent alert fatigue. Users can configure their preferred notification channels and receive consolidated notifications for high-volume events.

Branch

Build system alert notifications

System alerts

Batch high volume comments and send out-of-app messages after delay.

Efficiently handle comment notifications by batching them together and sending out-of-app messages after a configurable delay. This reduces notification noise while keeping users informed of activity.

Delay

Build comment notifications

Comments

Verify new accounts with an email link and automated reminder.

Send a verification email on signup with a follow-up reminder after 24 hours if the user hasn't verified. Cancel the reminder when verification completes.

Build email verification notifications

Email verification

Celebrate key user milestones with in-app and email messages.

Celebrate when users hit their first meaningful action with an in-app message and a follow-up email if unseen. Reinforces product value and drives continued engagement.

Build first milestone notifications

First milestone

Escalate critical incidents via push and SMS with email fallback.

On-call style incident routing that sends push and SMS for critical events, then escalates to email if unacknowledged. Non-critical incidents receive email-only notifications.

Build incident escalation notifications

Incident escalation

Send a user invite with a delayed reminder if not accepted.

Invite users to collaborate with an initial invitation followed by an automated reminder after a delay. The reminder is automatically cancelled if the invitation is accepted.

Build invite reminder notifications

Invite with reminder

Passwordless authentication via magic link email.

Enable secure, passwordless authentication by sending users a one-time magic link via email. Provides a seamless login experience without requiring password management.

Build magic link notifications

Magic link

Notify users when they're mentioned in comments or discussions.

Keep users engaged by notifying them across in-app, email, and push channels when someone mentions them. Includes contextual information about where they were mentioned.

Build mention notifications

Mentions

Nudge users to complete setup with in-app and email reminders.

Send an in-app nudge when onboarding is incomplete, followed by an email reminder after 24 hours. Cancel the workflow when the user completes the remaining setup step.

Build onboarding reminder notifications

Onboarding incomplete reminder

Security notification when a user's password is changed.

Send immediate email notifications when account passwords are changed to alert users of potential security issues and provide peace of mind for authorized changes.

Build password changed notifications

Password changed

Celebrate when someone accepts a referral invitation.

Notify referrers when their invitation is accepted with an in-app message and follow-up email. Includes a delay to only send the email if the in-app notification wasn't seen.

Build referral accepted notifications

Referral accepted

Notify referrers when a referral completes a key conversion action.

Tell referrers when their invitee completes a meaningful action beyond signup. Uses in-app first with a delayed email if the notification wasn't seen.

Build referral converted notifications

Referral converted

Notify referrers when their referral reward is ready to claim.

Wait through a reward hold period, then notify referrers via in-app and email when their credit or reward is available. Closes the referral loop with a clear payout moment.

Build referral reward notifications

Referral reward earned

Invite new users via referral with automated reminder.

Send referral invitations with a delayed reminder email after 3 days if not accepted. The reminder is automatically cancelled if the referral is accepted.

Build referral invite notifications

Referral sent

Batch and notify users of replies to their comments.

Intelligently batch multiple replies within a 15-minute window and notify users via in-app, email, and push. Includes a 60-minute delay before out-of-app notifications to reduce noise.

Build reply notifications

Replies

Enable users to securely reset their passwords by sending a time-limited reset link via email. Essential for account recovery and security workflows.

Build password reset notifications

Reset password

Remind users before their free trial expires with a timed email sequence.

Send a three-email sequence at 7, 3, and 1 days before trial expiration. Trigger once when 7 days remain and cancel if the user upgrades.

Build trial ending notifications

Trial ending

Notify users when usage metrics cross warning or critical thresholds.

Route threshold alerts by severity with email for warnings and email plus SMS for critical limits. Helps SaaS products prevent surprise overages and service interruptions.

Build usage threshold alert notifications

Usage threshold alerts

Welcome new users with in-app and email messages.

Create a great first impression by welcoming new users with both an in-app message and email. Direct them to key resources and help them get started with your product.

Templates