How To Use The Social Proof Widget By Atomic Addons

The Social Proof widget by Atomic Addons shows how your business is rated on review sites. Each source gets a card with its icon, a title such as “Google Rating”, your average rating with stars and “Based on 120 reviews”, and the card links to your page on that site. Google, Facebook and Yelp ratings can load automatically and stay up to date; G2, or any source without an API key, uses the numbers you type in. This guide covers setting up the sources and the cards.

Enable the Social Proof Widget

Social Proof is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Social Proof. You can also open the Marketing category.

4. 4

   Turn the Social Proof widget on.

5. 5

   Click Save Settings.

API Keys for Live Ratings

To load the Google and Yelp ratings automatically, save the keys once for the whole site:

1. 1

   Go to WordPress Dashboard → Atomic Addons → Settings.

2. 2

   For Google, in API Settings, paste a Google API key with the Places API enabled into Google Map API Key.

3. 3

   For Yelp, in Yelp Access, paste the API key from your Yelp developer account into Yelp API Key.

4. 4

   Click Save Settings.

Facebook needs no site setting: you enter the page's access token in the widget itself. Without a key, a source shows the static values you type in its section, and the panel reminds you of that with a notice.

Add the Social Proof Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Social Proof. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

A source that is switched on but has no rating yet is left out, and the editor shows a short hint about what it needs. Visitors only ever see the cards that have a rating.

Layout

Content → Layout chooses the sources and what each card shows:

1. 1

   Show Google Review: A card for your Google rating. On by default.

2. 2

   Show Facebook Review: A card for your Facebook page's rating. Off by default.

3. 3

   Show Yelp Review: A card for your Yelp rating. Off by default.

4. 4

   Show G2 Review: A card for your G2 rating. Off by default.

5. 5

   Reload Reviews After: How long a loaded rating is kept before the widget asks the site again: an Hour, a Day (the default), a Week, a Month or a Year. In the editor it reloads every minute, so you see changes quickly.

6. 6

   Columns: 1 to 6 cards per row, 1 by default. Use the device icon to change the tablet and phone numbers.

7. 7

   Column Gap: The space between cards side by side: Small, Medium (the default), Large or Collapse (none).

8. 8

   Row Gap: The space between rows of cards, 30px by default.

9. 9

   Show Social Icon: The source's logo. On by default.

10. 10

    Show Social Name: The title, such as “Google Rating”. On by default.

11. 11

    Show Total Rating: The average as a number, such as 4.8. On by default.

12. 12

    Show Rating: The average as five stars, with halves. On by default.

13. 13

    Show Reviews: “Based on 120 reviews”. On by default; hidden when the number is unknown.

Google Reviews

Content → Google Reviews appears while the Google card is on:

1. 1

   Google Place ID: Your business's Place ID. The HERE link under the field opens Google's Place ID Finder.

2. 2

   Avg. Rating (Static): The rating to show when Google can't be asked, such as 4.8.

3. 3

   Total Rating (Static): The number of reviews to show in that case.

4. 4

   Google Map URL: Where the card links when Google gives no address, such as your Google Maps listing.

Facebook Reviews

Content → Facebook Reviews appears while the Facebook card is on:

1. 1

   Page ID: Your page's ID or username: for https://facebook.com/wpcaliph it is wpcaliph.

2. 2

   Page Access Token: A page access token for that page, from Facebook's Access Token Tool. With the ID and token, the widget loads the page's star rating and rating count.

3. 3

   Avg. Rating (Static) / Total Rating (Static): The values to show without a token, or when Facebook doesn't answer.

4. 4

   Facebook Page URL: Where the card links. Without it, the card links to the page from Page ID.

Yelp Reviews

Content → Yelp Reviews appears while the Yelp card is on:

1. 1

   Yelp Business ID: The last part of your Yelp page's address: for https://www.yelp.com/biz/apple-store-new-york it is apple-store-new-york.

2. 2

   Avg. Rating (Static) / Total Rating (Static): The values to show without a Yelp API key.

3. 3

   Yelp Page URL: Where the card links when the rating doesn't come from Yelp.

G2 Reviews

G2 has no public API, so its card always uses the values you enter in Content → G2 Reviews: G2 Avg. Rating, G2 Total Rating and G2 Page URL for the link. The card appears once the average is filled in.

Style the Social Proof

Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.

• Items — the card in Normal and Hover states: background, border, radius and padding, plus hover colors for the title, total rating and review count.
• Google Reviews, Facebook Reviews, Yelp Reviews and G2 Reviews — colors for one source's card: Icon Color, Background and Border Color, in Normal and Hover states.
• Icon — the logo's color, background, radius and the space beside it.
• Name — the title's color, spacing and typography.
• Rating — the star Color and Active Color, size, spacing and margin, and the Number Color of the average.
• Reviews — the review count's color and typography.