@social-mail/social-mail-client NPM

Social Mail Web Client

Design

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

Engagement Image Replacement

HTML contains regular buttons with embedded emoji and counts.
We cannot use SVG as SVG does not have automatic width calculation. This will create mismatch of sizes in content display and engagement images.
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>

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago