GuidesAPI Reference
Home

Customizing design and implementation

Suggest Edits

To help with setup, we've provided an example of how you can add to the code to include the survey question, "very likely" and "very unlikely" labels, and responsive design to show the scores vertically on mobile.

This particular example comes directly from the code we use for our own emails

Code to be placed in body tag:

<table border="0" cellpadding="0" cellspacing="0" class="q1" width="540">
  <tbody>
    <tr>
      <td align="center" class="q11" style="font-size:22px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:normal;line-height:30px;color:#111111;">How likely are you to recommend Zenloop to a friend or colleague?</td>
    </tr>
    <tr>
      <td height="30">&nbsp;</td>
    </tr>
    <tr>
      <td align="center">
      <table bgcolor="#f4f4f4" border="0" cellpadding="0" cellspacing="0" class="q1" dir="rtl" style="direction:rtl;">
        <tbody>
          <tr>
            <th align="center" class="button" dir="ltr" height="40" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/10" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">10 <span class="b010" style="display: none;">- Very likely</span></a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/9" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">9</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/8" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">8</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/7" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">7</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/6" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">6</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/5" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">5</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/4" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">4</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/3" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">3</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/2" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">2</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/1" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">1</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/0" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">0 <span class="b010" style="display: none;">- Very unlikely</span></a></th>
          </tr>
        </tbody>
      </table>
      <img src="https://responses.zenloop.com/web/surveys/<survey_public_hash_id>/opened" height="1" width="1">
      </td>
    </tr>
    <tr>
      <td height="20">&nbsp;</td>
    </tr>
    <tr class="h">
      <td>
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
          <tr>
            <td align="left" style="font-size:12px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">Very unlikely</td>
            <td align="right" style="font-size:12px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">Very likely</td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>

Code to be placed in head tag:

<style type="text/css">
@media only screen and (max-width:400px) {
    .q1 { width:100% !important; min-width:0 !important; }
    .q11 { font-size:18px !important;line-height:26px !important;}
    .button { display:block !important; width:100% !important;border-bottom:2px solid #ffffff; padding:10px; height:auto !important;}
    .h { display:none !important; }
    .b010 {display: inline-block !important; }
}
</style>
<!--[if gte mso 9]>
<style type="text/css">
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0; }
table td, table th { border-collapse:collapse; font-size:1px; line-height:1px; }
<xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml>
</style>
<![endif]-->

Result:

550

Updated about 4 years ago