How do I set-up Testimonials?

The excitement of a Customer Experience (CX) program often revolves around those moments when responses finally start pouring in. After investing time and resources into designing the template, narrowing the sample group, and sending out the survey, this is the result – customer feedback and insight delivered right to your doorstep. 

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 each case, the following question will inevitably arise: How can I share this feedback?

With Delighted's Testimonial feature, you can select and highlight your best customer feedback – all directly on your website. Simply configure your testimonial widget, request permission to share, embed the code, and start displaying your finest customer feedback right away! 


What are Testimonials?

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

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

With Testimonials, your team will finally be able to surface those feedback gems  – prime examples of your most loyal promoters and how they're singing your praises. With the feedback now public-facing, you'll be able to reassure and convert potential customers, underscore your commitment to the customer experience, and generally champion how customers are speaking about your product and/or service.

Back to top

Where do I find the Testimonials feature?

1) Click on Integrations in your Delighted dashboard

2) Select Testimonials from the Integrations page

Back to top

How do I customize the widget?

1) From the Testimonials page, click on Start under the section "Step 1: Customize and add your widget"

2) On the following page, proceed to customize all required elements of the widget, including:

  1. Font: Default (to your page), Serif, or Sans Serif
  2. Font Size: Small, Medium, or Large
  3. Font Alignment: Left, or Center
  4. Card Style: None, Rounded, or Squared (think of "Card" as the background structure/format of the widget)

3) For full CSS editing, see the below section for: Can I customize the full CSS of the widget?

4) Click "Next: Add Snippet"

5) Copy/paste the snippet code into the HTML where you'd like the feedback to appear. Note: Your widget will not be shown to your visitors until you turn it on in a later step.

6) Click "Complete Step"

Back to top

How do I customize the permissions request email?

1) From the Testimonials page, click on Start under the section "Step 2: Customize your permission request email"

2) On the following page, proceed to customize all required elements of the widget, including:

  1. From Name: The name that will show up in the inbox as the "From" name (usually a personal name or company name)
  2. Reply To Email: The address to receive any response from the customer if they opt to reply to the email directly
  3. Personal Information (i.e. requesting information to show alongside the response for your Testimonial feature): First Name, Last Name, Last Initial, Company Name, Company Role

3) Send yourself a test permission request email (Optional)

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

Back to top

How do I select customer feedback to publish?

1) From the Testimonials page, click on Start under the section "Step 3: Select some customer feedback to publish"

2) On the following page, click "Send request" to any of the positive responses we suggest. Note: You can skip this section by clicking "I'm finished".

3) Once you're all set and have sent a few initial requests, click on "I'm finished"

Note: Once the widget is fully configured, you can request permission from the desktop and monitor responses

Back to top

How do I turn on the widget?

1) From the Testimonials page, click on Finish under the section "Step 4: Turn on your widget and finish up"

2) From this page, you'll be able to see:

  • Suggested: Instances of positive feedback we suggest for permission-related outreach
  • Approved: Any response where you've requested permission to share feedback, and the customer has approved
  • Published: Any response that has been Approved and which you've selected to publish

3) Click Turn On via the left-hand side of the page to enable the Testimonial feature (Note: Make sure you've copied and pasted the code into your HTML prior to this step)

Back to top

How do I request permission to share feedback from the dashboard? 

Sending a permission request to share feedback takes just a few quick steps! To send out that request, simply:

  1. Click on the timestamp for the response you'd like to share
  2. Click on the Testimonial icon on the following page
  3. Follow the on-screen instructions to send a request

Back to top

How do I publish approved feedback?

Publishing approved feedback to your widget is truly just a click of a button! 

  1. Navigate to the Testimonials page
  2. Under the Approved tab, click on "Publish" for any responses you'd like to be displayed on your widget
  3. Once published, that response will now display via your Testimonials widget!

Back to top

Do Testimonials cause the page to load slower?

No. Similar to Delighted's Web platform, the Testimonial widget has no impact on page performance/load time.

Back to top

How do Testimonials and Delighted Web interact?

Delighted's Web survey and Testimonial feature can both be embedded on the same page without issue. The only consideration to keep in mind: Be sure to keep an eye on the placement of the Web Javascript before the Testimonial Javascript.

Back to top

Can I test Testimonials prior to going live?

Yes. Feel free to test out the display of the testimonial by appending  ?delighted=test to the end of any page URL where you have included the snippet. It's even safe to place the testimonials snippet and the Delighted web survey snippet on the same page. If you want to do this, please be sure to place the Delighted web survey before any of the testimonials snippets.

Back to top

Why is my widget not displaying?

Key reasons the widget would not be displaying:

  1. The widget is not turned on
  2. No responses have been published. Your widget will only be visible if you have at least one published testimonial.

If you've checked on the common issues noted above, contact the Customer Concierge team and we can help get you up-and-running.

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 a testimonial. 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 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 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 class="delighted-testimonial-badge">
    <a class="delighted-testimonial-badge-link" href="#">Powered by Delighted</a>

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
  • Make the statement italicized

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:

  .delighted-testimonial-quote-icon {
    display: none;
  .delighted-testimonial-statement:before {
    content: "“";
  .delighted-testimonial-statement:after {
    content: "”";
  .delighted-testimonial-statement {
    font-style: italic;

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

Back to top

Still need help? Contact Us Contact Us