Mjml: Integrating compilation for specific mailer attributes

[Renjamin]

Greetings,

I'm looking to compile my MJML with pardot marketing attributes, Is there anything I could do to 'white-list' some attributes on the JS side?

I'm thinking of an example like this:

<mj-text pardot-region="reg_firstname_lastname" padding-bottom="0" padding-top="0" color="#212121" font-size="16px" font-family="Montserrat, Arial, Helvetica, sans-serif"> %%user_first_name%% %%user_last_name%% </mj-text>

[ngarnier]

Hey @Renjamin,

2 options here, depending on your need:

• Easy solution: as mj-text can take any HTML, you could just add it to HTML instead of inside the MJML component, like so:

<mj-text padding-bottom="0" padding-top="0" color="#212121" font-size="16px" font-family="Montserrat, Arial, Helvetica, sans-serif">
  <p pardot-region="reg_firstname_lastname"> %%user_first_name%% %%user_last_name%% </p>
</mj-text>

• More advanced solution: you can fork MJML and tweak the components (or create new ones based on the default ones) where you need it. Have a look at this example to see how homerjam added support for specific tags (mc-*) used in his ESP (same use-case as yours)

Hope it helps!

[ngarnier]

I'm closing as it's a duplicate of https://github.com/mjmlio/mjml/issues/200, but feel free to still comment if it doesn't solve your problem!

[Renjamin]

That's lovely, thank you. I'll give it a spin.

[LukyVj]

Hello fellows, so if you are still struggling with pardot-attributes and if you need them on a <div> and not only on a <mj-text>, I've found a nice little "hack" to achieve this.

It requires to use the <mj-raw> element. With that you can write any tags you want.
So, let's say you need a <mj-section> with content inside, but you need to be able to repeat this section in pardot. You'll need the pardot-repeatable pardot-region attributes on it.

So, your section will look something like this:

<mj-section>
   <mj-column>
   <mj-image src="image/url.png" />
    <mj-text>Foo bar baz qux</mj-text>
  </mj-column>
</mj-section>

Right?

So now you need to repeat it, with the pardot-repeatable pardot-region, you'll just have to use the <mj-raw> component as a wrapper of your section. So in the end, you'll have something similar to this:

<mj-raw>
  &lt;div pardot-repeatable pardot-region&gt;
</mj-raw>
  <mj-section>
     <mj-column>
     <mj-image src="image/url.png" />
      <mj-text>Foo bar baz qux</mj-text>
    </mj-column>
  </mj-section>
<mj-raw>
  &lt;/div&gt;
</mj-raw>

That being said, why do we need to use < and > instead of < & >?
Well, it's because I think that MJML is a React app, and by default, if react reads : <div> without a closing tag, it will autoclose it. To avoid that, declare your divs like this: <div>

Thanks to @ngarnier for scratching his head with me on this problem! I hope it will help some of you!

[iRyusa]

Note that in MJML 4 the < & > are no longer needed 👍

[LukyVj]

@iRyusa That's a super good news! \o/

[nicmare]

i had that exact same approach of using but i think it's interfering with the surrounding table comment!
mj code of three buttons:

      <mj-raw>
        <div pardot-repeatable pardot-region>
      </mj-raw>
      <mj-section padding="0 0 20px 15px">
        <mj-column>
          <mj-button css-class="region region-link" align="left" href="#" inner-padding="10px 25px" border="2px solid #1DB0E7" color="#1DB0E7" border-radius="40px" mj-class="dosis-sm" background-color="#ffffff">Button Blau</mj-button>
        </mj-column>
      </mj-section>
      <mj-raw>
        </div>
      </mj-raw>

      <mj-raw>
        <div pardot-repeatable pardot-region>
      </mj-raw>
      <mj-section padding="0 0 20px 15px">
        <mj-column>
          <mj-button css-class="region region-link" align="left" href="#" inner-padding="10px 25px" border="2px solid #1DB0E7" color="#1DB0E7" border-radius="40px" mj-class="dosis-sm" background-color="#ffffff">Button Blau</mj-button>
        </mj-column>
      </mj-section>
      <mj-raw>
        </div>
      </mj-raw>

      <mj-raw>
        <div pardot-repeatable pardot-region>
      </mj-raw>
      <mj-section padding="0 0 20px 15px">
        <mj-column>
          <mj-button css-class="region region-link" align="left" href="#" inner-padding="10px 25px" border="2px solid #1DB0E7" color="#1DB0E7" border-radius="40px" mj-class="dosis-sm" background-color="#ffffff">Button Blau</mj-button>
        </mj-column>
      </mj-section>
      <mj-raw>
        </div>
      </mj-raw>

