Add any question you wish directly into your email body
Below you can find ready-to-use examples of CSS and HTML code to help you display a question (like an NPS question) beautifully inside your questionnaire emails.
This approach allows you to:
✅ Ask the most relevant/important question directly within your email, making it easier for customers to respond
✅ Maintain your brand look & feel with customizable styling
✅ Redirect customers to the full questionnaire to collect more insights
You can replace the sample NPS question with any question you like, simply by using the appropriate question ID from your questionnaire on the platform
Note: You can also update or change the rating scale as you wish (e.g., 1–10, 1–5, 0–10, etc.)
CSS Example
.nps-table {
width: 100%;
text-align: center;
margin: 20px 0;
}
.nps-table td {
padding: 5px;
}
.nps-button {
display: inline-block;
padding: 10px 14px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
color: #fff;
transition: background-color 0.2s ease;
}
.nps-button:hover {
opacity: 0.8;
}
📩 Example HTML to show an NPS question inside the email
<p><strong>How likely are you to recommend us to a friend or colleague?</strong></p>
<table class="nps-table">
<tr>
<td><a href="%{collection_url}?responses[LlWKqQEoTaWfriiCIQ2cgQ]=0" class="nps-button" style="background-color: #d9534f;">0</a></td>
<td><a href="%{collection_url}?responses[LlWKqQEoTaWfriiCIQ2cgQ]=1" class="nps-button" style="background-color: #d9534f;">1</a></td>
<td><a href="%{collection_url}?responses[LlWKqQEoTaWfriiCIQ2cgQ]=2" class="nps-button" style="background-color: #d9534f;">2</a></td>
<td><a href="%{collection_url}?responses[LlWKqQEoTaWfriiCIQ2cgQ]=3" class="nps-button" style="background-color: #f0ad4e;">3</a></td>
<td><a href="%{collection_url}?responses[LlWKqQEoTaWfriiCIQ2cgQ]=4" class="nps-button" style="background-color: #f0ad4e;">4</a></td>
<td><a href="%{collection_url}?responses[LlWKqQEoTaWfriiCIQ2cgQ]=5" class="nps-button" style="background-color: #f0ad4e;">5</a></td>
<td><a href="%{collection_url}?responses[LlWKqQEoTaWfriiCIQ2cgQ]=6" class="nps-button" style="background-color: #f0ad4e;">6</a></td>
<td><a href="%{collection_url}?responses[LlWKqQEoTaWfriiCIQ2cgQ]=7" class="nps-button" style="background-color: #5bc0de;">7</a></td>
<td><a href="%{collection_url}?responses[LlWKqQEoTaWfriiCIQ2cgQ]=8" class="nps-button" style="background-color: #5bc0de;">8</a></td>
<td><a href="%{collection_url}?responses[LlWKqQEoTaWfriiCIQ2cgQ]=9" class="nps-button" style="background-color: #5cb85c;">9</a></td>
<td><a href="%{collection_url}?responses[LlWKqQEoTaWfriiCIQ2cgQ]=10" class="nps-button" style="background-color: #5cb85c;">10</a></td>
</tr>
</table>
Notes:
%{collection_url} is dynamically replaced with the unique questionnaire URL shown to each customer.
responses[...] uses the question ID from your questionnaire; you must replace the sample question ID (LlWKqQEoTaWfriiCIQ2cgQ) with the correct question ID you want to display.
The question ID in this example is provided only for demonstration and testing purposes.