🗒️ Contents:
To display the Feedback Button to your visitors, you will need to add the Retently script in your web application on all the pages where you want the button to appear. The button will be displayed on every page where the script is installed, so the set of pages you install it on is what controls where visitors can leave feedback.
📝 NOTE: The Feedback Button script implementation requires technical skills and access to your web application's codebase. Feel free to forward this tutorial to your engineers as a reference for further implementation.
📌 IMPORTANT: The Feedback Button uses the same script as the Retently in-app survey. If you already have the in-app script installed, there is nothing new to install: activating a Feedback Button campaign is enough for the button to appear on those pages.
The Feedback Button script
IMPORTANT: To ensure that the survey pop-up will be correctly displayed in the mobile version of your web application, add the code below somewhere within your <head></head> tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The Feedback Button script is located in each Feedback Button campaign's editor mode, in the "Guide" section.
The script consists of two parts:
A
<div>element: Where the visitor's data can be populated (optional for this channel).A
<script>element: The script responsible for displaying the button and generating the survey.
Here's an example with the full script:
<!--Add the <div> element between the <body> tag-->
<div
id="retently-survey-embed"
data-href="https://app.retently.com/api/remote/tracking/{{account_id}}"
data-rel="dialog"
data-email="{{variable}}"
data-firstname="{{variable}}"
data-lastname="{{variable}}"
data-company="{{variable}}"
data-tags="{{variable}}"
></div>
<!--Add the <script> element between the <body> tag, but after the <div> element-->
<script type='text/javascript'>
(function (d, s, id) {
var js, rjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://cdn.retently.com/public/components/embed/sdk.min.js";
rjs.parentNode.insertBefore(js, rjs);
}(document, 'script', 'retently-jssdk'));
</script>
Both elements should be added between the <body></body> tags, with the <script> element after the <div> element. The data-href attribute must contain your account ID; the version shown in your campaign's "Guide" section already has your account ID filled in.
Visitor identification is optional
This is the key difference from the in-app survey script: for the Feedback Button, all the identifying data-* attributes, including data-email, are optional. The channel is anonymous by default.
If you pass
data-email: The visitor is identified exactly as with the in-app script. A contact is created in Retently (or the existing contact with that email is updated), and their responses are linked to that contact record.If you do not pass
data-email(or leave the attribute out entirely): The visitors' responses are collected and saved in Retently anonymously.
Anonymous responses appear on the Feedback page like any other response, attributed to an anonymous contact with a generated name.
The identifying attributes that the <div> element supports:
data-email: Optional for the Feedback Button. When provided, responses are linked to this contact.data-firstname: The visitor's first name.data-lastname: The visitor's last name.data-company: The visitor's company name.data-tags: Supports multiple values separated by commas (e.g.,data-tags="item1, item2").data-prop-{{property_id}}: Custom contact properties. Create the property in Retently first. The rules on property IDs, data types, and validation are covered here; they are identical for the Feedback Button.
When you use identifying attributes, pass the visitor's information via placeholders (variables) so that each visitor has their own information sent to Retently.
📝 NOTE: Properties and tags also work for anonymous visitors: the values are stored on the anonymous contact.
How the script decides what to display
On each page load, the script checks your active (switched ON) campaigns:
If the visitor is scheduled to receive an in-app survey on this page view, the in-app pop-up is displayed and the Feedback Button is not rendered. In-app surveys always take priority on a given page view.
Otherwise, the script checks your active Feedback Button campaigns. If the visitor matches a campaign's audience, the floating tab is rendered on the page.
When the visitor clicks the tab, the survey pop-up opens with the template assigned to the matching campaign.
If you run multiple Feedback Button campaigns at the same time, the visitor will see the button from the first campaign whose audience they match. To target a specific campaign explicitly, add the campaign ID to the <div> element:
<div
id="retently-survey-embed"
data-href="https://app.retently.com/api/remote/tracking/{{account_id}}"
data-rel="dialog"
data-campaignId="{{campaign_id}}"
></div>
You can copy the campaign ID from the campaign editor's URL in your browser, or copy the pre-filled snippet from the campaign's "Guide" section, which already includes the campaign ID.
Collecting emails from anonymous visitors
If you want anonymous visitors to be able to leave their contact details, add a Form question to the survey template with a field that saves to "Email address".
When an anonymous visitor submits their email through the form:
If no contact with that email exists, the anonymous contact is converted into a regular contact with that email.
If a contact with that email already exists in your account, the feedback is linked to that existing contact.
Survey credits
Displaying the button on a page does not use survey credits and does not create survey records. A survey credit is used when the visitor clicks the button and the survey opens. Closing and reopening the same unanswered survey does not use an additional credit.
SDK version requirements
The Feedback Button requires version 1.4.0 or newer of the Retently SDK (sdk.min.js). The script is loaded from our CDN, so this happens automatically and no action is needed on your side.
📝 NOTE: Browsers cache the SDK file for up to 30 days. Visitors whose browser holds an older cached version will not see the Feedback Button until their browser refreshes the script. If Retently detects visitors on an older version, a warning is displayed in the template editor.
📌 IMPORTANT: Always load the SDK from the provided CDN link rather than hosting sdk.min.js locally, so your visitors receive all updates.
CSP headers
If you're using Content-Security-Policy headers then you need to add the following CSP headers to allow the script to load and connect:
script-src
script-src 'https://cdn.retently.com/public/components/embed/sdk.min.js'
connect-src
connect-src 'https://app.retently.com'