Installing Elfsight widget on Wix avoiding iFrame

Most likely, it won't come up as a surprise for you that Wix platform is built on iframes. In some specific cases, you might require to install Elfsight widget without using iframe block.

Creating a block for the widget

1

Go to Wix website editor
Log in to your Wix account and choose the website where you'd like to add the widget. Click Edit Site:

2

Add an empty block
Click Plus icon, go to Box section and select any Themed Box:

3

Make the block transparent
Select Change Design option and click on Customize Design button: Then select the Box type with no borders, set the opacity to 0% and Publish the changes:

4

Copy the HTML ID of the block
Go to the live page and open Developers Console on the Elements tab. You can do this by pressing Ctrl + Shift + J → Elements for Windows or Cmd + Option + C for MacOs or just right-click and choose Inspect: Click on Inspect element, hover it over the area with the block and copy the div id of the line above your block: Here's the ID we got in our example: comp-l8lm03qx

Adding a code with the widget

1

Put together a custom script for your widget
Here's a special script you'll need to add to the Custom Code section: 

<script>
window.onload = () => {
  let placeElement = document.querySelector('#BLOCK_ID');
  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-WIDGET_ID');


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

However, first, you need to customize it:

• Paste the code of the added block that we've copied in the step 4 instead of BLOCK_ID on the 3rd line.
• Then insert the ID of your widget instead of WIDGET_ID on the 9th line. Your widget ID is the following part of the installation code: Here you can find more detailed info about widget ID -Where to get your widget ID.

And here's what we got in our example:

<script>
window.onload = () => {
  let placeElement = document.querySelector('#comp-l8lm03qx');
  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-0bc2bbfe-f9ea-424e-ab9a-ed4d2fd75483');


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

2

Add Custom Code
Go back to your website's admin panel. Click on Settings section in your Dashboard menu, find the Advanced section and choose Custom Code:
Click on the Add Custom Code button in the right upper corner: Paste the code that we got in the previous step and click Apply:

Done! The widget is successfully added to your Wix website:

Didn't find the answer you were looking for? If so, please contact our Support Team. We will be delighted to help you!