HTML

HTML Template

Here is the HTML template mentioned in https://docs.planisys.net/dmds/ftp.html#ejemplo-csv-activo

You can copy and paste this block into any WYSIWYG editor and modify it according to your needs.

Just keep in mind that each section you add vertically should be either a new table or a row (<tr></tr>) of an existing table.

To achieve more subdivisions, you can include tables within tables.

div elements are not used in email pieces, but table elements are.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Email Subject</title>
    <style>
        /* Reset styles to ensure consistency across different email clients */
        body, table, td, div {
            font-family: Arial, sans-serif;
            font-size: 14px;
            line-height: 1.6;
            color: #333333;
        }
        table {
            border-collapse: collapse;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }
        img {
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
            -ms-interpolation-mode: bicubic;
        }
        a {
            color: #007bff;
            text-decoration: underline;
        }
        @media screen and (max-width: 600px) {
            /* Mobile-specific styles */
            table[class="container"] {
                width: 100% !important;
            }
            td[class="stack-column"], td[class="stack-column-center"] {
                display: block;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            td[class="stack-column-center"] {
                text-align: center !important;
            }
            td[class="stack-column-top"], td[class="stack-column-center-top"] {
                display: block;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
                text-align: left !important;
            }
            div[class="email-button"] {
                display: block;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
        }
    </style>
</head>
<body style="margin: 0; padding: 0;">
    <!-- Email content goes here -->
    <table class="container" cellpadding="0" cellspacing="0" border="0" width="100%" align="center" style="max-width: 600px; margin: 0 auto;">
        <tr>
            <td align="left" valign="top" style="padding: 20px; background-color: #f7f7f7;">
                <!-- Header -->
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td align="left" valign="top">
                            <img src="https://planisys.net/static/img/planisys/planisys-horizontal.png" alt="Planisys" width="497" height="169" style="display: block; margin-bottom: 10px;">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="left" valign="top" style="padding: 20px; background-color: #ffffff;">
                <!-- Main content -->
                <h1 style="color: #333333; font-size: 24px; margin-bottom: 20px;">Hola XYZNOMBREXYZ XYZAPELLIDOXYZ!</h1>
                <p style="margin-bottom: 20px;">&#x1F389; Exciting News! Nueva versi&#xF3;n  &#x1F680; disponible para <strong>Free-Trial</strong> &#x1F388;&#x1F635;</p>
                <p style="margin-bottom: 20px;">Please click <a href="https://www.planisys.net/pdns">here</a> for more information</p>
                <p style="margin-bottom: 20px;">Best regards,</p>
                <p style="margin-bottom: 20px;">Planisys - Cibersecurity</p>
            </td>
        </tr>
        <tr>
            <td align="center" valign="top" style="padding: 20px; background-color: #f7f7f7;">
                <!-- Footer -->
                <p style="margin-bottom: 10px; font-size: 12px;">
                    Planisys 2023 &copy; all rights reserved.<br>
                    801 Brickell Ave. Suite #800<br>
                    Miami FL, 33131<br>
                    <a href=XYZDESUSCRIPCIONXYZ style="color: #007bff; text-decoration: underline;">Desuscribirse</a> de nuestros mails.<br>
                </p>
            </td>
        </tr>
    </table>
</body>
</html>

MJML Template

You can also use the site https://mjml.io to create email pieces; here’s an example template:

<mjml>
<mj-style inline="inline">
.body-section {
-webkit-box-shadow: 1px 4px 11px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 1px 4px 11px 0px rgba(0, 0, 0, 0.15);
box-shadow: 1px 4px 11px 0px rgba(0, 0, 0, 0.15);
}
</mj-style>
<mj-style inline="inline">
.text-link {
color: #5e6ebf
}
</mj-style>
<mj-style inline="inline">
.footer-link {
color: #888888
}
</mj-style>

<mj-body>
<mj-section>
  <mj-column width="100%">

    <mj-image width="200px" src="https://planisys.net/static/img/planisys/planisys-horizontal.png">
    </mj-image>
    <mj-divider border-color="grey"></mj-divider>
  </mj-column>

    <mj-column width="100%">
    <mj-text font-size="18px" color="#F45E43" font-family="helvetica">Estimado XYZNOMBREXYZ<br></br>
    </mj-text>

    <mj-text color="#637381" font-size="16px">
      <ul>
        <li style="padding-bottom: 20px"><strong>Lorem ipsum dolor:</strong> Sit amet consectetur adipisicing elit.</li>
        <li style="padding-bottom: 20px"><strong>Quia a assumenda nulla:</strong> Repudiandae accusamus obcaecati voluptatibus accusantium perspiciatis.</li>
        <li><strong>Tempora culpa porro labore:</strong> In quisquam optio quibusdam fugiat perspiciatis nobis.</li>
      </ul>
    </mj-text>

    <mj-button background-color="#5e6ebf" align="center" color="#ffffff" font-size="17px" font-weight="bold" href="https://google.com" width="300px">
      Free Trial
    </mj-button>

    <mj-social font-size="15px" icon-size="30px" mode="horizontal" padding="0" align="center">
        <mj-social-element name="facebook" href="https://planisys.net/" background-color="#A1A0A0">
        </mj-social-element>
        <mj-social-element name="google" href="https://planisys.net/" background-color="#A1A0A0">
        </mj-social-element>
        <mj-social-element name="twitter" href="https://planisys.net/" background-color="#A1A0A0">
        </mj-social-element>
        <mj-social-element name="linkedin" href="https://planisys.net/" background-color="#A1A0A0">
        </mj-social-element>
      </mj-social>
     <mj-divider border-color="grey" align="center"></mj-divider>
     <mj-text font-size="12px" color="black" font-family="Arial" align="center">
      Planisys 2023 &copy; all rights reserved<br></br>
      801 Brickell Ave. Suite #800<br></br>
      Miami FL, 33131<br></br>
      <a class="text-link" href="XYZDESUSCRIPCIONXYZ">Desuscribirse</a>
    </mj-text>

    </mj-column>

    </mj-body>
    </mjml>

HTML Template Corresponding to MJML

The site mjml.io allows us to convert the previous MJML template to HTML. The HTML code can be accessed at https://imagenes.planisys.com/Planisys-Template-MJML.html

The view of this URL on a mobile device is:

../_images/mjml-view-mobile.jpg

And this is the desktop view

../_images/mjml-view-desktop.jpg

Accented Letters - Unicode

á - &#xE1; (Lowercase “a” with acute accent)

é - &#xE9; (Lowercase “e” with acute accent)

í - &#xED; (Lowercase “i” with acute accent)

ó - &#xF3; (Lowercase “o” with acute accent)

ú - &#xFA; (Lowercase “u” with acute accent)

ü - &#xFC; (Lowercase “u” with umlaut/diaeresis)

ñ - &#xF1; (Lowercase “n” with tilde)

Ñ - &#xD1; (Uppercase “N” with tilde)

Emojis - Unicode

First of all, you should know the Unicode code of the Emojis from the page https://unicode.org/emoji/charts/emoji-list.html.

E.g., &#x1F635;

Here are more examples

😊 - Smiling Face with Smiling Eyes: &#x1F60A;

😂 - Face with Tears of Joy: &#x1F602;

🥰 - Smiling Face with Hearts: &#x1F970;

😍 - Smiling Face with Heart-Eyes: &#x1F60D;

🤩 - Star-Struck: &#x1F929;

🥳 - Partying Face: &#x1F973;

😎 - Smiling Face with Sunglasses: &#x1F60E;

🤗 - Hugging Face: &#x1F917;

🤔 - Thinking Face: &#x1F914;

😴 - Sleeping Face: &#x1F634;

🤢 - Nauseated Face: &#x1F922;

🥺 - Pleading Face: &#x1F97A;

😱 - Face Screaming in Fear: &#x1F631;

🥶 - Cold Face: &#x1F976;

😇 - Smiling Face with Halo: &#x1F607;

😈 - Smiling Face with Horns: &#x1F608;

🥴 - Woozy Face: &#x1F974;

🤯 - Exploding Head: &#x1F92F;

🤬 - Face with Symbols on Mouth: &#x1F92C;

🤮 - Face Vomiting: &#x1F92E;

💻 - Laptop Computer: &#x1F4BB;

🖥️ - Desktop Computer: &#x1F5A5;

📱 - Mobile Phone: &#x1F4F1;

📟 - Pager: &#x1F4DF;

⌨️ - Keyboard: &#x2328;

🖱️ - Computer Mouse: &#x1F5B1;

🖲️ - Trackball: &#x1F5B2;

🕹️ - Joystick: &#x1F579;

🗜️ - Clamp: &#x1F5DC;

📷 - Camera: &#x1F4F7;

🎥 - Movie Camera: &#x1F3A5;

📹 - Video Camera: &#x1F4F9;

📼 - Videocassette: &#x1F4FC;

📡 - Satellite Antenna: &#x1F4E1;

📺 - Television: &#x1F4FA;

🎮 - Video Game Controller: &#x1F3AE;

🎧 - Headphone: &#x1F3A7;

🔋 - Battery: &#x1F50B;

🔌 - Electric Plug: &#x1F50C;

⚡ - High Voltage Sign: &#x26A1;

➡️ - Right Arrow: &#x27A1;

⬅️ - Left Arrow: &#x2B05;

⬆️ - Up Arrow: &#x2B06;

⬇️ - Down Arrow: &#x2B07;

↔️ - Left-Right Arrow: &#x2194;

↕️ - Up-Down Arrow: &#x2195;

↖️ - Up-Left Arrow: &#x2196;

↗️ - Up-Right Arrow: &#x2197;

↘️ - Down-Right Arrow: &#x2198;

↙️ - Down-Left Arrow: &#x2199;

↩️ - Leftwards Arrow with Hook: &#x21A9;

↪️ - Rightwards Arrow with Hook: &#x21AA;

🔀 - Shuffle Tracks Button: &#x1F500;

🔁 - Repeat Button: &#x1F501;

🔂 - Repeat Single Button: &#x1F502;

🔄 - Counterclockwise Arrows Button: &#x1F504;

🔼 - Upwards Button: &#x1F53C;

⏫ - Fast Up Button: &#x23EB;

🔽 - Downwards Button: &#x1F53D;

⏬ - Fast Down Button: &#x23EC;

🚗 - Car: &#x1F697;

🚕 - Taxi: &#x1F695;

🚙 - Sport Utility Vehicle: &#x1F699;

🚚 - Delivery Truck: &#x1F69A;

🚛 - Articulated Lorry: &#x1F69B;

🚜 - Tractor: &#x1F69C;

🏍️ - Motorcycle: &#x1F3CD;

🛵 - Motor Scooter: &#x1F6F5;

🚲 - Bicycle: &#x1F6B2;

🛴 - Kick Scooter: &#x1F6F4;

🛺 - Auto Rickshaw: &#x1F6FA;

🚃 - Railway Car: &#x1F683;

🚄 - High-Speed Train: &#x1F684;

🚅 - Bullet Train: &#x1F685;

🚈 - Light Rail: &#x1F688;

🚞 - Mountain Railway: &#x1F69E;

🚆 - Train: &#x1F686;

🚇 - Metro: &#x1F687;

🚉 - Station: &#x1F689;

✈️ - Airplane: &#x2708;

🌏 - Earth Globe Asia-Australia: &#x1F30F;

🌎 - Earth Globe Americas: &#x1F30E;

🌐 - Globe with Meridians: &#x1F310;

🌑 - New Moon: &#x1F311;

🌒 - Waxing Crescent Moon: &#x1F312;

🌓 - First Quarter Moon: &#x1F313;

🌔 - Waxing Gibbous Moon: &#x1F314;

🌕 - Full Moon: &#x1F315;

🌖 - Waning Gibbous Moon: &#x1F316;

🌗 - Last Quarter Moon: &#x1F317;

🌘 - Waning Crescent Moon: &#x1F318;

🌙 - Crescent Moon: &#x1F319;

🌚 - New Moon Face: &#x1F31A;

🌛 - First Quarter Moon Face: &#x1F31B;

🌜 - Last Quarter Moon Face: &#x1F31C;

🌝 - Full Moon Face: &#x1F31D;

🌞 - Sun with Face: &#x1F31E;

🌟 - Glowing Star: &#x1F31F;

🌠 - Shooting Star: &#x1F320;

🌌 - Milky Way: &#x1F30C;

📧 - E-Mail: &#x1F4E7;

📨 - Incoming Envelope: &#x1F4E8;

📩 - Envelope with Arrow: &#x1F4E9;

📤 - Outbox Tray: &#x1F4E4;

📥 - Inbox Tray: &#x1F4E5;

📦 - Package: &#x1F4E6;

📫 - Closed Mailbox with Raised Flag: &#x1F4EB;

📪 - Closed Mailbox with Lowered Flag: &#x1F4EA;

📬 - Open Mailbox with Raised Flag: &#x1F4EC;

📭 - Open Mailbox with Lowered Flag: &#x1F4ED;

📮 - Postbox: &#x1F4EE;

🗳️ - Ballot Box with Ballot: &#x1F5F3;

🗂️ - Card Index Dividers: &#x1F5C2;

🗒️ - Spiral Notepad: &#x1F5D2;

🗓️ - Spiral Calendar: &#x1F5D3;

📋 - Clipboard: &#x1F4CB;

📝 - Memo: &#x1F4DD;

📜 - Scroll: &#x1F4DC;

📑 - Bookmark Tabs: &#x1F4D1;

🔒 - Locked: &#x1F512;

🔓 - Unlocked: &#x1F513;

🛡️ - Shield: &#x1F6E1;

🚪 - Door: &#x1F6AA;

🗝️ - Key: &#x1F5DD;

🕳️ - Hole: &#x1F573;

🕷️ - Spider: &#x1F577;

🕸️ - Spider Web: &#x1F578;

🌐 - Globe with Meridians: &#x1F310;

🌐 - Earth Globe Americas: &#x1F30E;

🌐 - Earth Globe Asia-Australia: &#x1F30F;

📡 - Satellite Antenna: &#x1F4E1;

🌐 - Globe with Meridians: &#x1F310;

📶 - Antenna Bars: &#x1F4F6;

📱 - Mobile Phone: &#x1F4F1;

📲 - Mobile Phone with Arrow: &#x1F4F2;

🛡️ - Shield: &#x1F6E1;

🚫 - Prohibited: &#x26D4;

⚠️ - Warning: &#x26A0;

🤖 - Robot Face: &#x1F916;

📥 - Inbox Tray: &#x1F4E5;

📤 - Outbox Tray: &#x1F4E4;