Testimonial · Convert Brand

Examples

Default

Multiple options to run A/B tests, with a great reporting structure and the ability to track more than one goal. The deploy option helps us go live through Convert instead of touching the live site.

Jegan Ramanathan Demand Generation Manager

<div class="testimonial">
  <p class="testimonial__quote">Multiple options to run A/B tests…</p>
  <div class="testimonial__author">
    <img class="testimonial__avatar" src="assets/jeganramanathan_testimonials.webp" alt="Jegan Ramanathan">
    <div class="testimonial__meta">
      <span class="testimonial__name">Jegan Ramanathan</span>
      <span class="testimonial__role">Demand Generation Manager</span>
    </div>
  </div>
</div>

With logo

Convert allows us to use data from our website visitors to better define our customers' interest and build a better product. A vital addition to any B2B SaaS marketing stack.

Mike Architetto Co-Founder, Hivelocity

<div class="testimonial">
  <p class="testimonial__quote">Convert allows us to use data…</p>
  <div class="testimonial__author">
    <img class="testimonial__avatar" src="assets/mikea_testimonials.webp" alt="Mike Architetto">
    <div class="testimonial__meta">
      <span class="testimonial__name">Mike Architetto</span>
      <span class="testimonial__role">Co-Founder, Hivelocity</span>
    </div>
    <img class="testimonial__logo" src="/_shared/third party logos/hivelocitylogo.svg" alt="Hivelocity">
  </div>
</div>

Featured

Two things I like about Convert: support and their constant improvements. They respond quickly, do their best to solve your problem, and keep pushing the platform forward.

Hugh Caluscusin Tech Lead

<div class="testimonial testimonial--featured">
  <p class="testimonial__quote">Two things I like about Convert…</p>
  <div class="testimonial__author">
    <img class="testimonial__avatar" src="assets/hugc_testimonials.webp" alt="Hugh Caluscusin">
    <div class="testimonial__meta">
      <span class="testimonial__name">Hugh Caluscusin</span>
      <span class="testimonial__role">Tech Lead</span>
    </div>
  </div>
</div>

With image (split)

The visual editor is fast and reliable, even on complex pages, and the experiment setup is clear and flexible without feeling overwhelming. We especially like the transparency around data and privacy, which gives us confidence in the results.

Macarena Beltran Conversion Optimization Specialist

<div class="testimonial testimonial--media">
  <div class="testimonial__media">
    <img src="assets/macarenab_testimonials.webp" alt="Macarena Beltran">
  </div>
  <div class="testimonial__body">
    <p class="testimonial__quote">The visual editor is fast and reliable…</p>
    <div class="testimonial__author">
      <div class="testimonial__meta">
        <span class="testimonial__name">Macarena Beltran</span>
        <span class="testimonial__role">Conversion Optimization Specialist</span>
      </div>
    </div>
  </div>
</div>

Usage

Use real names, roles, and companies. A named person reads as proof; an anonymous quote reads as filler.
Keep quotes to one or two sentences. Trim to the line that carries the point.
The featured variant is for one hero quote, not a wall of them. Reserve it for the strongest line on the page.
Pair each quote with a real avatar or a customer logo whenever you can. The face or brand makes it credible.

States

Static (default): the testimonial does not animate or respond to interaction. It is a presentational block of attributed copy.

Code

Link the component stylesheet, then drop in the markup. Add testimonial--featured for a large pull quote, testimonial--media for a split layout with a feature image on the left, and an optional .testimonial__logo in the author row for a customer brand:

<link rel="stylesheet" href="/_shared/components/testimonial.css">

<!-- Default -->
<div class="testimonial">
  <p class="testimonial__quote">Multiple options to run A/B tests…</p>
  <div class="testimonial__author">
    <img class="testimonial__avatar" src="assets/jeganramanathan_testimonials.webp" alt="Jegan Ramanathan">
    <div class="testimonial__meta">
      <span class="testimonial__name">Jegan Ramanathan</span>
      <span class="testimonial__role">Demand Generation Manager</span>
    </div>
  </div>
</div>

<!-- With customer logo -->
<div class="testimonial">
  <p class="testimonial__quote">Convert allows us to use data…</p>
  <div class="testimonial__author">
    <img class="testimonial__avatar" src="assets/mikea_testimonials.webp" alt="Mike Architetto">
    <div class="testimonial__meta">
      <span class="testimonial__name">Mike Architetto</span>
      <span class="testimonial__role">Co-Founder, Hivelocity</span>
    </div>
    <img class="testimonial__logo" src="/_shared/third party logos/hivelocitylogo.svg" alt="Hivelocity">
  </div>
</div>

<!-- Featured pull quote -->
<div class="testimonial testimonial--featured">
  <p class="testimonial__quote">Two things I like about Convert…</p>
  <div class="testimonial__author"> … </div>
</div>

<!-- With image (split) -->
<div class="testimonial testimonial--media">
  <div class="testimonial__media">
    <img src="assets/macarenab_testimonials.webp" alt="Macarena Beltran">
  </div>
  <div class="testimonial__body">
    <p class="testimonial__quote">The visual editor is fast and reliable…</p>
    <div class="testimonial__author"> … </div>
  </div>
</div>