How to showcase testimonials on your website using Groundhogg

In your business, you not only manage contacts but also receive valuable testimonials from them. Showcasing these testimonials on your website can build trust and credibility.

In this guide, we’ll walk you through the simple steps to set up and display testimonials on your website using Groundhogg.

Requirements:

• Groundhogg Core Plugin: Ensure that Groundhogg is installed and activated on your WordPress site.
• Company Records Extension: This extension is required to manage company information.

Step 1: Set Up Custom Fields for Testimonials

• Create a Custom Fields Tab:
  • Navigate to Groundhogg > Contacts > any contact
  • Create a Custom Fields tab named “Testimonials”
  • Click [ Add Custom Properties ] and add a Group for example “Details”.
• Add Custom Fields:
  • Within the “Testimonials” tab, create the following custom fields:
    • Title: Testimonial Title.
    • Testimonial: The actual testimonial content.
    • Rating: Add a numeral 1-5 for the stars
    • Profile Picture: Upload the profile picture via the Media Library and paste the link into this field.

Step 2: Create a Tag for Testimonials

• Create a Tag:
  • Go to Groundhogg > Tags.
  • Create a new tag named “Testimonial”.
  • Get the Tag ID: Hover over the newly created tag to reveal its ID. You’ll need this ID for the code in the next step.

Step 3: Populate Contacts with Testimonial Information

• Create New Contacts:
  • Add a few contacts in Groundhogg.
  • Fill in the custom fields you created earlier, including the company name, job title, company website, and testimonial text.
  • Upload their profile picture to the Media Library and paste the link into the “Profile Picture” field.

Step 4: Display Testimonials on Your Website

• Add the Code:
  • Copy the following code snippet and paste it into your theme’s functions.php file or use a code snippets plugin:

function display_groundhogg_testimonials_shortcode() {
    // Create a new query to fetch contacts with the tag "testimonial"
    $query = new \Groundhogg\Contact_Query( [
        'tags_include' => [1] // Place the Tag ID
    ] );

    // Get the contacts from the query
    $contacts = $query->get_objects();

    // Start building the output
    $output = '
    <style>
        .testimonials-container {
            display: flex;
            flex-direction: column;
            gap: 20px; /* Space between testimonials */
        }
        .testimonial {
            display: flex;
            gap: 20px; /* Space between profile picture and content */
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 8px;
            background: #f9f9f9;
        }
        .testimonial-profile-picture {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            background-color: #d3d3d3; /* Light gray background */
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff; /* Text color for initials */
            font-size: 1.5em;
            font-weight: bold;
        }
        .testimonial-profile-picture.empty {
            background-color: #d3d3d3; /* Light gray color when no image is present */
        }
        .testimonial-content {
            flex: 1;
        }
        .testimonial-title {
            font-size: 1.2em;
            margin: 0;
        }
        .testimonial-text {
            margin: 10px 0;
        }
        .testimonial-author {
            font-style: italic;
        }
        .star-rating {
            font-size: 1.2em;
            margin-top: 10px;
        }
        .star {
            color: #ccc; /* Color for empty stars */
            margin: 0 2px;
        }
        .star.filled {
            color: #f5c518; /* Color for filled stars */
        }
    </style>';

    $output .= '<div class="testimonials-container">';

    // Loop through each contact and display testimonial information
    foreach ( $contacts as $contact ) {
        $first_name = $contact->first_name;
        $last_name  = $contact->last_name;

        // Fetch specific metadata
        $profile_picture = $contact->get_meta('profile_picture'); // Retrieve the profile_picture metadata
        $rating = intval($contact->get_meta('rating')); // Retrieve and convert rating to an integer
        $company_name = $contact->get_meta('company_name'); // Retrieve company_name metadata
        $company_website = $contact->get_meta('company_website'); // Retrieve company_website metadata
        $job_title = $contact->get_meta('job_title'); // Retrieve job_title metadata
        $testimonial = $contact->get_meta('testimonial'); // Retrieve testimonial metadata
        $testimonial_title = $contact->get_meta('testimonial_title'); // Retrieve testimonial_title metadata

        // Check if the profile picture exists and add it to the output
        if ( $profile_picture ) {
            $profile_picture_output = '<img src="' . esc_url( $profile_picture ) . '" alt="Profile Picture" class="testimonial-profile-picture">';
        } else {
            $profile_picture_output = '<div class="testimonial-profile-picture empty"></div>'; // Placeholder for empty profile picture
        }

        // Generate star rating HTML
        $star_rating_output = '<div class="star-rating">';
        for ($i = 1; $i <= 5; $i++) {
            if ($i <= $rating) {
                $star_rating_output .= '<span class="star filled">★</span>';
            } else {
                $star_rating_output .= '<span class="star">☆</span>';
            }
        }
        $star_rating_output .= '</div>';

        // Create the testimonial block
        $output .= '<div class="testimonial">';
        $output .= $profile_picture_output;
        $output .= '<div class="testimonial-content">';
        $output .= '<h3 class="testimonial-title">' . esc_html( $testimonial_title ) . '</h3>';
        $output .= '<p class="testimonial-text">' . esc_html( $testimonial ) . '</p>';
        $output .= '<p class="testimonial-author">' . esc_html( $first_name ) . ' ' . esc_html( $last_name ) . ', <em>' . esc_html( $job_title ) . '</em> at <a href="' . esc_url( $company_website ) . '" target="_blank" rel="noopener noreferrer">' . esc_html( $company_name ) . '</a></p>';
        $output .= $star_rating_output;
        $output .= '</div>'; // .testimonial-content
        $output .= '</div>'; // .testimonial
    }

    // Close the container div
    $output .= '</div>'; // .testimonials-container

    // Return the output to be displayed in the shortcode
    return $output;
}

// Register the shortcode
add_shortcode( 'display_groundhogg_testimonials', ‘display_groundhogg_testimonials_shortcode’ );

This code will automatically pull in contacts with the “Testimonial” tag and display their testimonials on a page or post using the shortcode [display_groundhogg_contacts].

Step 5: Automate the Testimonial Collection with a Funnel

• Create a Funnel to Capture Testimonials:
  • Go to Groundhogg > Funnels and create a new funnel for collecting testimonials.
  • Add an “Add Tag” action to automatically assign the “Testimonial” tag to contacts who submit a testimonial.
  • Once tagged, the contact’s testimonial will automatically appear on your testimonial page.

Conclusion

By following these steps, you can easily set up a system to display testimonials on your website using Groundhogg.

This not only makes your website more dynamic but also allows you to leverage positive feedback from your contacts, enhancing your brand’s reputation.

Start showcasing your testimonials today and let your satisfied customers do the talking!

Get started with Groundhogg!

To get started with Groundhogg, you can:

• Start a 14-day demo.
• Purchase a plan.
• Take the free quickstart course.
• Keep reading!

Have questions? Don’t hesitate to shoot us a message!