Creatively helping our world

<mjml>
  <mj-head>
    {{#if font.src}}
    {{#if font.isStylesheet}}
    <mj-font name="{{font.name}}" href="{{font.src}}" />
    {{else}}

    <mj-style>
      @font-face {
        font-style: normal;
        font-family: '{{font.name}}';
        font-weight: 400;
        mso-font-alt: sans-serif;
        src: url({{font.src}}) format('{{font.format}}');
      }
    </mj-style>
    {{/if}}
    {{/if}}
    <mj-attributes>
      {{#if font}}
      <mj-all font-family="{{font.family}}" />
      {{/if}}
      <mj-text padding="0" />
    </mj-attributes>
    <mj-html-attributes>
      <mj-selector path=".sig table">
        <mj-html-attribute name="align">left</mj-html-attribute>
      </mj-selector>
    </mj-html-attributes>
    <mj-style inline="inline">
      .sig {
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
    </mj-style>
    <mj-style inline="inline">
      .sig-link a {
        text-decoration: {{textDecoration}} !important;
      }
    </mj-style>
  </mj-head>
  <mj-body width="560px" background-color="transparent">
    <mj-section padding="0" text-align="left" css-class="sig">
      <mj-column padding="0">
        <mj-text padding="0" css-class="sig-link">
          <table cellpadding="0" cellspacing="0" border="0" role="presentation" width="100%">
            <tr>
              {{#if (or photo (eq sharing.type 'QR_CODE') (eq sharing.type 'BUTTON'))}}
              <td
                width="{{appearance.photoSize}}"
                style="vertical-align: top; padding-right: 20px; width: {{appearance.photoSize}}px;"
              >
                {{#if photo}}
                <img
                  data-sig-photo
                  src="{{photo}}"
                  alt="{{firstName}} {{lastName}}"
                  width="{{appearance.photoSize}}"
                  height="{{appearance.photoSize}}"
                  style="border-radius: {{photoRadius appearance.photoStyle}}; display: block; object-fit: cover; width: {{appearance.photoSize}}px; height: {{appearance.photoSize}}px;"
                />
                {{/if}}
                <div data-sig-sharing="QR_CODE" style="{{#unless (eq sharing.type 'QR_CODE')}}display:none{{/unless}}">
                  <a
                    href="{{profileUrl}}"
                    style="text-decoration: {{textDecoration}}; display: block; margin: 12px auto 0; width: 80px"
                  >
                    <img
                      src="{{qrCodeUrl}}"
                      width="80"
                      height="80"
                      alt="QR Code"
                      style="display: block; width: 80px; height: 80px"
                    />
                  </a>
                  <p
                    data-sig-sharing-title
                    style="font-size: 8px; color: {{appearance.textColor}}; margin: 4px auto 0; text-align: center; line-height: 10px; width: 80px;"
                  >
                    {{ sharing.title }}
                  </p>
                </div>
                <div data-sig-sharing="BUTTON" style="{{#unless (eq sharing.type 'BUTTON')}}display:none{{/unless}}">
                  <a
                    href="{{profileUrl}}"
                    data-sig-sharing-title
                    style="text-decoration: {{textDecoration}}; display: block; margin: 12px auto 0; width: {{appearance.photoSize}}; background-color: {{appearance.primaryColor}}; color: #ffffff; border-radius: 6px; padding: 8px 4px; font-size: 12px; text-align: center; line-height: 12px; box-sizing: border-box;"
                  >
                    {{ sharing.title }}
                  </a>
                </div>
              </td>
              {{/if}}
              <td style="vertical-align: top">
                <table cellpadding="0" cellspacing="0" border="0" role="presentation" width="100%">
                  <tr>
                    <td
                      data-sig-text-color
                      style="font-weight: 700; color: {{appearance.textColor}}; padding-bottom: 4px;"
                    >
                      {{ firstName }} {{ lastName }}{{#if pronouns}} ({{ pronouns }}){{/if}}
                    </td>
                  </tr>

                  {{#if profession}}
                  <tr>
                    <td data-sig-text-color style="color: {{appearance.textColor}}; padding-bottom: 4px;">
                      {{ profession }}
                    </td>
                  </tr>
                  {{/if}}

                  {{#if company}}
                  <tr>
                    <td data-sig-text-color style="color: {{appearance.textColor}};">
                      {{ company }}
                    </td>
                  </tr>
                  {{/if}}

                  {{#if contactInfo}}
                  <tr>
                    <td style="padding: 8px 0 12px 0"><div data-sig-divider style="border-top: 1px solid {{appearance.secondaryColor}}; font-size: 0; line-height: 0; height: 0; mso-line-height-rule: exactly;"></div></td>
                  </tr>
                  {{/if}}

                  {{#each contactInfo}}
                  {{#if this.title}}
                  <tr>
                    <td style="padding-bottom: 6px">
                      {{#if this.value}}
                      <table cellpadding="0" cellspacing="0" border="0" role="presentation">
                        <tr>
                          {{#if this.icon}}
                          <td style="vertical-align: middle; padding-right: 8px">
                            <a href="{{this.value}}" style="text-decoration: {{textDecoration}};">
                              <img
                                data-sig-icon
                                src="{{this.icon}}"
                                alt=""
                                width="20"
                                height="20"
                                style="display: block"
                              />
                            </a>
                          </td>
                          {{/if}}
                          <td style="vertical-align: middle">
                            <a
                              href="{{this.value}}"
                              data-sig-text-color
                              style="color: {{../appearance.textColor}}; text-decoration: {{textDecoration}};"
                            >{{ this.title }}</a>
                          </td>
                        </tr>
                      </table>
                      {{else}}
                      <table cellpadding="0" cellspacing="0" border="0" role="presentation">
                        <tr>
                          {{#if this.icon}}
                          <td style="vertical-align: middle; padding-right: 8px">
                            <img
                              data-sig-icon
                              src="{{this.icon}}"
                              alt=""
                              width="20"
                              height="20"
                              style="display: block"
                            />
                          </td>
                          {{/if}}
                          <td style="vertical-align: middle">
                            <span data-sig-text-color style="color: {{../appearance.textColor}};">{{
                              this.title
                            }}</span>
                          </td>
                        </tr>
                      </table>
                      {{/if}}
                    </td>
                  </tr>
                  {{/if}}
                  {{/each}}

                  {{#if socials}}
                  <tr>
                    <td style="padding: 8px 0"><div data-sig-divider style="border-top: 1px solid {{appearance.secondaryColor}}; font-size: 0; line-height: 0; height: 0; mso-line-height-rule: exactly;"></div></td>
                  </tr>
                  <tr>
                    <td>
                      {{#each socials}}{{#if this.value}}{{#if this.title}}
                      <table
                        cellpadding="0"
                        cellspacing="0"
                        border="0"
                        role="presentation"
                        style="display: inline-table; margin: 2px 12px 2px 0; vertical-align: middle"
                      >
                        <tr>
                          {{#if this.icon}}
                          <td style="vertical-align: middle; padding-right: 6px">
                            <a href="{{this.value}}" style="text-decoration: {{textDecoration}};">
                              <img
                                data-sig-icon
                                src="{{this.icon}}"
                                alt=""
                                width="18"
                                height="18"
                                style="display: block"
                              />
                            </a>
                          </td>
                          {{/if}}
                          <td style="vertical-align: middle">
                            <a
                              href="{{this.value}}"
                              data-sig-text-color
                              style="color: {{../appearance.textColor}}; text-decoration: {{textDecoration}};"
                            >{{ this.title }}</a>
                          </td>
                        </tr>
                      </table>
                      {{else}}{{#if this.icon}}
                      <table
                        cellpadding="0"
                        cellspacing="0"
                        border="0"
                        role="presentation"
                        style="display: inline-table; margin: 2px 10px 2px 0; vertical-align: middle"
                      >
                        <tr>
                          <td style="vertical-align: middle">
                            <a href="{{this.value}}" style="text-decoration: {{textDecoration}}">
                              <img
                                data-sig-icon
                                src="{{this.icon}}"
                                alt=""
                                width="18"
                                height="18"
                                style="display: block"
                              />
                            </a>
                          </td>
                        </tr>
                      </table>
                      {{/if}} {{/if}}{{/if}}{{/each}}
                    </td>
                  </tr>
                  {{/if}}
                </table>
              </td>
            </tr>
          </table>
        </mj-text>
      </mj-column>
    </mj-section>

    {{#if banner.image}}
    <mj-section padding="16px 0 0 0" css-class="sig">
      <mj-column padding="0">
        {{#if banner.href}}
        <mj-image
          src="{{banner.image}}"
          alt=""
          align="left"
          padding="0"
          href="{{banner.href}}"
          border-radius="4px"
          width="560px"
        />
        {{else}}
        <mj-image src="{{banner.image}}" alt="" align="left" padding="0" border-radius="4px" width="560px" />
        {{/if}}
      </mj-column>
    </mj-section>
    {{/if}}

    {{#if legalDisclaimer}}
    <mj-section padding="10px 0 0 0" css-class="sig">
      <mj-column padding="0">
        <mj-text font-size="10px" align="left" padding="0" line-height="14px">
          <div data-sig-text-color style="color: {{appearance.textColor}};">{{{legalDisclaimer}}}</div>
        </mj-text>
      </mj-column>
    </mj-section>
    {{/if}}
  </mj-body>
</mjml>


Classic

Optional phone number for logging into the account.

Add legal text shown at the bottom of your email signature.

Add {{title}}

Auto Tags

Auto tag title

Choose the content you want to show on your profile.

Shows user's location beneath profile image on their card.

Collect contact info via a form, then send an automated text and email with your details.

Color for the job title, company and more

Customize the text shown on your sharing block.

Default Title

When an employee leaves the company, certain identity providers such as Entra ID automatically suspend the user account for a 30-day grace period before it is permanently deleted.

Do you want to override existing content for all users?

Do you want to override existing title and order for all users

Job Title

Job title

Displays job title on the digital business card.

Left Title

Lock content is available on the <0>{{name}}</0>.

Mobile number displayed on the digital business card.

Name

This field is used to add a URL that points to the profile picture of the user. The URL should be a direct link to an image file (e.g., JPG, PNG) accessible online.

Placeholder Job Title

Primary email displayed on the digital business card.

Right Title

Secondary email displayed on the digital business card.

Section Title

Select the entire email content and select "Copy".

Controls whether users receive an onboarding email automatically.

Subject

Sync to {{title}}

Sync your Wave contacts to {{title}}.

Assigns users to a team; must exactly match dashboard name.

The URL is required when Display Text is not empty

The job title is too long

The job title is too short

The title is required

The title is too long

The title is too short

Title

Override the content of the digital wallet

Update the font and colors of your profile's text.

Update your photo, background, job title, company, and location.

Sets card language; defaults to English if blank.

Wave will send a text message with your contact info and profile to:

Website Title

Work number displayed on the digital business card.

Work extension displayed on the digital business card.

Your team will lose all company-branded content

Nate ArtfulGood

Founder

The Artful Good Initiative

Creatively helping our world