Reviews and Rating – Google Business

Bubbles

Just a few of the best reviews styled as speech bubbles without the summary at the top.

[reviews_rating theme="bubble" summary=false limit=3 min=5]

[reviews_rating theme="bubble columns three" summary=false limit=3 min=5 excerpt=150]

Bubbles, centred and filled

This time it is filled speech bubbles, centrally aligned with the summary hidden.

[reviews_rating theme="bubble center fill" summary=false limit=3 min=5]

[reviews_rating theme="bubble center fill columns three" summary=false limit=3 min=5 excerpt=150]

Columns and colours

Various responsive column layouts that appear when the screen is wide enough. Some of these customisations will require a little CSS.

A new colour scheme feature has just been released using a new parameter: color_scheme. It’s new, so what would you change based on this demonstration?

[reviews_rating theme="bubble columns two center fill" color_scheme="cranberry" summary="name, rating, stars, count" avatar=false review_item_order="text first"]

• Cranberry
• Coral
• Pumpkin
• Mustard
• Forest
• Turquoise
• Ocean
• Amethyst
• Magenta
• Slate
• Carbon
• Copper
• Coffee
• Contrast

[reviews_rating theme="columns two" summary=false limit=2 excerpt=120]

[reviews_rating theme="bubble center fill columns three" class="blue" place_id="ChIJ37ukkHcFdkgRbQDodKaNszs" summary=false date=false sort="shuffle_variable" limit=3 min=5 review_text_min=140 review_text_max=290 excerpt=120 name_format="last initial" avatar="/wp-content/uploads/Generic-Avatar-Blue.svg"]

[reviews_rating theme="bubble columns four" class="pink" summary="icon, name, rating, stars" icon="/wp-content/uploads/Colourful-Star-Logo.svg" limit=4 excerpt=110 stars="rgba(240, 20, 120, 0.9)" stars_gray="rgba(180, 90, 120, 0.3)" name_format="last initial"]

[reviews_rating theme="bubble columns four" class="pink pink-bubble" summary=false attribution=false limit=4 min=4 excerpt=110 name_format="first only" date="M Y" avatar="/wp-content/uploads/Generic-Local-Guide-Avatar-Magenta.svg"]

[reviews_rating theme="narrow center" class="red" summary="icon, name, rating, stars, count" icon="/wp-content/uploads/Red-Star-Logo.svg" limit=0 stars="css"]

The three, four column and stars="css" shortcodes have some additional CSS to alter the fill, overall rating and review stars:

.google-business-reviews-rating.bubble.fill.blue .listing .text {
    background-color: #005CAF;
}
.google-business-reviews-rating.bubble.fill.blue .listing .text::before {
    border-bottom-color: #005CAF;
}
.google-business-reviews-rating.bubble.fill.blue .listing .text a {
    color: #FFFFFF;
}
.google-business-reviews-rating.pink .rating,
.google-business-reviews-rating.pink .listing .rating {
    color: rgba(300, 20, 120, 0.9);
}
.google-business-reviews-rating.pink-bubble .listing .text {
    box-shadow: 0 0 0 2px rgba(300, 20, 120, 0.9) inset;
}
.google-business-reviews-rating.pink-bubble .listing .text::before {
    border-bottom-color: rgba(300, 20, 120, 0.9);
}
.google-business-reviews-rating.red .rating,
.google-business-reviews-rating.red .rating .star {
    color: rgba(255, 20, 20, 0.9);
}
.google-business-reviews-rating.red .rating .star.gray {
    color: rgba(165, 100, 100, 0.4);
}

Review item order and design

There is a lot of flexibility with this plugin’s appearance. You can select a number a ways to display the review items. Adjust the review text length or excerpt for consistency in columns.

[reviews_rating summary="icon, name, rating, stars" review_item_order="inline" limit=2]

[reviews_rating theme="columns two" summary=false review_item_order="text first author switch" id="5,3"]

