Installing Elfsight widget in iframe

If you need to install an Elfsight widget via iframe, this guide will help. Before you start, keep in mind that iframe is best suited for static widgets, not floating ones. For more information, check our Floating and Static Widgets guide.

Also, please note that most widgets offer a Share Link for iframe installation, but six widgets — Banner, Contact Form, Form Builder, Popup, Slider, and Subscription Form — don’t. Make sure to choose the right option below based on your widget.

Creating iframe code for:

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_LINK with 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="442ee0d83cf24f0e8c11412acc591fc7.elf.site" style="border:none;width:100%;"></iframe>

That's it. You have successfully converted your installation code into iframe format!

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-HYPHENS in 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 generate 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_LINK with 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!

Did this article answer your question? Share your feedback: Thanks for sharing your feedback. It helps us grow! There was a problem submitting your feedback. Please try again later.

Still looking for assistance? Contact Us Contact Us