Testimonials

In this article:

• Introducing Testimonials.
• Setting up Testimonials.
• Testing and troubleshooting.
• Requesting and managing customer feedback.
• Making changes to your Testimonials.
• Use case: Why should I use Testimonials?

FAQs

• Do Testimonials and the Web platform work together?
• Do Testimonials cause the web page to load slowly?
• How many Testimonial widgets can I put on a page?
• Can I customize the full CSS of the Testimonials widget?

Suggested next article: The Web Platform: Showing CX surveys on your website

Introducing Testimonials

Delighted’s Testimonials feature provides your team with two key features for publicly displaying customer feedback:

• A system for requesting permission from your customers to share their feedback
• A snippet of Javascript which you can embed on your website, displaying the feedback directly on your page

Back to top

Setting up Testimonials

To set up Testimonials, head to the Integrations page and choose “Testimonials.” You’ll walk through the four steps below to complete setup — as seen at the end of this GIF.

1. Customizing the widget
   
2. Customizing the permission request email
   
3. Selecting some customer feedback to publish
   
4. Turning on your widget
   

1. Customizing the widget

1

From the Testimonials page, click on “Start” next to “Step 1: Customize and add your widget”

2

Customize all required elements of the widget, including:

• Brand color: Proudly post your team's colors
• Font: Default (to your webpage), serif, or sans serif
• Font size: Small, medium, or large
• Font alignment: Left or center
• Card style: None, rounded, or square (the “card” us the background structure behind the widget)

3

Click “Next: Add snippet”

4

Copy the code snippet and paste it into the HTML on your site where you’d like the feedback to appear. Each widget will cycle through your approved testimonials and display one, updating when the page is refreshed. You can add up to 20 widgets on a single web page

5