[reviews_rating theme="bubble center columns two" summary=false review_item_order="text first" limit=2 offset=2 excerpt=130 date=false]

[reviews_rating theme="bubble center columns two" place_id="ChIJK092aEpzbqoR1exlPQa0ccI" summary=false review_item_order="author switch" sort="relevance_asc" limit=2 offset=1 excerpt=130 date=false]

[reviews_rating summary="rating, stars, count" review_item_order="text first author switch" limit=1 offset=3]

[reviews_rating summary=false avatar=false date="M jS, Y" review_item_order="text first inline" limit=2 excerpt=null review_text_max=400 review_text_inc="impressive, interesting, worthy, great, different, love, awesome"]

Badges

A few examples of badges to get you started; some of these will require a little additional styling.

[reviews_rating theme="badge" limit=0]

[reviews_rating theme="badge narrow" vicinity=false limit=0]

[reviews_rating theme="badge tiny fill" limit=0]

[reviews_rating theme="badge tiny" class="no-outline" link="write review" limit=0]

[reviews_rating theme="badge tiny narrow" class="fill stripe contrast" place_id="ChIJ1WJvwhoQdkgRZ2SW87_Wxhk" name="Google Reviews" summary="name, rating, stars" html_tags="h3" limit=0]

[reviews_rating theme="badge tiny narrow" class="no-outline" place_id="ChIJ37ukkHcFdkgRbQDodKaNszs" count=false limit=0]

[reviews_rating theme="badge fill" class="deutsch" place_id="ChIJ37ukkHcFdkgRbQDodKaNszs" limit=0 html_tags="h3" name="Google Bewertungen" icon="/wp-content/uploads/German-Flag.svg" vicinity=false review_word="Bewertungen" reviews_link="Unsere Bewertungen" write_review_link="Eine Rezension schreiben"]

There is a little custom CSS here because the width of badges will vary according to their content:

.google-business-reviews-rating.badge {
    max-width: 400px;
}
.google-business-reviews-rating.badge.narrow {
    max-width: 300px;
}
.google-business-reviews-rating.badge.deutsch .button {
    color: #FFFFFF;
    padding: 0.8rem 1rem;
    font-size: 1.1rem;
}

This final two badges have additional CSS to fix it to the bottom corners of the screen – provided the screen width and height are both greater than 700 pixels (otherwise it remains in place within the content). You can switch the overall position through changes to left and right.

[reviews_rating theme="badge tiny no-outline" class="fixed bottom left" color_scheme="amethyst" count=false limit=0]

[reviews_rating theme="badge tiny fill" class="fixed bottom right" limit=0]

@media (min-width: 700px) and (min-height: 700px) {
    .google-business-reviews-rating.badge.fixed.bottom.left {
        position: fixed;
        left: 20px;
        bottom: 20px;
        width: auto;
        z-index: 300;
    }
    .google-business-reviews-rating.badge.fixed.bottom.right {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: auto;
        z-index: 301;
    }
}

Buttons and links

Give visitors a chance to leave their own reviews, view existing reviews in Google and find the specific location in Google Maps.

[reviews_rating_link reviews_link]Read our reviews[/reviews_rating_link]

[reviews_rating_link write_review_link]Write your review[/reviews_rating_link]

[reviews_rating_link maps_url]Google Maps Location[/reviews_rating_link]

[reviews_rating_link write_review_link class="button"]<span class="google-icon white first"></span> Write your review[/reviews_rating_link]

[reviews_rating_link reviews_link class="button button-transparent"]Read our reviews <span class="google-icon last"></span>[/reviews_rating_link]

[reviews_rating_link maps_link class="button button-white"]<span class="google-icon black first"></span> Find us on Google Maps[/reviews_rating_link]

You may need to add some of your own styling to apply the button designs. Check your theme for details or add something similar to this:

.button-transparent {
    color: #cd2653;
    border: 2px solid #cd2653;
    background-color: transparent;
}
.button-white {
    color: #000000;
    border: 2px solid #ffffff;
    background-color: #ffffff;
}