Social Mail Web Client

Social Mail Web Client

Design

1. Social Mail client uses images to track mail reads.
2. Social Mail embeds engagement tracker for old email clients.

Engagement Image Replacement

1. HTML contains regular buttons with embedded emoji and counts.
2. We cannot use SVG as SVG does not have automatic width calculation. This will create mismatch of sizes in content display and engagement images.
3. Button will contain specific class, which will be replaced at runtime with actual count.

Future Template

<table style="width:100%">
  <tr>
    <td>
      <a
        class="social-mail-like"
        style="text-decoration: none;outline: none;border:none; margin-right: 5px"
        title="Title"
        data-social-mail-command="❤️"
        data-social-mail-transform="buttons-3x">
        <img
            data-element="image"
            style="max-height:30px;"/>
        <button
            data-element="template"
            style="margin: 1px;padding:2px;padding-left: 5px;padding-right: 5px; border: solid 1px lightgray; border-radius: 9999px; display: inline-flex; align-items: center;">❤️<span
                data-social-mail-element="count"/>
        </button>
    </a>
      <a
        class="social-mail-dislike"
        style="text-decoration: none;outline: none;border:none; margin-right: 5px"
        title="Title"
        data-social-mail-command="😔"
        data-social-mail-transform="buttons-3x">
        <img
            data-element="image"
            style="max-height:30px;"/>
        <button
            data-element="template"
            style="margin: 1px;padding:2px;padding-left: 5px;padding-right: 5px; border: solid 1px lightgray; border-radius: 9999px; display: inline-flex; align-items: center;">😔<span
                data-social-mail-element="count"/>
        </button>
    </a>
    </td>
    <td style="text-align:right">
      <span
        data-social-mail-tracker="tracker"
        class="social-mail-views"
        style="text-decoration: none;outline: none;border:none; margin-right: 5px"
        title="Title"
        data-social-mail-command="👁️‍🗨️"
        data-social-mail-transform="buttons-3x">
        <img
            data-element="image"
            style="max-height:30px;"/>
        <button
            data-element="template"
            style="margin: 1px;padding:2px;padding-left: 5px;padding-right: 5px; border: solid 1px lightgray; border-radius: 9999px; display: inline-flex; align-items: center;">👁️‍🗨️<span
                data-social-mail-element="count"/>
        </button>
    </span>
    </td>
  </tr>
</table>