Why my widget doesn't display on my site until page refresh
Sometimes you may notice that your Elfsight widget does not appear on the page immediately. Instead, it starts showing up only after the page is reloaded. This article explains two reasons behind this behavior.
In this article
AJAX technique
The most common reason for this is Ajax (short for Asynchronous JavaScript and XML). Ajax loads specific web page elements faster by getting data dynamically in the background. This means your website only loads the visible part first, and more content appears as you scroll down.
Our widgets are programmed to load after the rest of the page content has loaded to avoid any potential slowdowns. Due to this peculiarity, Ajax prevents the platform from initializing.
To ensure the widget loads immediately, you need to add the first line of the installation code (the widget's platform) into your website's <head>:
<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
The second line of your widget installation code should remain in its original position.
Once you've done that with your website, the widget should appear on the page upon the first load.
For example, the bellow screenshot illustrates how to fix this issue on a Squarespace website: you need to insert the first line of your widget installation code into the Code Injection → Header:
SPA (single-page application) website peculiarity
This behavior can also happen if your website is a Single Page Application (SPA). A single page application is a website or web application that dynamically rewrites a current web page with new data from the web server, instead of the default method of a web browser loading entire new pages.
In such cases, the solution above won't work because the widget needs a different installation method. To resolve the issue, please contact our Support Team. Our developers will gladly assist you in reinstalling the widget.