How to install a 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.

In this article

1. Creating a block for the widget
2. Adding a code with the widget

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 divElement = document.querySelector('#BLOCK_ID');
	if (!divElement) return;
	let script = document.createElement('script');
	let widgetBlock = document.createElement('div');
	script.setAttribute('src', 'https://apps.elfsight.com/p/platform.js');
	script.setAttribute('defer', '');
	widgetBlock.classList.add('elfsight-app-WIDGET_ID')
	setTimeout(() => {
		divElement.appendChild(script);
		divElement.appendChild(widgetBlock);
	}, 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 divElement = document.querySelector('#comp-l8lm03qx');
	if (!divElement) return;
	let script = document.createElement('script');
	let widgetBlock = document.createElement('div');
	script.setAttribute('src', 'https://apps.elfsight.com/p/platform.js');
	script.setAttribute('defer', '');
	widgetBlock.classList.add('elfsight-app-0bc2bbfe-f9ea-424e-ab9a-ed4d2fd75483')
	setTimeout(() => {
		divElement.appendChild(script);
		divElement.appendChild(widgetBlock);
	}, 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: