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>
      <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>

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:

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

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

Still need help? Contact Us Contact Us