Our "Email Embed" channel offers a seamless way to integrate Net Promoter Score (NPS) surveys into your email campaigns, utilizing your existing email systems like Emarsys, Salesforce and more.
This integration allows for direct visibility of email Key Performance Indicators (KPIs) in your email platform and ensures that survey invitations match the look and feel of your other organizational emails.
This guide walks you through the steps to integrate a custom HTML for NPS surveys into Emarsys email platform.
Preparation: Creating Your HTML in zenloop
Begin by generating your survey's HTML through the "Email Embedded" channel. This article guide details the creation process to prepare your HTML.
Choosing Between Emarsys Templates: VCE or VCMS?
Emarsys offers two template systems: VCMS and VCE. The choice depends on the start date of your Emarsys collaboration; typically, only one system is in use. If unsure about the template system to use, refer to the visuals provided below or consult your Emarsys Client Success Manager for guidance.
Integrating HTML with VCE Templates.
1. Initiate Email Creation: In Emarsys, navigate to Campaigns > Email Campaigns > Create Email.
2.Template Selection: Choose "Create block-based email" from the popup. Tip: Duplicate the chosen template to simplify error correction on your first attempt. This action opens the template in edit mode.
3. Access the Style Editor: Select the "Style Editor" tab.
4. Locate the Responsive Design Section: Find the line that reads "@media only screen and (max-width:xxx px) {".
6. Insert CSS Classes: Directly below the identified line, add the following CSS classes:
.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; }
7. Create a New Block: Switch to the "Blocks" tab and click "Create New Block". Scroll down to find the new block.
8. Embed the NPS Survey HTML: First, insert this code snippet in the new block:
<table>
<tbody>
<tr><td align="center">
<!-- snippet code here -->
</td></tr>
</tbody>
</table>
9. Paste the zenloop HTML: Insert the HTML generated from zenloop between the provided code snippets. The intended area for insertion is highlighted in the accompanying screenshots.
After you inserted the code, the NPS scale will appear on the right. The grey line around the scale will not appear in the email. You can ignore it, it's not part of the code.
Further styling options are described here.
If you receive the following error after pasting as described, please do the following:
Please embed within the block within the <tr> tag.
<img> should be within the <tr> tags as here:
10. Finalize the Block: Name the block (e.g., zenloop NPS) and save it. This block is now available in the library for use in any campaign.
Integrating HTML with VCMS Templates
1. Campaign Setup: Start by either creating a new email campaign or opening an existing one in Emarsys through Campaigns > Email Campaigns > Email Campaigns.
2. Add a Group: Insert a group at the desired location in the email.
3. Activate Extended Mode: Enable extended mode in any group. Remember to save before toggling to extended mode, then proceed to activate it. If your browser blocks pop-ups, allow an exception for this action.
4. Switch to HTML Mode: Click on the "<>" symbol in the pop-up to enter HTML editing mode.
5. Clear Existing HTML: Remove all visible HTML code before proceeding.
6. Insert HTML and CSS for NPS Survey: Now, insert the HTML for the NPS survey, including the CSS styling crucial for responsive design. This code optimizes the survey's appearance across different devices and email clients.
<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]-->
<table align="center" 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"> </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?is_a_test=false" 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"> </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?is_a_test=false" 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"> </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?is_a_test=false" 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"> </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?is_a_test=false" 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"> </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?is_a_test=false" 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"> </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?is_a_test=false" 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"> </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?is_a_test=false" 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"> </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?is_a_test=false" 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"> </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?is_a_test=false" 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"> </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?is_a_test=false" 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"> </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?is_a_test=false" 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_hash_id>/opened" height="1" width="1">
</td>
</tr>
<tr>
<td height="20"> </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>
Note: Please be aware that in the VCMS template from Emarsys the style tags above cannot be integrated in the email header but only in the html part. This it the reason we cannot provide a code which is working for all email clients (e.g. Gmail will unfortunately show the desktop version). The solution to this challenge is to use the VCE editor.
7. Customize with Your Survey Hash ID: Locate the placeholder <survey_hash_id> within the provided HTML and replace it with your unique survey hash ID, found in the zenloop platform.
8. Replace all <survey_hash_id> parts with your own own survey hash ID. You should find and replace 12 positions.
Your hash id is a long cryptic ID. Here is an example so you know what to look for:
OHdSOUNKbUIzYkE4Y0dqMGtKRJMrT3F6bnlmR3pQQklFSjFzait3RlJvRT0%1D
9. Save and Preview: After inserting your survey hash ID, save your changes to preview the NPS scale. At this stage, you can customize the headline text by replacing "zenloop" with your company name or specific feedback touchpoint.
10. Enable Click Tracking (Optional): For enhanced performance tracking, enable the "Auto-Track" feature. This action converts zenloop links into domain-specific links for better analytics.
Another pop-up opens:
In this pop-up you scroll down to the green button "Track":
After clicking on "Track", the links in the HTML view of zenloop links will be converted to your domain links. Shown here as "emails.company.de", in a real example would be "email.facebook.de" or also "newsletter.google.de".
Afterwards "Save" is clicked again.
11. Final Steps: Conclude the integration by saving your changes and closing the pop-up. Your email is now ready for further editing or dispatch.
The group in extended mode can be recognized by </> in the group view:
