Translate Widget

  • Issue description:
    I cannot get this widget to work. I am using Wix platform. I have tried using the link and the embed code. I have tried on many different pages and in the menu. I have republished the website (rather than “preview” mode) thinking that may solve the issue. Still, nothing works. I am only trying to translate from English to Spanish so it should not be this difficult. Any suggestions would be great!
  • Link to the page with the widget in question:
1 Like

Hi there, @Holley_Jacobs :wave:

The thing is that the Wix platform is built on iframes. To make the widget work correctly, it should be reinstalled outside them. You can try to do it yourself, following the steps described in this article - Installing Elfsight widget on Wix avoiding iFrame - Elfsight Help Center

However, I see that you’ve already sent the installation request to our Support Team, and they’ll be happy to assist you if you face any difficulties :slightly_smiling_face:

Thank you for the reply. I have sent “installation” this email but figured I would post it here too. I am on a deadline and need this issue resolved ASAP. Please see the below email:

Hello,
I have followed the instructions for Wix and still am unable to get the translate button to work. I don’t want to have to have Elfsight install my widgets. I designed websites for other companies and have deadlines I must meet. I need to be able to do this myself. I put both codes into the backend settings “custom code” and toggle between them and then published the website. Neither worked. I am confident I put the code in the right section in the backend as I use that area of other programs (like Google Analytics, Google Search, Tag Manager, etc.) and am very familiar with it.

Here is a link you can view - https://www.wichana.org/how-you-can-help/engage-in-social-media - it is the black box in the top left corner of the header that is supposed to have the translate widget.
The instructions were straightforward and I felt comfortable in getting the code as instructed. However, it still doesn’t work. I even tried Single Page Application too just to be sure. Please view the following code I put into the custom code section of my Wix website.
Please advise. Thank you.

CHROME CODE OF CONTAINER BOX IN HEADER OF WEBSITE -

ELFSIGHT CODE FOR THE TRANSLATION WIDGET -

TEMPLATE CODE FOR ELFSIGHT WIDGETS - replace “BLOCK_ID” WITH THE “INSPECT” CODE GOTTEN FROM CHROME - replace “WIDGET_ID” 9th line with the ELFSIGHT ID

MULTI PAGE APPLICATION

SINGLE PAGE APPLICATION

  • Issue description: I am trying to insert this code in Wix. I am having issues getting the Translate to work. I was told how to code it using the “inspect” feature in my browser and custom code in backend of Wix. I had already put the social feed into the website. It was a pain but I didn’t realize I was suppose to code it. You can also see the black box in the top left header where the translate widget is supposed to be but isn’t
  • So I went and redid the widget and put it on the website - right beneath the iframe I originally used. As you can see, it also doesn’t work. Please advise on this widget or maybe the issue I am also having with the translate widget. Thank you. Here is the code I used for the social feed widget.

I’ve checked your widget, and it seems that you’ve added it twice. The first is installed in an iframe:

And the 2nd on is outside an iframe:


The widget installed outside an iframe has some extra spacing above. To remove it, replace the code you were using, with this one:

<script>
	window.onload = () => {
		let placeElement = document.querySelector('[data-mesh-id="comp-m3hjuav1inlineContent"]');
		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('async', '');
		widgetElement.classList.add('elfsight-app-a1779e06-6859-48b5-85a9-e3264a703ca3');
	
	
		setTimeout(() => {
			placeElement.appendChild(scriptElement);
			placeElement.appendChild(widgetElement);
		}, 2500);
	};
	</script>

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

Yes, I am aware that it is on there twice. I installed the first one using an iframe but it was a pain and at times, the scroll bar shows especially on mobile.

Then I tried to install your translate widget but couldn’t get it to work. I asked in the community and was told that Wix doesn’t play nice with iframes and was given coding to do to install the translate widget.

I did that for the translate widget - it still isn’t working

BUT I wanted to try it with the social feed because I was hoping it would look better on the site and stop those ugly scroll bars from showing up especially on mobile. However, I can’t get it to work using the coding instructions I was given.

I would rather install it using code if that will look blend better with the website. Your instructions for Wix include the HTML and iframe method which is what I originally used. You don’t say that Wix may not work until the very bottom of your Wix instructions. I will try the code you gave for the social feed but could use help with that translate one.

Please advise. Thank you.

I JUST tried the code you gave me for the social feed - it still doesn’t work.

1 Like

Ah, apologies for the inconvenience!

Could you please remove # before the block id and let me know if it worked:

In the meantime, I am checking the issue with the Website Translator widget.

@Holley_Jacobs I’ll discuss the Website Translator case with the devs and will update you tomorrow :slightly_smiling_face:

