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
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
<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: