HTML stars make your emails more dynamic and allows you to pre-populate fields in the feedback form, making it easier for your customers to give you feedback. You can also pass through metadata to Customer Radar to appear in the Customer Radar Dashboard.
Pre-populating fields
Customer Radar's mission is to make feedback easy - and this means making it as easy as possible for your customers to submit feedback for you. The feedback form will always ask for a customers contact detail (email or phone number), and can also include other fields such as name or car licence number.
If you already have the customers details, you can send those details to Customer Radar via the URL. So when a customer clicks a star they are taken to the feedback form, and the fields can already be filled out with their details - easy!
Metadata
If you have other information about the customer that you would like to see in the Customer Radar Dashboard, but you don't want the customer to see on the feedback page, you can send it as metadata. For example, transactions references that the customer won't know about. Metadata can be added to the URL the same way as sending pre-populated field info - but this way the customer won't see it on the feedback page, however their data will still be shown in the dashboard.
Guide
1. Copy either the 5 or 10 star HTML code from below
2. Paste the HTML into your feedback invitation email
3. Add your feedback code to the URLs (eg. http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=1), or leave them as a merge field. Use the merge tag that matches your email platform. The example value is {{FeedbackCode}}.
4. Add any pre-populated data/metadata in this format "?key={{merged-metadata-field}}&". For example: "?email={{email}}&name={{first_name}}". Contact Customer Radar Support to add or view which metadata keys are set up for your feedback programme. Use your email platforms merge tags to replace {{merged-metadata-field}}. If you are not merging any metadata you can remove this part of the URL, but make sure you leave "&rating=#".
Example:
Your full URL should merge/compile like this (with your own feedback code & metadata):
http://www.feedback.fyi/feedback/YDBUQ?email=support@customerradar.com&firstname=Mat&rating=5
The stars will look like this:
|
The above stars are a working example, click them to see how they pre-populate our demo feedback form.
5 star HTML:
<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" style="width: 100%; max-width:600px; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff;" class="responsive-table">
<tr>
<td align="center" width="90"> </td>
<td align="center" width="420" style="display: table-cell; width:100%; max-width: 420px;">
<table width="420" border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width:420px; text-align: center;" align="center">
<tr>
<td align="center">
<a href="http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=1" target="_blank" style="text-decoration: none;">
<img style="border: 0;height: auto;width: 100%;max-width: 75px;" alt="" width="75" src="https://f.hubspotusercontent30.net/hubfs/2282080/Email%20Icons/1.gif" label="Star image 1" editable>
</a>
</td>
<td align="center">
<a href="http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=2" target="_blank" style="text-decoration: none;">
<img style="border: 0;height: auto;width: 100%;max-width: 75px;" alt="" width="75" src="https://f.hubspotusercontent30.net/hubfs/2282080/Email%20Icons/2.gif" label="Star image 2" editable>
</a>
</td>
<td align="center">
<a href="http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=3" target="_blank" style="text-decoration: none;">
<img style="border: 0;height: auto;width: 100%;max-width: 75px;" alt="" width="75" src="https://f.hubspotusercontent30.net/hubfs/2282080/Email%20Icons/3.gif" label="Star image 3" editable>
</a>
</td>
<td align="center">
<a href="http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=4" target="_blank" style="text-decoration: none;">
<img style="border: 0;height: auto;width: 100%;max-width: 75px;" alt="" width="75" src="https://f.hubspotusercontent30.net/hubfs/2282080/Email%20Icons/4.gif" label="Star image 4" editable>
</a>
</td>
<td align="center">
<a href="http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=5" target="_blank" style="text-decoration: none;">
<img style="border: 0;height: auto;width: 100%;max-width: 75px;" alt="" width="75" src="https://f.hubspotusercontent30.net/hubfs/2282080/Email%20Icons/5.gif" label="Star image 5" editable>
</a>
</td>
</tr>
</table>
</td>
<td align="center" width="90"> </td>
</tr>
</table>
10 star:
<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" style="width: 100%; max-width:600px; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff;" class="responsive-table">
<tr>
<td align="center" width="90"> </td>
<td align="center" width="420" style="display: table-cell; width:100%; max-width: 420px;">
<table width="420" border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width:420px; text-align: center;" align="center">
<tr>
<td align="center">
<a href="http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=1" target="_blank" style="text-decoration: none;">
<img style="border: 0;height: auto;width: 100%;max-width: 75px;" alt="" width="75" src="https://f.hubspotusercontent30.net/hubfs/2282080/Email%20Icons/1.gif" label="Star image 1" editable="">
</a>
</td>
<td align="center">
<a href="http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=2" target="_blank" style="text-decoration: none;">
<img style="border: 0;height: auto;width: 100%;max-width: 75px;" alt="" width="75" src="https://f.hubspotusercontent30.net/hubfs/2282080/Email%20Icons/2.gif" label="Star image 2" editable="">
</a>
</td>
<td align="center">
<a href="http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=3" target="_blank" style="text-decoration: none;">
<img style="border: 0;height: auto;width: 100%;max-width: 75px;" alt="" width="75" src="https://f.hubspotusercontent30.net/hubfs/2282080/Email%20Icons/3.gif" label="Star image 3" editable="">
</a>
</td>
<td align="center">
<a href="http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=4" target="_blank" style="text-decoration: none;">
<img style="border: 0;height: auto;width: 100%;max-width: 75px;" alt="" width="75" src="https://f.hubspotusercontent30.net/hubfs/2282080/Email%20Icons/4.gif" label="Star image 4" editable="">
</a>
</td>
<td align="center">
<a href="http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=5" target="_blank" style="text-decoration: none;">
<img style="border: 0;height: auto;width: 100%;max-width: 75px;" alt="" width="75" src="https://f.hubspotusercontent30.net/hubfs/2282080/Email%20Icons/5.gif" label="Star image 5" editable="">
</a>
</td>
</tr>
</table>
<table width="420" border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width:420px; text-align: center;" align="center">
<tr>
<td align="center">
<a href="http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=6" target="_blank" style="text-decoration: none;">
<img style="border: 0;height: auto;width: 100%;max-width: 75px;" alt="" width="75" src="https://f.hubspotusercontent30.net/hubfs/2282080/Email%20Icons/6.gif" label="Star image 6" editable="">
</a>
</td>
<td align="center">
<a href="http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=7" target="_blank" style="text-decoration: none;">
<img style="border: 0;height: auto;width: 100%;max-width: 75px;" alt="" width="75" src="https://f.hubspotusercontent30.net/hubfs/2282080/Email%20Icons/7.gif" label="Star image 7" editable="">
</a>
</td>
<td align="center">
<a href="http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=8" target="_blank" style="text-decoration: none;">
<img style="border: 0;height: auto;width: 100%;max-width: 75px;" alt="" width="75" src="https://f.hubspotusercontent30.net/hubfs/2282080/Email%20Icons/8.gif" label="Star image 8" editable="">
</a>
</td>
<td align="center">
<a href="http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=9" target="_blank" style="text-decoration: none;">
<img style="border: 0;height: auto;width: 100%;max-width: 75px;" alt="" width="75" src="https://f.hubspotusercontent30.net/hubfs/2282080/Email%20Icons/9.gif" label="Star image 9" editable="">
</a>
</td>
<td align="center">
<a href="http://www.feedback.fyi/feedback/{{FeedbackCode}}?email={{email}}&rating=10" target="_blank" style="text-decoration: none;">
<img style="border: 0;height: auto;width: 100%;max-width: 75px;" alt="" width="75" src="https://f.hubspotusercontent30.net/hubfs/2282080/Email%20Icons/10.gif" label="Star image 10" editable="">
</a>
</td>
</tr>
</table>
</td>
<td align="center" width="90"> </td>
</tr>
</table>