Hi Max,
I took the # out and it did finally work. Although I want to share with you that originally, I didn’t have the # in either of my widget codes. But after they wouldn’t work, I went back to your instructions on how to use code with Wix to be outside of an iframe and I noticed that in Elfsight’s “example” - there actually is the #. Please see screenshot.

Anyway, the social feed is now working by taking out the # and translate now works by using your code in this forum (and removing the #). Also, I literally copied and pasted the code given in this Wix instruction article. Someone should replace that with your code. I am not sure how they differ except that yours WORKS!! :grin:

Here is the URL of the article where I copied the code for the multi page application. And again, see screenshot of the # in Elfsight’s example code.

Thanks soooo much for your help.

I fixed it. See my reply to this thread. I got it to work by using the code you gave me in this thread NOT the code they give in the instruction article. I also removed the # like you suggested even though it is in the Elfsight installation guide.

I hope you can get them to fix that code so other Wix user’s don’t have to go through this mistake again.

THANKS so much for your help!! You’re a ROCKSTAR!!!
Holley

1 Like

Hi Max,
I guess I spoke too soon in the other thread. The translate doesn’t work and the social feed has now disappeared too. ugh

1 Like

Ah, I am really sorry about that!

Our devs will check the issue with the Social Feed as well, and I’ll get back to you tomorrow.

Hi Max,

I wanted to let you know that I have been playing with the code (between yours and the elfsight article) and there is a common theme I am getting.

I am unable to have both codes working at the same time. If the translate works, the social feed doesn’t. And vice versa!! The codes for both are IDENTICAL except for the BLOCK-ID and WIDGET-ID.

I hope maybe this helps someone more experienced than me to diagnose and fix the issue. Thanks so much for your time.
Holley

1 Like

Hi @Holley_Jacobs :wave:

Good note! Indeed, that happened because the custom code worked only for one widget on the page. As far as I see, the Social Feed widget is working fine now. Please double-check it:


I see that my colleague Nataly has already shared a solution for the Website Translator widget. As she said, please try to replace the previous code for Website Translator in the Custom Code section with the new one:

<script>
  window.addEventListener("load", () => {
    let placeElement = document.querySelector('[data-mesh-id="comp-k0weoj0jinlineContent-gridContainer"]');
    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('async', '');
    widgetElement.classList.add('elfsight-app-819e84c6-efcd-430b-9c0c-e1dc6cfd24f5');
    setTimeout(() => {
      placeElement.appendChild(scriptElement);
      placeElement.appendChild(widgetElement);
    }, 2500);
  });
</script>

Additionally, we’ve applied a CSS code to the Custom CSS section of your widget settings to ensure proper positioning:

.global-styles, 
.elfsight-app-819e84c6-efcd-430b-9c0c-e1dc6cfd24f5 {
  position: relative;
  margin: 0px 0px 0px calc((100% - 784px)* 1);
  left: 100px;
  grid-area: 1 / 1 / 2 / 2;
  justify-self: start;
  align-self: center;
}

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

1 Like

Hi @Maxim_smith - maybe you can help. I am new to this forum and still figuring out how to navigate it. Sorry if I did it wrong. I am just a little desperate with these widget issues.
I appreciate Max getting back to me. I decided not to use the translate widget. It isn’t robust enough. However, I am adding to this thread because this is where we also discussed the social media feed.

I do have that on the website using the workaround (not in a iframe) recommended. But, it loads sooooooooo slow that people are going to bounce right off that page. I need some advice on how to make that load faster because it’s taken 30 seconds or more and a lot of times, I have to refresh my screen to get it to show up. Obviously, this won’t work. Thank you for your time. I appreciate you.

Hi @Holly_jacobs! :slight_smile:
As I understand it now, your widget is taking a long time to load. If it doesn’t work (or takes a long time to load) then please ask a dev. If you can’t reach a dev, you can let me know. I will try to find a dev/admin who can help you more (in the Champions Channel or private channel). I’m very sorry. And if you need help in the forum, you can DM me. Have a nice day :slight_smile:

hi @Maxim_smith - Thank you for reaching out to me. I appreciate it very much. I am not sure what the Champions Channel is or how to access it. Can you give me some direction to the best place to state the issue of social media feed load time? I am still learning how to navigate this community but am very busy with several website design projects. Time is not on my side. :laughing: I appreciate you and thanks again.
Holley

Oh yea…
The Champions Channel is for the champions only, so if you help people much or text here a lot, you get a champions trophy / badge! :slight_smile:
Then you have a private champions channel!

1 Like

I will help you, just let me figure out how. I will reply to you directly when I find a solution! If that takes too long for you, you can always ask @Max or @Helga ! :slight_smile:

Thank you so much! I was going to tag Max but his status says he is on vacation. Any direction you can give me is very much appreciated. Thanks so much @Maxim_smith