RTL customization for Google reviews

Ask the Community Customization
1

Hi all,

I’ve set my google reviews widget and everything looks good except that I need the reviews to be RTL instead of LTR, I noticed that this feature is only available via CSS code but unfortunately I couldn’t find it. Can anyone please share the necessary code please?

Thanks in advance!

1 Like
3

Hi there @Dor_Aldy :wave:

Do you want to apply the RTL mode only to the review texts or maybe you’d like to align to the right the other widget’s elements like Reviewer’s name and photo, Google logo, etc?

4

Thanks for the quick reply @Max

I’d like the whole review block to be RTL.

1 Like
5

Is that something possible to achieve @Max ?

1 Like
6

Yeah, it’s possible! I see that you have 3 Google Reviews widgets. Could you please let me know which one you’d like to be customized (share widget name or widget ID)?

1 Like
7

Sure! The widget name is “Ronit Reviews”

1 Like
8

Thank you!

Your request is with our devs now. I’ll get back to you romorrow :wink:

1 Like
9

Thanks a lot @Max ! :smiley:

So the dev team will fix this widget so it will be RTL?

And one more issue I noticed when installing the widget on my Wix Studio website is that it wont scale proportionally as the section its attached to. (I have both on scale proportionally)
I keep getting a huge gap at the bottom of the section on larger screens.

Is there a solution for that?

1 Like
10

Yes, our devs will provide a custom code to make the widget RTL :slightly_smiling_face:

As for the scaling issue, could you please send me a link to the page where your widget is installed?

1 Like
11

Awesome! :star_struck:

And yes, I just sent you the link to that specific page

1 Like
12

Thanks! Our devs will check this issue as well :wink:

1 Like
13

Thanks a lot!!

1 Like
14

@Dor_Aldy To make the widget RTL, please add this code to the Custom CSS field on the Style tab of your widget’s settings:

.global-styles, .eapps-google-reviews-b95904de-af18-4953-9a5a-43764186a6d6-custom-css-root {
  direction: rtl;
}

.global-styles, #eapps-google-reviews-b95904de-af18-4953-9a5a-43764186a6d6 {
  direction: rtl;
}

Check it out and let me know if it helped :slightly_smiling_face:


The spacing appears below the widget because it’s installed in iframe. To remove it, you should reinstall it avoiding iframe - Installing Elfsight widget on Wix avoiding iFrame - Elfsight Help Center.

Give it a try and let me know how it worked!

1 Like
15

Hey @Max
Thanks for getting back to me!

The CSS for the RTL works great. However I couldn’t install the code without iFrame because Wix requires a plan in order to install custom code. I will tell my client to buy a plan next week, but until then can you please verify if the container ID and widget ID are the right ones?
(I created a grey container on the page I sent you)

Container ID:

#comp-lyss8tto

Widget ID:

elfsight-app-b95904de-af18-4953-9a5a-43764186a6d6

And this will be the complete code:

<script>
window.onload = () => {
  let placeElement = document.querySelector('#comp-lyss8tto');
  if (!placeElement) return;
  let scriptElement = document.createElement('script');
  let widgetElement = document.createElement('div');


  scriptElement.setAttribute('src', 'https://static.elfsight.com/platform/platform.js');
  scriptElement.setAttribute('defer', '');
  scriptElement.setAttribute('data-use-service-core', '');
  widgetElement.classList.add('elfsight-app-b95904de-af18-4953-9a5a-43764186a6d6');


  setTimeout(() => {
    placeElement.appendChild(scriptElement);
    placeElement.appendChild(widgetElement);
  }, 2500);
};
</script>

Thanks a lot for your help!

1 Like
16

Yes, both the widget and container IDs are correct :wink:

17

Thanks a lot. Will check that once I have a plan set for that site.
Have a great weekend! :beers:

1 Like
18

No problem!

Have a great weekend too :wink:

1 Like
19

Thanks a lot!!

2 Likes
20

Welcome to the Community @Ian_Bell :wave:

Great to see that this solution worked for you too. Thank you for the feedback!

By the way, we have a CSS Codes category where you can find the most popular codes for different apps, including Reviews - CSS Codes - Elfsight Community.

However, if you haven’t found the needed code, faced issues or got questions, we are always here for you to help :wink:

1 Like