-
Issue description: – Please help me figure out how to fix this widget moving so slow and half the time not ever showing at all on the page. This is getting very frustrating for me. I purchase a plan and every single widget I have tried to use has had issues. This website just got published so the nonprofit is referring EVERYONE to it… meanwhile the social media feed is non-existent. @Helga
-
Link to the page with the widget in question: - https://www.wichana.org/how-you-can-help/engage-in-social-media
Hi @Holley_Jacobs sorry I can’t see any feed from elfsight on the site?
@Sina - That is exactly part of the problem. You have to refresh and refresh and refresh and then wait for about 20+ seconds and then it will appear in that big white spot halfway down the page.
Hey @Holley_Jacobs!
I’ve passed the issue you’ve reported to our devs team! As soon as I get some news, I will contact you back here
Dear @Holley_Jacobs , thanks for waiting!
I spoke with our developers, and they explained that this issue is caused by the CMS itself. For some reason, Wix “removes” the widget installation code.
Currently, you have the following installation code:
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);
};
Our developers recommend starting by changing the container selector to comp-m3hjuav1inlineContent-gridContainer. The updated code will look like this:
window.onload = () => {
let placeElement = document.querySelector('[data-mesh-id="comp-m3hjuav1inlineContent-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-a1779e06-6859-48b5-85a9-e3264a703ca3');
setTimeout(() => {
placeElement.appendChild(scriptElement);
placeElement.appendChild(widgetElement);
}, 2500);
};
If this doesn’t resolve the issue, they suggest increasing the delay to 3000 in setTimeout(() => placeElement.appendChild(widgetElement);)
.
Could you please try this solution and let me know if this resolves the issue?
@Rena - Hi! I installed the code you suggested. It still doesn’t work even when increasing to 3000. ACtually it makes it worse - when you first load website - you can see the code at the top of the page at times.
@Holley_Jacobs Thanks for letting me know!
It looks like the script wasn’t placed correctly — it’s currently added as plain text in the <body>
section without being wrapped in <script></script>
tags:
This is why the script appears as a text line at the top of your site.
Our devs have temporarily added the script to your site using an extension, and the widget loaded properly. Could you please wrap your script in <script></script>
tags and try again?
Let me know how it goes
@Rena Hi! Thanks for getting back to me. I wanted to show you what is going on.
URL of the page in question -https://www.wichana.org/how-you-can-help/engage-in-social-media
- Please see screenshot where the code was placed in the “head” not the “body”.
- Please see screenshot taken RIGHT NOW 11-19-24 at 10:25am EST where the widget is still not showing
- Please see screenshot of the code I placed in the backend - it is the EXACT code you instructed me to put in according the very last “code” thread.
@Holley_Jacobs, Thanks for the clarifications and screenshots!
Could you please keep the code in the Head section but wrap it in <script></script>
tags? So, you’ll have the following code in Head:
<script>
window.onload = () => {
let placeElement = document.querySelector('[data-mesh-id="comp-m3hjuav1inlineContent-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-a1779e06-6859-48b5-85a9-e3264a703ca3');
setTimeout(() => {
placeElement.appendChild(scriptElement);
placeElement.appendChild(widgetElement);
}, 3000);
};
</script>
Once you do it, please publish changes, test your widget and let me know how it works