Below are two basic, ready-to-use One Click surveys in plain HTML. One for an NPS (0-10) scale, and the other being a CSAT star rating. Each is a self-contained code block that you can drop straight into an email template.
Feel free to edit the greeting, question, and sign-off in the code to match your own tone of voice. Only the ***...*** placeholders need special care, since they must stay inside the quotation marks.
Adding your survey links
Grapevine's One Click Survey feature gives you a complete, ready-to-use link for each answer option. You don't need to edit or reconstruct these links; just copy each one from your Grapevine dashboard and paste it straight in.
In the code block below, each row is marked with a placeholder like ***PASTE_YOUR_5_STAR_LINK_HERE***. Replace the whole placeholder with the matching link from Grapevine. The number in the placeholder tells you exactly which link goes where, so there's no guesswork matching them up.
Each placeholder sits between quotation marks inside an href attribute. Replace only the placeholder text, keeping the quotation marks either side:
Before:
html
<a href="***PASTE_YOUR_5_STAR_LINK_HERE***" ...>
After (pasting in your link):
html
<a href="https://yourstore.myshopify.com/tools/survey/one-click/abc123/def456?answer=5" ...>
As it stands, these links identify which answer was given but not who gave it. Every response comes back anonymous unless a further identifying parameter is added to the URL.
Please note: Which identifiers you can add depends both on where you're sending the email from and on the trigger for the flow or automation sending it.
See the articles linked below for further guidance:
CSAT (star rating)
html
<table align="center" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; background: #ffffff; border: 1px solid #eeeeee; border-radius: 6px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; color: #2c2c2a;">
<tbody>
<!-- Greeting -->
<tr>
<td style="font-size: 16px; line-height: 160%; padding: 28px 28px 0 28px;">
<p style="margin: 0;">Hi there,</p>
</td>
</tr>
<!-- Intro text -->
<tr>
<td style="font-size: 16px; line-height: 160%; padding: 12px 28px 0 28px;">
<p style="margin: 0;">How would you rate your recent order?</p>
</td>
</tr>
<!-- CSAT Star Survey Block -->
<tr>
<td style="padding: 20px 28px;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; border-collapse: separate; border-spacing: 0 8px;">
<tbody>
<!-- Paste your 5 star link between the quotation marks below, keeping the quotation marks in place -->
<tr>
<td style="border: 1px solid #bfe3c8; border-radius: 6px; background: #eefbf1;">
<a href="***PASTE_YOUR_5_STAR_LINK_HERE***" style="display: block; text-decoration: none; padding: 12px 16px; font-size: 15px; color: #2c2c2a;">
<span aria-hidden="true" style="color: #f5b301; font-size: 18px; padding-right: 10px;">★★★★★</span>5 stars
</a>
</td>
</tr>
<!-- Paste your 4 star link between the quotation marks below, keeping the quotation marks in place -->
<tr>
<td style="border: 1px solid #d3e9b8; border-radius: 6px; background: #f4fbe9;">
<a href="***PASTE_YOUR_4_STAR_LINK_HERE***" style="display: block; text-decoration: none; padding: 12px 16px; font-size: 15px; color: #2c2c2a;">
<span aria-hidden="true" style="font-size: 18px; padding-right: 10px;"><span style="color: #f5b301;">★★★★</span><span style="color: #cccccc;">★</span></span>4 stars
</a>
</td>
</tr>
<!-- Paste your 3 star link between the quotation marks below, keeping the quotation marks in place -->
<tr>
<td style="border: 1px solid #f0e0a6; border-radius: 6px; background: #fdf9ec;">
<a href="***PASTE_YOUR_3_STAR_LINK_HERE***" style="display: block; text-decoration: none; padding: 12px 16px; font-size: 15px; color: #2c2c2a;">
<span aria-hidden="true" style="font-size: 18px; padding-right: 10px;"><span style="color: #f5b301;">★★★</span><span style="color: #cccccc;">★★</span></span>3 stars
</a>
</td>
</tr>
<!-- Paste your 2 star link between the quotation marks below, keeping the quotation marks in place -->
<tr>
<td style="border: 1px solid #f3d0a6; border-radius: 6px; background: #fdf1e4;">
<a href="***PASTE_YOUR_2_STAR_LINK_HERE***" style="display: block; text-decoration: none; padding: 12px 16px; font-size: 15px; color: #2c2c2a;">
<span aria-hidden="true" style="font-size: 18px; padding-right: 10px;"><span style="color: #f5b301;">★★</span><span style="color: #cccccc;">★★★</span></span>2 stars
</a>
</td>
</tr>
<!-- Paste your 1 star link between the quotation marks below, keeping the quotation marks in place -->
<tr>
<td style="border: 1px solid #f3bcbc; border-radius: 6px; background: #fdecec;">
<a href="***PASTE_YOUR_1_STAR_LINK_HERE***" style="display: block; text-decoration: none; padding: 12px 16px; font-size: 15px; color: #2c2c2a;">
<span aria-hidden="true" style="font-size: 18px; padding-right: 10px;"><span style="color: #f5b301;">★</span><span style="color: #cccccc;">★★★★</span></span>1 star
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Sign-off -->
<tr>
<td style="font-size: 14px; line-height: 150%; padding: 0 28px 28px 28px; color: #8a8a8a;">
<p style="margin: 0;">Thanks for your feedback, Your Team Name</p>
</td>
</tr>
</tbody>
</table>
NPS (0-10)
html
<table align="center" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; background: #ffffff; border: 1px solid #eeeeee; border-radius: 2px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; color: #2c2c2a;">
<tbody>
<!-- Greeting -->
<tr>
<td style="font-size: 16px; line-height: 160%; padding: 25px 25px 0 25px;">
<p style="margin: 0;">Hi there,</p>
</td>
</tr>
<!-- Intro text -->
<tr>
<td style="font-size: 16px; line-height: 160%; padding: 25px 25px 0 25px;">
<p style="margin: 0;">To help us provide you the best experience possible, we'd like your help with this very brief survey.</p>
</td>
</tr>
<!-- NPS Survey Block -->
<tr>
<td style="padding: 25px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; background-color: #f2f4f8; border: 1px solid #d9dbde; border-radius: 3px;">
<tbody>
<!-- Question -->
<tr>
<td style="font-size: 15px; padding: 16px; color: #2c2c2a;">
On a scale from 0-10, how likely are you to recommend us to a friend or colleague?
</td>
</tr>
<!-- Labels -->
<tr>
<td style="padding: 0 16px 4px 16px;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; color: #a5a5a5; font-size: 13px;">
<tbody>
<tr>
<td align="left" style="text-align: left;">Not at all likely</td>
<td align="right" style="text-align: right;">Extremely likely</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Score buttons 0-10 -->
<tr>
<td style="padding: 0 16px 16px 16px;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; text-align: center;">
<tbody>
<tr>
<!-- Paste your score 0 link between the quotation marks below, keeping the quotation marks in place -->
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_0_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">0</a></td>
<td style="width: 4px;"> </td>
<!-- Paste your score 1 link between the quotation marks below, keeping the quotation marks in place -->
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_1_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">1</a></td>
<td style="width: 4px;"> </td>
<!-- Paste your score 2 link between the quotation marks below, keeping the quotation marks in place -->
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_2_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">2</a></td>
<td style="width: 4px;"> </td>
<!-- Paste your score 3 link between the quotation marks below, keeping the quotation marks in place -->
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_3_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">3</a></td>
<td style="width: 4px;"> </td>
<!-- Paste your score 4 link between the quotation marks below, keeping the quotation marks in place -->
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_4_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">4</a></td>
<td style="width: 4px;"> </td>
<!-- Paste your score 5 link between the quotation marks below, keeping the quotation marks in place -->
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_5_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">5</a></td>
<td style="width: 4px;"> </td>
<!-- Paste your score 6 link between the quotation marks below, keeping the quotation marks in place -->
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_6_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">6</a></td>
<td style="width: 4px;"> </td>
<!-- Paste your score 7 link between the quotation marks below, keeping the quotation marks in place -->
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_7_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">7</a></td>
<td style="width: 4px;"> </td>
<!-- Paste your score 8 link between the quotation marks below, keeping the quotation marks in place -->
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_8_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">8</a></td>
<td style="width: 4px;"> </td>
<!-- Paste your score 9 link between the quotation marks below, keeping the quotation marks in place -->
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_9_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">9</a></td>
<td style="width: 4px;"> </td>
<!-- Paste your score 10 link between the quotation marks below, keeping the quotation marks in place -->
<td style="font-size: 18px; width: 40px; border-radius: 3px; background: #ffffff; border: 1px solid #a5a5a5;"><a href="***PASTE_YOUR_SCORE_10_LINK_HERE***" style="display: block; text-decoration: none; color: #666666; line-height: 40px; border-radius: 3px;">10</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Thank you -->
<tr>
<td style="font-size: 16px; line-height: 160%; padding: 0 25px;">
<p style="margin: 0;">Thank you for your candid feedback!</p>
</td>
</tr>
<!-- Sign-off -->
<tr>
<td style="font-size: 16px; line-height: 160%; padding: 25px;">
<p style="margin: 0;">Cheers,<br>Your Team Name</p>
</td>
</tr>
</tbody>
</table>
Need any help?
Please do get in touch with our support team if you have any questions about these HTML Block examples or any other questions related to your One Click surveys.