Click “Complete step” (And don't forget to test your script! Read "Testing your snippet")

Remember that your widget will not be displayed to your site visitors until you turn it on. However, you can skip adding the code to your site for now if you’d like—just make sure you add it before completing set-up.

For information on editing of the full CSS of the widget, read “Can I customize the full CSS of the widget?” below!

2. Customizing the permission request email

1

From the Testimonials page, click “Start” next to “Step 2: Customize your permission request email.”

2

Customize all required elements of the email, including:

• From name: The name that will appear in the recipient’s inbox as the sender (usually a person’s name, like “Sean from Delighted,” or the company name).
• Reply-to email: This email address will receive direct responses to the permission request email.
• Personal information: The options for information to request from respondents, including first name, last name, last initial, company name, and/or company role.

3

Optional: Send yourself a test permission email.

4

Click “Finish.”

Here's an example of what that permission request email looks like:

When your candidate clicks "Review your feedback" they'll see a screen that makes their approval a snap. By reviewing the text, initialing, and then clicking "Approve" their job is done. (They can also decline to approve by clicking "I do not approve."

3. Selecting some customer feedback to publish

Once you’ve received permission to share feedback, the next step would be to select which responses you want to display in your Testimonial widget.

1

From the Testimonials page, click “Start” next to “Step 3: Select some customer feedback to publish”

2

On the following page, click “Send request” next to any of the suggested positive responses. If you want to wait to select feedback, you can skip this step

3

Click on “I’m finished”

4. Turning on your widget

1

From the Testimonials page, click “Finish” next to “Step 4: Turn on your widget and finish up”

2

From this page, you’ll be able to see and manage:

• Suggested: Pieces of positive feedback we suggest you request permission to share
• Approved: Responses approved for sharing by the customer
• Published: Approved responses you’ve published to the Testimonials widget

3

Click “Turn On” to display your Testimonials widget!

Here's a test of the widget. 

Back to top

Testing and troubleshooting

Test the Testimonials widget by appending ?delighted=test to the end of the URL on any page where you’ve added the code snippet.

If your Testimonials widget is not displaying, start by checking the following:

• Has your widget been added to the web page?
• Have you published any responses?

If you’re still having trouble with your widget displaying, reach out and we can help get you up and running!

Back to top

Requesting and managing customer feedback

Once you set up the Testimonials feature, you’ll want to request, publish, and manage your feedback regularly to keep fresh responses rolling into your Testimonials widgets!

Requesting customer feedback

Once Testimonials have been set up, you can request permission to share feedback from within the Dashboard.

1

Click on the timestamp for the response you’d like to share.

2

Click on the Testimonial icon to the right of the response on the Permalink page.

3

Click “Send request” to confirm sending of that request email.

Back to top

Publishing approved feedback

You can always publish approved feedback from the Testimonials page.

1

Navigate to the Testimonials page by clicking Integrations > Testimonials.

2

Under the Approved tab, click “Publish” next to any responses you’d like displayed on your Testimonials widget.

3

These responses will now move from the Approved tab to the Published tab.

Back to top

Managing Testimonials feedback

Once the Testimonials feature is set up in your account, the Testimonials page will act as a feedback management page. You’ll see three tabs on this page:

• Suggested: This tab shows positive feedback that you haven't requested permission to share. It's a list of feedback that we suggest you add to your Testimonials widget! On this tab, you'll have the option to "Send request" for each suggested response.
• Approved: This tab shows feedback that you've requested permission to share that has been approved by the respondent. On this tab, you'll have the option to "Publish" responses, which will move them to the Published tab.
• Published: This tab shows feedback that has been published to your Testimonials widget. All responses on this tab are eligible to display on your widget on your site. On this tab, you'll have the option to "Unpublish" responses, which will move them back to the Approved tab.

Back to top

Making changes to your Testimonials

After the initial setup of the Testimonials feature, you can edit every aspect (including the widget appearance and the permission request email) from the Testimonials page.

To customize the widget itself, click on “Customize widget appearance” on the right side of the page. To adjust the request email, click on “Customize permission request email” on the left side of the page.

Back to top

Use case: Why should I use Testimonials?

The excitement of a feedback program often revolves around those moments when responses finally start pouring in.

If you're running NPS surveys, you might hear accolades from your most loyal Promoters who are fanatical about your brand. Or maybe you're running CSAT surveys and your support agents are receiving non-stop praise about their incredibly fast response time. In either case, this feedback is one of the most powerful tools in convincing potential customers to work with your company. Testimonials help you share this feedback easily and effectively!

Back to top

Do Testimonials and the Web platform work together?

Yes!

The Web surveys platform and its Testimonials feature can both be embedded on the same page of your website without issue. The only consideration to keep in mind: be sure to place the Web snippet before the Testimonials snippet.

Back to top

Do Testimonials cause the web page to load slowly?

No.

Similar to Delighted’s Web platform, the Testimonial widget has no impact on page performance nor load time.

Back to top

How many Testimonial widgets can I put on a page?

You can place up to 20 Testimonials widgets on a single page.

Back to top

Can I customize the full CSS of the widget?

Yes!

When your page loads, the snippet will insert the necessary HTML to show each Testimonials widget. The content that is added will look something like this:

<div class="delighted-testimonial-card">

<div class="delighted-testimonial-container">

<blockquote class="delighted-testimonial">

<div class="delighted-testimonial-header">

<div class="delighted-testimonial-quote-icon"></div>

</div>

<div class="delighted-testimonial-statement">

Great customer service and intuitive product! I've tried everything out there and you all offer the absolute best experience start to finish.

</div> <div class="delighted-testimonial-footer">

<div class="delighted-testimonial-author">

<span class="delighted-testimonial-author-name">Gabrielle Howard</span>

<span class="delighted-testimonial-author-organization-role">Co-founder</span>

<span class="delighted-testimonial-author-organization-name">Hem & Stitch</span>

</div>

</div>

</blockquote>

</div>

<div class="delighted-testimonial-badge">

<a class="delighted-testimonial-badge-link" href="#">Powered by Delighted</a>

</div>

</div><br>

Each structural element has a corresponding CSS selector that defines the look and feel. Let’s look at an example where we want to:

• Hide the quote icon
• Wrap the statement in quotes
• Italicize the statement

We can use the display property to hide the quote icon, pseudo selectors to surround the statement with quotes, and add a font-style property to the statement selector. Putting it together, adding the following CSS to the page achieves our goal:

<ol><li><style></li><li>.delighted-testimonial-quote-icon {</li><li>display: none;</li><li>}</li><li>.delighted-testimonial-statement:before {</li><li>content:"“";</li><li>}</li><li>.delighted-testimonial-statement:after {</li><li>content:"”";</li><li>}</li><li>.delighted-testimonial-statement {</li><li>font-style: italic;</li><li>}</li><li></style></li></ol>

If you have any questions about CSS adjustments, contact the Customer Concierge team and we can lend a hand!

Back to top