Retently allows you to include the survey buttons links in your own template, with custom HTML and CSS, and deliver the survey via another email service, or you can collect feedback from your web apps' chat.
To do so, you will need to create a "Link" channel survey campaign. It may be NPS, 5-STAR, CSAT, or CES.
Make sure to customize the survey template, because when a customer will click a score in your own survey, they will be redirected to a webpage with additional questions that will pull the style and content from the survey template in your campaign.
Optionally, you can configure some other settings, such as notifications, autoresponders, webhook notifications. Learn more about the survey by link campaign setup here: https://help.retently.com/en/articles/3710522-set-up-and-distribute-surveys-by-link.
In your campaign's Setup section, you can copy the unique survey link for this particular campaign. The link will have the following structure:
The ID in the link is your campaign's unique identifier. After the campaign ID, we recommend you to include a variable with the email address of the customer that is about to answer the survey. The link will look similar to this:
If you don't include the email address, the survey will still work, but your respondents will be asked to input their email address in order to finish the survey.
Finally, after the email address variable, you must include the score property. You will have to generate a link for each score button in your survey.
Example:
https://cx.retently.com/cl/{campaign_id}/{email_address}/?score={score}
{campaign_id}- is represented by an alphanumeric string and can be found on the setup page of your campaign.
{email_address}- use for this value the email address of your customers.{score}- depending on the metric you are using the score will be from 0 to 10 (for NPS), 1 to 5 (for CSAT), or 1 to 7 (for CES), etc
Copy all automatically generated links from the campaign Setup Page.
Buttons HTML snippet
If needed, you can copy this HTML snippet with survey buttons. Just make sure to replace the links with the ones from your campaign's Setup section.
NPS buttons
NPS buttons
<style>
.button-container {
display: flex;
align-items: center;
justify-content: center;
}
a {
text-decoration: none;
}
button {
width: 50px;
height: 50px;
margin: 5px;
border: none;
border-radius: 5px;
color: white;
font-size: 20px;
cursor: pointer;
}
.red { background-color: #E9716A; }
.orange { background-color: #F5B555; }
.green { background-color: #4FB877; }
button:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div class="button-container">
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=0"><button class="red">0</button></a>
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=1"><button class="red">1</button></a>
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=2"><button class="red">2</button></a>
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=3"><button class="red">3</button></a>
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=4"><button class="red">4</button></a>
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=5"><button class="red">5</button></a>
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=6"><button class="red">6</button></a>
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=7"><button class="orange">7</button></a>
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=8"><button class="orange">8</button></a>
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=9"><button class="green">9</button></a>
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=10"><button class="green">10</button></a>
</div>
</body>
CSAT buttons
CSAT buttons
<style>
.button-container {
display: flex;
align-items: center;
justify-content: center;
}
a {
text-decoration: none;
}
button {
width: 150px; /* Adjusted the width to better fit the text */
height: 50px;
margin: 5px;
border: none;
border-radius: 5px;
color: white;
font-size: 16px; /* Adjusted font size for better visibility */
cursor: pointer;
}
.red {
background-color: #E9716A;
}
.orange {
background-color: #F5B555;
}
.green {
background-color: #4FB877;
}
button:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div class="button-container">
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=1"><button class="red">Very Unsatisfied</button></a>
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=2"><button class="red">Unsatisfied</button></a>
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=3"><button class="orange">Neutral</button></a>
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=4"><button class="green">Satisfied</button></a>
<a href="https://cx.retently.com/cl/646773463fb9d/{email}/?score=5"><button class="green">Very Satisfied</button></a>
</div>
</body>
Star buttons
Star buttons
<style>
.stars-container {
display: flex;
align-items: center;
justify-content: center;
}
.star {
width: 50px;
height: 50px;
margin: 5px;
cursor: pointer;
fill: #F5B555;
}
.star:hover {
fill: #e4a444; /* A darker shade for hover effect */
}
</style>
</head>
<body>
<div class="stars-container">
<svg class="star" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" onclick="location.href='https://cx.retently.com/cl/646773463fb9d/{email}/?score=1'"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2l-2.81 6.63-7.19.61L7.46 13.97 5.82 21z" style="stroke-linejoin: round; stroke-linecap: round;"></path></svg>
<svg class="star" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" onclick="location.href='https://cx.retently.com/cl/646773463fb9d/{email}/?score=2'"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2l-2.81 6.63-7.19.61L7.46 13.97 5.82 21z" style="stroke-linejoin: round; stroke-linecap: round;"></path></svg>
<svg class="star" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" onclick="location.href='https://cx.retently.com/cl/646773463fb9d/{email}/?score=3'"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2l-2.81 6.63-7.19.61L7.46 13.97 5.82 21z" style="stroke-linejoin: round; stroke-linecap: round;"></path></svg>
<svg class="star" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" onclick="location.href='https://cx.retently.com/cl/646773463fb9d/{email}/?score=4'"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2l-2.81 6.63-7.19.61L7.46 13.97 5.82 21z" style="stroke-linejoin: round; stroke-linecap: round;"></path></svg>
<svg class="star" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" onclick="location.href='https://cx.retently.com/cl/646773463fb9d/{email}/?score=5'"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2l-2.81 6.63-7.19.61L7.46 13.97 5.82 21z" style="stroke-linejoin: round; stroke-linecap: round;"></path></svg>
</div>
</body>