Installing Elfsight Widget in IFrame
Need to install an Elfsight widget via iframe? This guide will help! Before you start, keep in mind that iframes are best for static widgets, not floating ones. Check out our Floating and Static Widgets guide for more details.
Most widgets provide a Share Link for iframe installation, but a few—Banner, Contact Form, Form Builder, Popup, Slider, and Subscription Form—don’t. Make sure to select the correct option based on your widget.
For a quick setup, watch our video tutorial or follow the simple instructions below!
Creating iframe code for:
Widgets with Share Link
- 1
- Get Share Link to your widget
Go to your Elfsight dashboard, find the widget you want to install, and click Install:
Switch the tab to Share Link → click Copy Link:
- 2
- Create an iframe
Use the following code to get your iframe code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.10/iframeResizer.min.js"></script> <iframe onload="iFrameResize(this)" src="SHARE_LINK" style="border:none;width:100%;"></iframe>
In the code above, replace
SHARE_LINKwith the Share Link of your widget. Here's an example of the final code:<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.10/iframeResizer.min.js"></script> <iframe onload="iFrameResize(this)" src="https://442ee0d83cf24f0e8c11412acc591fc7.elf.site" style="border:none;width:100%;"></iframe>
That's it. You have successfully converted your installation code into iframe format!
Widgets without Share Link
To create an iframe code for the widget that doesn't have a Share Link, follow the easy steps below.
- 1
- Get your Widget ID
Open the widget in your dashboard and copy its ID from the URL (after the last slash):
- 2
-
Create your own Share Link
Remove the hyphens from the Widget ID you've just copied and replace
WIDGET-ID-WITHOUT-HYPHENSin the link below with your updated Widget ID:https://WIDGET-ID-WITHOUT-HYPHENS.elf.site
Here is an example:
https://6b71ec7fb3ad4df7b4e6291714fe957f.elf.site
You won't see the widget through this link — that's normal. The widget will appear on your website once you've generated the iframe code and embedded it in the next step. - 3
- Create an iframe
Use the following code to create your iframe code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.10/iframeResizer.min.js"></script> <iframe onload="iFrameResize(this)" src="SHARE_LINK" style="border:none;width:100%;"></iframe>
In the code above, replace
SHARE_LINKwith the share link you've created. Here's an example of the final code:<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.10/iframeResizer.min.js"></script> <iframe onload="iFrameResize(this)" src="https://6b71ec7fb3ad4df7b4e6291714fe957f.elf.site" style="border:none;width:100%;"></iframe>
Well done. You've successfully created the iframe code for the widget that doesn't have a Share Link!