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

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

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

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

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.

Batch

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

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

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

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

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

Pre-built notification templates and components

SOLUTIONS

INTEGRATIONS