Badge insert as in the demo

@blas2021 To use the shortcode in the footer (or any other widget area), please add a standard HTML/Text Widget and then place the shortcode into this box.

If you have a URL to share, I will have a look at this shortly and offer further assistance as required.

• This reply was modified 4 years ago by Design Extreme. Reason: URL Addition

Hello @designextreme, now the badge works well for me, I have the css applied but it does not stick to the corner. Why?

This is the url https://dentistudio.es/

Thank you very much

@blas2021 I cannot see any sign of the shortcode in the footer (just an empty one).

1. Please go to the Dashboard | Widgets | Add: Text (or select the existing one)
2. Then use the shortcode in the demo to start the process. Place as “text”: [reviews_rating theme="badge tiny fill" class="fixed bottom right" limit=0]
3. Once added, change all references of “right” to “left” in the class name and the corresponding CSS.

Good morning @designextreme , I had the cache activated and that’s why you couldn’t see it, the code with which I was trying to do it was different, exactly this:

[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"]

I have tried the one you tell me and now if it works perfectly (I don’t know if it is possible to do the same with the previous code), the only question I have now is whether in the mobile version it could stay permanently in the footer, similar to the one the way you do it on your computer, which is always visible.

Thanks and regards (Very good plugin, congratulations!)

@blas2021 I am glad that you’ve got this working!

I set the CSS as follows to avoid the fixed badge from hiding content in smaller screens:

@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;
    }
}

When the screen is “too small” it will revert back to its original styling, in place in the footer. Please change the parameters after @media to make your own preference.

I recommend adding this styling to improve this:

.google-business-reviews-rating.badge.tiny {
    max-width: none;
    width: auto;
}

… and for your main review listings, you have an issue with the avatar placement. This can be resolved be changing .entry-content ul li to:

.entry-content .vc_row ul li {
    list-style: disc;
    margin-left: 22px;
    padding-left: 5px;
}

Just add .vc_row and remove !important to make the rule more important but not the most important.