zenloop Developer Hub

Welcome to the zenloop developer hub. You'll find comprehensive documentation to help you start working with zenloop as quickly as possible, as well as support if you get stuck. Happy looping!

Get Started    

Customizing design and implementation

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:

Updated 5 months ago

Customizing design and implementation


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.