Create a Social Proof Widget with Avatars Using HTML & CSS

Social Proof Widgets

Adding social proof to your website is one of the best ways to build trust with your visitors. In this quick tutorial, we’re going to create a simple yet powerful social proof widget, the kind you’ve seen on popular SaaS sites featuring user avatars, a star rating, and a credibility statement. And best of all, it’s built with just HTML and CSS.

Step 1: Set Up Your Widget Container

If you’re using Elementor, Bricks, Breakdance or something similar, add an HTML widget to your page. Inside the container, you’ll add the text and structure of the widget. This will include your headline, avatars, and star ratings.

Step 2: Add the HTML

Copy and paste the following HTML into your HTML widget. Make sure to replace the image URLs in Step 3.

<div class="reviews-container">
        <div class="profile-stack">
            <img src="your image URL here" alt="Reviewer 1" class="profile-image">
            <img src="your image URL here" alt="Reviewer 2" class="profile-image">
            <img src="your image URL here" alt="Reviewer 3" class="profile-image">
            <img src="your image URL here" alt="Reviewer 4" class="profile-image">
            <img src="your image URL here" alt="Reviewer 5" class="profile-image">
        </div>
    </div>

Step 3: Update Image URLs

Replace the src values in the avatar images with your own image URLs. You can upload the images to your WordPress media library and copy the links.

It’s best practice not to put the whole link from Wordpress but start with the /wp-content following the rest of the URL. This will ensure the image shows even if you use staging sites.

Step 4: Add the CSS

.reviews-container {
    padding: 0px;
}

.profile-stack {
    display: flex;
    align-items: center;
}

.profile-image {
    width: 48px!important; /* adjust the size of avatar images - keep width and height the same */
    height: 48px!important; /* adjust the size of avatar images - keep width and height the same */
    border-radius: 50%!important;
    border: 2px solid #000!important; /* adjust the boder color and width */
    margin-right: -12px; /* adjust for the overlap effect */
    transition: transform 0.3s ease;
    object-fit: cover;
}

.profile-image:hover {
    transform: translateY(-5px);
}

/* Ensures last image doesn't have negative margin */
.profile-image:last-child {
    margin-right: 0;
} 

If you’re stuck, watch the video tutorial!

Watch the Full Video Tutorial If you run into any issues or want to follow along step-by-step, watch the full video tutorial here 👇