code generated by mjml:

            <div pardot-repeatable pardot-region>
                <!--[if mso | IE]><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
                <div style="margin:0px auto;max-width:600px;">
                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                    <tbody>
                      <tr>
                        <td style="direction:ltr;font-size:0px;padding:0 0 20px 15px;text-align:center;">
                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:585px;" ><![endif]-->
                          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                              <tbody>
                                <tr>
                                  <td align="left" vertical-align="middle" class="region region-link" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                      <tr>
                                        <td align="center" bgcolor="#ffffff" role="presentation" style="border:2px solid #1DB0E7;border-radius:40px;cursor:auto;mso-padding-alt:10px 25px;background:#ffffff;" valign="middle">
                                          <a href="#" style="display:inline-block;background:#ffffff;color:#1DB0E7;font-family:Dosis,'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:bold;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:40px;" target="_blank" pardot-region pardot-region-type="link"> Button Blau </a>
                                        </td>
                                      </tr>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          <!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!--[if mso | IE]></td></tr></table></td></tr><![endif]-->
              </div>
              <div pardot-repeatable pardot-region>
                <!--[if mso | IE]><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
                <div style="margin:0px auto;max-width:600px;">
                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                    <tbody>
                      <tr>
                        <td style="direction:ltr;font-size:0px;padding:0 0 20px 15px;text-align:center;">
                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:585px;" ><![endif]-->
                          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                              <tbody>
                                <tr>
                                  <td align="left" vertical-align="middle" class="region region-link" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                      <tr>
                                        <td align="center" bgcolor="#ffffff" role="presentation" style="border:2px solid #1DB0E7;border-radius:40px;cursor:auto;mso-padding-alt:10px 25px;background:#ffffff;" valign="middle">
                                          <a href="#" style="display:inline-block;background:#ffffff;color:#1DB0E7;font-family:Dosis,'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:bold;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:40px;" target="_blank" pardot-region pardot-region-type="link"> Button Blau </a>
                                        </td>
                                      </tr>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          <!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!--[if mso | IE]></td></tr></table></td></tr><![endif]-->
              </div>
              <div pardot-repeatable pardot-region>
                <!--[if mso | IE]><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
                <div style="margin:0px auto;max-width:600px;">
                  <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                    <tbody>
                      <tr>
                        <td style="direction:ltr;font-size:0px;padding:0 0 20px 15px;text-align:center;">
                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:585px;" ><![endif]-->
                          <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                              <tbody>
                                <tr>
                                  <td align="left" vertical-align="middle" class="region region-link" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
                                      <tr>
                                        <td align="center" bgcolor="#ffffff" role="presentation" style="border:2px solid #1DB0E7;border-radius:40px;cursor:auto;mso-padding-alt:10px 25px;background:#ffffff;" valign="middle">
                                          <a href="#" style="display:inline-block;background:#ffffff;color:#1DB0E7;font-family:Dosis,'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;font-weight:bold;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:40px;" target="_blank" pardot-region pardot-region-type="link"> Button Blau </a>
                                        </td>
                                      </tr>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          <!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!--[if mso | IE]></td></tr></table></td></tr><![endif]-->
              </div>

i try to highlight the problem by extracting a part of the generated code:

              <!--[if mso | IE]></td></tr></table></td></tr><![endif]-->
              </div>
              <div pardot-repeatable pardot-region>
              <!--[if mso | IE]><tr><td class="" width="600px" >

you notice the break of the table code by divs? i wonder how this will affect some email clients! especially when you repeat those sections in pardot editor!

[iRyusa]

Even if you use the div generated by MJML with https://documentation.mjml.io/#mj-html-attributes it would be really hard to achieve repeatable section because of ghost table for Outlook. I'm afraid there's not much we can do for you about that :/