Installing Elfsight widget on Wix avoiding iFrame via Custom Element
When adding third-party elements like widgets, Wix usually wraps them in iframes. This may lead to issues like unwanted scrollbars, limited responsiveness, or SEO limitations. To get around this, you can use a Custom Element to install your Elfsight widgets without an iframe.
The interface may vary depending on whether you're using Wix Editor or Wix Studio. Below, you'll find instructions for both editors.
Installation steps
1. Create a Custom Element
Let’s start by opening your website editor. Log in to your Wix account, locate your website, click the three-dot menu, and select Edit Site:
Next, you'll need to add a Custom Element and create a JS file. Follow the steps below based on your Wix version:
WIX EDITOR
- 1
-
Click the Plus icon, go to the Embed Code section, and select Custom Element:
- 2
-
Enable Dev Mode
In Wix Editor, click Dev Mode → Turn on Dev Mode at the top:
- 3
-
Add a new JS file
In the left sidebar, go to Backend & Public → Public → Custom Elements, then select Add JS File from the three-dot menu. Name the file
elfsight-widget.js:
❗Important: Make sure your elfsight-widget.jsfile is placed inside thecustom-elementsfolder.If you don't see the Custom Elements folder, create it manually. Click the Plus sign (+) next to Public and choose Add Folder. Name the folder
custom-elements:
WIX STUDIO
- 1
-
Click the Plus icon → Embed & Social → Custom Element. Then, click Custom Element:
- 2
-
Enable Dev Mode
Click the curly braces icon and select Start Coding Manually:
- 3
-
Add a new JS file
In the left sidebar, click the curly braces icon and go to Backend & Public → Public → Custom Elements. Then, select Add JS File from the three-dot menu and name the file
elfsight-widget.js:
❗Important: Make sure your elfsight-widget.jsfile is placed inside thecustom-elementsfolder.If you don't see the Custom Elements folder, create it manually. Click the Plus sign (+) next to Public and choose Add Folder. Name the folder
custom-elements:
2. Add Widget Loader Code
Next, you'll need to add code that will load your widget. Here's what it looks like:
class ElfsightWidget extends HTMLElement {
connectedCallback() {
const platform = document.createElement('script');
platform.src = 'https://elfsightcdn.com/platform.js';
platform.setAttribute('async', true);
this.append(platform);
this.insertAdjacentHTML('beforeend', `<div class="elfsight-app-${this.getAttribute('id')}" data-elfsight-app-lazy></div>`);
}
}
customElements.define('elfsight-widget', ElfsightWidget);
Copy this script and proceed with installation:
WIX EDITOR
- 1
-
Paste the code
Open the
elfsight-widget.jsfile, delete all existing code, and paste the code above:
- 2
-
Link the file to the Custom Element
Click the Custom Element you added earlier → Choose Source → Velo file → select
elfsight-widget.jsfrom the dropdown. Under Tag Name, enterelfsight-widget:
- 3
-
Disable Dev Mode
Click Dev Mode → Turn off Dev Mode:
WIX STUDIO
- 1
-
Paste the widget code
Open the
elfsight-widget.jsfile, delete all existing code, and paste the code above:
- 2
-
Link the file to the Custom Element
Click the Custom Element you added earlier → Choose Source → Velo file → select
elfsight-widget.jsfrom the dropdown. Under Tag Name, enterelfsight-widget:
- 3
-
Disable Dev Mode
Click the curly braces icon → Turn Off Coding:
3. Connect the Custom Element to Your Widget
You’re almost there! For the last step, you will need your Elfsight widget ID (the numeric part of the widget's installation code):
Now, in your Wix panel, click the Custom Element again → Set Attributes → Set Attributes. In the popup, enter:
- Attribute name:
id - Value: your widget ID
Then, click Set. Here's what it looks like in WIX EDITOR:
Here's the same process for WIX STUDIO: 
That's it! Don't forget to adjust the Custom Element container size for both desktop and mobile, and publish the changes.
Still having trouble after following these steps? Just contact our Support Team for help. We will be delighted to assist! 🙌