Sticky badge with reviews

i also found a problem with linking… it doesnt work if I switch to custom shortcode.

example code:
[reviews_rating theme=”badge tiny” class=”no-outline” link=”write review” limit=0]

link is not working with “load stylesheet” activated. When i turn it off it works. How to solve it?

thanks in advance

• This reply was modified 3 years, 6 months ago by cometto.
• This reply was modified 3 years, 6 months ago by cometto.

@cometto Did you have a look at the Demo website?

This has a similar example to that described by you.

[reviews_rating theme="badge tiny" class="fixed bottom left no-outline" link="write review" 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;
    }
}

You can place this Shortcode in the header, in the footer or within the page if it exists throughout the website. It will fall-back to a specific location if the window size is small.

In your link, I can just see the working example to read your reviews.

• This reply was modified 3 years, 6 months ago by Design Extreme. Reason: Updated the Shortcode and last sentence
• This reply was modified 3 years, 6 months ago by Steven Stern (sterndata).

@cometto I didn’t see your recent reply after modification.

The Load Stylesheet applies to this only and not the JavaScript. It will fall back to the HTML star characters rather than SVG stars. Check out the Demo website for more things you can do with the SVG stars.

Seeing the current version of the page, I’d recommend attaching additional CSS to resize the icon or use the class parameter to set one of the three G icons. There are plenty of options!

@cometto I’ve just checked your latest placement in your website and it seems to be working as intended.

Did you find out what you missed the first time?

step by step, by some miracle I managed to create what I wanted. Not in the form of a badge, but adding to the header. I have 1 more question

PSI is giving me different warnings now:
– eliminate reneder blocking resources:
https://liveflooring.com/wp-content/cache/min/1/wp-content/plugins/g-business-reviews-rating/wp/css/css.css?ver=1631194635

Is there anything I can do with it? I do not have any modifications on the desktop. For mobiles I had to use a small css – I used it in customize.

• This reply was modified 3 years, 6 months ago by cometto.
• This reply was modified 3 years, 6 months ago by cometto.

@cometto Thanks for the update!

There are probably many different ways to achieve what you’re looking for.

I’d recommend using the Demo website as a nice starting point. I’ve even added a new entry in the Badge section that will cover your particular situation.

I would also recommend having different styling for window sizes using the @media CSS query.

With the warning you mentioned, this isn’t something that I’ve heard about before. Where are you seeing this warning (e.g. Console in Chrome for Windows)?

@designextreme

Of course i saw your demo website any and shortcode doesnt work as link. The only way was to disable styling but it wasnt attractive.
I solved that problem by standard shortocode + adding more values (with enabled styling).

In my template (flatsome) there is a place for CSS for mobile and there I put few parameters. All these warnings are given by google page speed insights. You can see it during scan: https://liveflooring.com/produkt/podloga-sportowa-basic-black/

• This reply was modified 3 years, 6 months ago by cometto.

@cometto If you’re compressing the JavaScript, there’s a chance that you can lose functionality. Unfortunately, there are other plugins, themes, compression techniques that will negatively impact on this plugin’s functionality. Most of the impacts will be intentional, but occasionally this is not the case.

When I run this on my development website or the Demo website, the parameter: link="write review" is working as expected. There’s even an example in the Badge section of the Demo website.

Thanks for the information about the warnings. I’ll have a look into this a little more in the coming days and make changes to the style sheet or JavaScript if needed.

@designextreme

I implemented code you sent if first reply. Looks great but it doesnt work as a link. Can you see it?

PS: i added this code to header menu section. Is it right place? In my theme there is an option to load some codes in header/body etc but i dont know what to put there.

• This reply was modified 3 years, 6 months ago by cometto.
• This reply was modified 3 years, 6 months ago by cometto.

@cometto I have just tried this in Firefox and Chrome (Windows 10) and it works each time – the link goes directly to Google’s Write a Review popup. There are no errors in the console (apart from a failed doubleclick.net request).

@designextreme
im testing desktop on Chrome and Internet explorer, both in private view and doesnt work.

see link, it is not active at all
https://ibb.co/RTwsS4V

• This reply was modified 3 years, 6 months ago by cometto.
• This reply was modified 3 years, 6 months ago by cometto.
• This reply was modified 3 years, 6 months ago by cometto.

@cometto Found it!

This is the errant CSS from Flatsome…

.badge {
    pointer-events: none;
}

Please edit your CSS to have something like this:

.google-business-reviews-rating.badge.fixed.bottom.left {
    position: fixed;
    left: 20px;
    bottom: 25px;
    width: 120px;
    z-index: 300;
    font-size: 10px;
    background-color: white;
    pointer-events: all;
}

@designextreme

Thank you so much, will rate your support for 5 stars!.

1 more question. What do you think about display this badge on mobile?

should I just use?:

@media (max-width: 700px) and (max-height: 700px) {
    .google-business-reviews-rating.badge.fixed.bottom.left {
display: none;
	}
}

or is there more practical way of display?

• This reply was modified 3 years, 6 months ago by cometto.

@cometto Thanks so much for the ?!

In your website, I would just ensure the placement is somewhere in the header, footer or elsewhere where it can live without always remaining in view.

The badge itself will appear the same for smaller screens too – but just remaining in the spot in the page.

For larger screens the fixed positioning makes more sense (more real estate). Change the media query to work for your situation, the 700 pixel minimum is a little arbitrary.

@cometto I just saw your CSS… If you want to hide it, I suggest making a mobile only version that can live somewhere in your page (not fixed). This plugin does support multiple instances. Personally, I prefer the method used in the Demo website that has its “home” for small screens and floats in a corner for larger screens.