Installing Elfsight widget via iframe

If the only possibility to install an Elfsight widget on your website is via iframe, this article is for you 😊

It is recommended to use iframe only for static widgets, not for the floating ones. To understand the differences between them, check this article - Floating and Static widgets: Understanding the difference.

For most widgets, you can use the Share Link option to create an iframe. However, there are 6 widgets that don't have this option: Banner, Contact Form, Form Builder, Popup, Slider, and Subscription Form. If you use one of these widgets in a static layout, you can still convert its code into iframe too.

Widgets with Share Links

1

Get Share Link to your widget
Go to your Elfsight account, 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:

<iframe src='SHARE_LINK' width='100%' height='1000' frameborder='0'></iframe>

In the code above, make the following changes:

Replace SHARE_LINK with the share link of your widget
Adjust the height parameter according to your preferences

Here's an example of the final code:

<iframe src='https://442ee0d83cf24f0e8c11412acc591fc7.elf.site' width='100%' height='650' frameborder='0'></iframe>

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

Widgets without Share Links

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 unique identifier from the URL (after the last slash):

2

Create your own Share Link
Use the sample link below and replace WIDGET-ID-WITHOUT-HYPHENS with your Widget ID, without hyphens:

https://WIDGET-ID-WITHOUT-HYPHENS.elf.site

Here is an example:

https://6b71ec7fb3ad4df7b4e6291714fe957f.elf.site

This link won't display the widget when clicked directly. It will only work once embedded in your website.

3

Create an iframe
Use the following code to create your iframe code:

<iframe src='SHARE_LINK' width='100%' height='1000' frameborder='0'></iframe>

In the code above, make the following changes:

Replace SHARE_LINK with the share link you created
Adjust the height parameter according to your preferences

Here's an example of the final code:

<iframe src='https://6b71ec7fb3ad4df7b4e6291714fe957f.elf.site' width='100%' height='700' frameborder='0'></iframe>

Well done. You've successfully created the iframe code for the widget that doesn't have a Share Link!