With our channel "Email embedded" it is possible to send NPS queries via existing e-mail systems (such as Emarsys, Salesforce, Optivo / Episerver, Mailchimp, Activecampaign, etc.). The advantages are that e-mail KPIs are directly visible in the existing e-mail sender and the layout is analogous to other company e-mails.
This article will guide you through the process of integrating the HTML created for the email sender Emarsys.
Preparation
HTML creation in Zenloop
First, an HTML must be created via the "Email embedded" channel, which is then inserted into Emarsys. This article explains how to create the HTML.
Emarsys VCE or VCMS template?
Emarsys has two types of templates, the VCMS and the VCE. Depending on when the collaboration with Emarsys was started, one or the other - rarely both in parallel - is used. If you are unsure which template to use, you can compare it with the screenshots below. Alternatively, the Emarsys Client Success Manager can also be contacted.
HTML integration when using the VCE template
1. start with a click in Emarsys on Campaigns > Email Campaigns > Create Email
2. for pop-up display, select "Create block-based email".
3. The selection of the existing templates appears. (Tip: Create a copy of the template to be used to easily revise possible errors the first time. The system switches to edit mode.
4. select the "Style Editor" tab
5. search for the line containing"@media only screen and (max-width:xxx px) {".
6. the following code is inserted exactly below the found line (css classes). Please copy the code snippet from here:
.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. now the tab "Blocks" is chosen and "Create New Block" is clicked. The new block will appear at the bottom of the block list, please scroll down.
8. the following code snippet must be inserted in the new empty block first:
<table>
<tbody>
<tr><td align="center">
<!-- snippet code here -->
</td></tr>
</tbody>
</table>
9. Now, the HTML code created in Zenloop in preparation via the "Email embedded" channel (see above: "Creating HTML in Zenloop") is inserted between the two code snippets from step 8. The area is marked blue in the screenshot.
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. Finally, the block is uniquely named as desired (e.g. Zenloop NPS) and the block is saved. The block is now stored in the block library and can be inserted into any campaign (=email to be sent out) based on this template (=email template).
HTML integration when using the VCMS template
1. An email campaign is created or an existing campaign is opened in Emarsys via Campaigns > Email Campaigns > Email Campaigns.
2. Any group is now added to the desired position of the e-mail.
3. The extended mode can be switched on in any group. Before the button marked in the screenshot can be clicked, it must be saved again. Click on "Switch to extended mode" to open a pop-up. If pop-ups are suppressed in your browser, please add an exception.
4. Click on <> in the pop-up to switch to the HTML mode of the editor
5. All visible HTML code is now deleted.
6. Now, insert the following code.
<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. Now go to the HTML code that was created in Zenloop in preparation via the "Email embedded" channel (see above: "Creating HTML in Zenloop") and find out the survey hash id
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. Now click the green button to "Save" which automatically brings you back to the editor view (vs. HTML view) and shows the centered NPS scale. Here you can change the text of the headline. Replace "Zenloop" with your own company or specific feedback touchpoint.
10. This step is optional, but recommended to track the clicks on the scale as a performance click in Emarsys. It is now necessary to click "Auto-Track".
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. To complete the process - after step 8 or 9 - close the pop-up by clicking on "Close" (next to "Save") and the e-mail can be edited regularly.
The group in extended mode can be recognized by </> in the group view:
