How to embed popup on any website

Get a Popup for your website

You can also add a popup to your website with the help of a widget or a plugin, for example, Popup by Elfsight. It doesn’t matter what platform you use – WordPress, Shopify, Magento, Woocommerce or Joomla – there is a popup for any of those. 

Choosing a Popup widget for your website, you’ll get the following benefits:

• Announcing sales, special offers, collecting feedback, subscribers.
• Choose on what pages of your website the popup will appear
• Select on which devices the popup will be active for your users.
• Create an appealing visual design that will blend with your website.

Choose the best template and create your Popup right now!

Popup widget works with all the platforms that allow embedding HTML elements to the code, including Joomla, GoDaddy, Drupal, OpenCart, Wix, PrestaShop, Jimdo and Blogger. Now that you know what popup is and what benefits it can bring to your website, let’s move to finding out how you can create and add it there.

Why Popup is important

For a long time, pop-ups have been used too aggressively by marketers. For example, windows opened automatically after closing, and they could not be removed until the target action was performed. In the past, scammers used pop-ups to inject malware.

Fortunately, the negativity around popups is gradually subsiding. When used correctly, popups are a valuable marketing tool. For instance, SUMO analyzed 2 billion popups and found out that their conversion can reach 40% and more. The main thing here is to use this tool properly.

BlogMarketingAcademy states that popups on the website showed the best click-through rate compared to other types of advertising, around 2%. And BitNinja saw a 114% increase in conversions after implementing pop-ups on their website.

How to add Popup in HTML code

HTML helps users create web pages and websites for any goal. The creation of a website may seem and be quite simple, but adding some extra elements like popup to the HTML code of the website may turn out to be not so easy to perform. That’s where some third-party solutions like Elfsight popup may come in handy. Let’s see how you can add a Popup window to your HTML website code.

Below are the steps you need to follow in order to see Popup working on your HTML site:

1. Build and configure your unique Popup widget using the configurator. You are free to add any content to the Popup, including other HTML elements.
2. After you’ve created your Popup for your HTML site, save the results.
3. Copy the code of the widget from the appeared box.
4. Integrate the code of the popup you’ve copied into the HTML field of your website.

That’s it, your popup is ready and all that is left for you to do is to check if it works correctly on your HTML site. But in case you need to add some other HTML element into your Popup widget, see this guide:

1. Open the widget Configurator, and go to the HTML section.
2. Select the HTML block to add to the Popup.
3. Add the HTML code of the element you want to be displayed in your widget to the HTML code section.

See more details on adding Popup to your HTML website and how you can work with it →

Keep in mind that some CMS do not allow you to add an HTML code to install Elfsight widget. Here you may need to convert the installation code. Let’s see how you can do that using iFrame.

40+ awesome Popup templates for your website

And now let’s look at some interesting template examples of the Popup widget for your website. This might be especially useful for those users who don’t know where to start and look for some inspiration.

Exit Intent Popup widget

Exit intent popup appears on the site at the moment when the user is about to click the exit button.

Notification Popup

A pop-up notification will be useful to you in a variety of situations – from a notification about the start of discounts to the start of a sale.

Popup form

Popup form allows you to perform a variety of tasks, such as collecting emails or feedback from your users.

Don’t forget to look at other 40+ awesome Popup widget templates. You will definitely find the one that meets your needs!

How to install Popup in iFrame

Below are the steps you need to follow in order to convert the elfsight Popup installation code  into iframe format:

1. Go to Elfsight Apps, configure your Popup widget and get its installation code. 
2. Copy the widget’s id. It can be found here:

3. Convert the code. Use the following where replace the “WIDGET_ID” with your own widget’s ID:

<iframe src='https://sandbox.elfsightcdn.com/WIDGET_ID' width='100%' height='1000' frameborder='0'></iframe>

4. Adjust the height to match the size of your widget.

That’s it! That’s all you need to do in order to convert the Popup code into iFrame format. There might also occur situations when you need to embed an iFrame block to the Popup widget. For instance, iFrame can be used for implementation of different kinds of iframe elements by URL. Let’s see in more detail how you can add Iframe block to your Popup widget:

• In the Popup configurator at Elfsight Apps, open Blocks and select iFrame.
• Set the proper settings for this block:

1. URL. Place your link that will be converted to iFrame in this field.
2. Width is here to help you adjust the width of the iFrame element in your Popup.
3. Height section allows you to change the default height of your iFrame.

In case you need to integrate iFrame to Joomla, GoDaddy, Drupal, OpenCart, Wix, PrestaShop, Jimdo and Blogger, you’ll get the links to detailed guides below. 

If you’re looking for some more info about the iFrame Popup, you can read our detailed guide. There you’ll find out how to add Popup using iFrame and will see the answers to most popular questions.

See the detailed guide on iFrame Popup and how to work with it →

How to add popup to WordPress website

WordPress is one of the most popular platforms on the web. Of course, there is a wide range of additional tools that you can install on your WordPress website. Therefore, let’s look at how you can do this using the possibilities that this platform offers. Below we will look at how you can integrate Popup into your WordPress website.

Add Popup to WordPress website through admin panel

WordPress offers its users an automatic plugin installer. Here how it works:

1. Go to the Plugins section in your WordPress admin panel and then click the Add new button.
2. In the top right corner, use the search bar in order to find and select the best Popup for your WordPress website.
3. On the search results, click a plugin’s title to get more details about it, read installation notes and other useful info.
4. Click the Install now button to integrate the plugin to your website. 
5. After the installation is complete, click the Activate button to activate your popup and get it working on your website.

If you choose to add a popup to your site through the use of the WordPress panel, you may also need to keep an eye on the version of the plugin. As developers constantly release updates for their plugins, you may need to keep them up to date on your website as well to ensure all these changes are applied on your site immediately. 

Of course, it’s not the only way of adding popup to your WordPress site. You can also do it with the help of an easy-to-use widget by Elfsight. Let’s see how you can do it.

Embed Popup to WordPress website with Elfsight plugin

If you don’t want to bother with all the documentation and features of a particular plugin you find, wanting to add a popup from the admin panel, you can check out the plugin from Elfsight.

Below are the steps you are to follow if you want to add the Popup plugin to your WordPress website:

1. Log in to your WordPress website and choose the page where you want to embed the plugin.
2. Go to the place where you want to display the plugin, and then click the Plus icon.
3. Find Code in the formating section and click it. 
4. Put your plugin’s installation code in the widow that comes up.
5. In order to save the changes, click Update.

These few simple steps are all you need to do to add Popup to your WordPress website. Keep in mind that this way of integrating Popup to your website does not require any additional actions from you in the future – you will always have the latest version of the plugin, without a need to update it manually.

Get more details on embedding and working with Popup plugin for your WordPress website →

How to add popup to Magento website

Magento is an open-source ecommerce platform, very popular among online businesses. Just like WordPress, this platform offers a wide range of modules and extensions to install and extend the functionality of your website. Let’s see how you can add a Popup to your Magento website.

Add Popup to Magento through command line

To install a popup extension to your Magento website, you have to follow these steps:

1. Get an extension at the Magento Commerce Marketplace. Make sure that repo.magento.com repository exists in your composer.json file.
2. Get the extension’s Composer name and version.
3. Update the composer.json file in your project with the name and version of the popup extension you’ve chosen.
4. Make sure that your Magento extension is installed properly.
5. Enable and configure your extension.

That’s it, your popup extension is up and running. But you should also keep in mind that you’ll have to manually upgrade your and update your extensions as well.

In case you’re looking for more ways of integrating Popup to your Magento website, you can look at Elfsight Popup. Here’s what you need to do.

Embed Popup to Magento website with Popup extension

If you feel that you can’t handle installing a popup extension on your website yourself, then you can always use our Popup from Elfsight. This will greatly simplify your task and you will be able to do it yourself without resorting to the help of a professional developer.

In order to embed the popup extension to Magento, follow these easy steps:

1. Make use of Elfsight Apps and start building your popup extension. Save all the changes.
2. Copy your individual code that will appear in the popup window.
3. Paste the code of the popup you’ve copied into the desired place on your Magento website.
4. Go to your website to see the widget in action.

That’s it! Also, you won’t need to bother about manual updates of your extension as Elfsight Popup is updated automatically. You’ll always have the latest version of the product.

Find more details about the work of Magento popup extension for your website →

How to add Popup app to Shopify

Shopify is one of the largest platforms for creating online stores. If you choose it for creating your website, you can also select among a wide range of apps for your website. Now let’s check how you can expand your Shopify website performance with a popup app.

Add popup to shopify through app store

Here are the steps you need to follow in order to add a popup to your Shopify store:

1. Log in to the Shopify App Store.
2. Choose the popup app you want to add to your Shopify store and click it.
3. Go to the app listing page and click Add app.
4. In the Shopify Admin panel, click Install App to authorize use of the app.

After you install the popup app to your Shopify website, it can be used and viewed from the Apps page in the admin panel. You can also install apps to your Shopify website with a third-party install link. But keep in mind that it only works for apps created before December 5, 2019. This article provides more details on adding popups to Shopify.

Add Popup to Shopify with the Elfsight app

If you are still having a hard time configuring your popup app for your Shopify website, then you can always enlist the help of third party developers and choose Elfsight Popup. Let’s take a look at how easy it is for you to integrate Popup into your Shopify website.

In order to see Popup on your Shopify store, follow these steps:

1. Launch a free editor at Elfsight Apps and start building your popup, customizing it to blend it with your website design. Save the results.
2. Get the unique code from the popup that appeared after you pressed save. Copy it.
3. Embed the code you’ve copied to the desired place on your website and start using the app.
4. Go to your Shopify website and see how the popup works.

That’s it! Keep in mind that you don’t need any manual updates for your app as you’ll always have the latest version of the popup. And if any difficulties occur with your Shopify Popup, you can always address the friendly support team.

Learn more about Shopify Popup by Elfsight and get more details on adding it to your website →

How to add Popup to Elementor

Elementor is a popular platform for creating and building professional WordPress websites that replaces the classic WordPress editor. Like WordPress, it allows you to add various add-ons and plugins to your sites, including popup. So let’s find out how you can embed a popup website into your Elementor website using all the features of this editor.

Add Popup to Elementor with WordPress admin panel

Here’s what you need to do in order to add Popup to your Elementor website:

1. Log in to your WordPress account.
2. Go to your website.
3. Go to the Plugins tab that is located on the left pane.
4. Select the option Add New Sub-tab.
5. To install a Popup plugin, click the Install now button and wait for the plugin to download and be installed.

This is how you can add a Popup plugin to Elementor. A few seconds after that you’ll be all set to use or configure the plugin. But what about using the Popup plugin by Elfsight? Let’s see how you can do that.

Integrate Popup to Elementor with the Elfsight plugin

Understanding the inner workings of the admin panel can be difficult or time-consuming, so sometimes it is much easier to resort to the help of some quick third-party solution. For example, you can add Elfsight’s Popup plugin to your Elementor site.

Here’s what you need to do if you want to add Popup widget by Elfsight to your Elementor website:

1. Go to Elfsight Apps and start building your custom popup widget. Save the results.
2. Copy your personal code that appears in the box.
3. Go to the place where you want to display the widget on your Elementor website and then paste the code you’ve copied before there.
4. Check the performance of the widget.

That’s it, your Elementor Popup is ready for work! And if you want to get more info on the work of the Elementor widget, you can always watch our highly informative video.

Get more details on the Elementor Popup and watch a video guide on installing it →

How to add Popup to WooCommerce

WooCommerce is a highly customizable WordPress-based ecommerce platform. It allows its users to quickly turn their website into an ecommerce platform. WooCommerce allows adding different plugins and extensions to websites in order to expand their options. WooCommerce, of course, allows you to add Popup to your site, as it is one of the most popular solutions for online stores.

Add Popup to Woocommerce through its account

To embed Popup on your WooCommerce website, you need to follow a few simple steps. Installing a popup on WooCommerce is similar to the same process for WooCommerce and WordPress. Let’s look at it in more detail:

1. Download the zip file from your WooCommerce account.
2. Go to your WordPress  admin Panel, find the Plugins section.
3. Press Add new button and upload the Popup plugin with the file.
4. Click Install now and activate the WooCommerce Popup plugin.

Now that you’ve installed the popup plugin to your WooCommerce website, you can view it in your WordPress admin panel. Now let’s learn how to add the ElfSight Popup plugin to your WooCommerce website. This method is perfect for those who do not want to spend a lot of time setting up and do not feel able to deal with the nuances of the WordPress admin panel and Elementor.

Implement Popup to WooCommerce with Elfsight widget

Choosing the right Popup for your WooCommerce website can be very tricky, especially if you’re doing it for the first time. So take a look at the Popup for the WooCommerce website from Elfsight. Below we’ll walk you through how to add it to your WooCommerce website so you can see if this simple yet premium widget is right for you and decide whether to install it on your site.

Here are the steps you need to take in order to embed WooCommerce Popup to your website:

1. Go to Elfsight Apps, create an account and start building your first plugin. Save the results.
2. Copy the code that appeared in the popup after you’ve saved your plugin.
3. Embed the code you’ve copied to the HTML code of your website and start using the Popup.

This is how easy it is to use Elfsight Popup on your WooCommerce website. And to add it to your WooCommerce site, you don’t even need to look for an experienced developer, as you can add the Popup widget to your website’s HTML code yourself.

Discover more details and informative use cases for WooCommerce Elfsight Popup →

How to embed Popup to Facebook page

To figure out how to add a Popup to your Facebook Page, you first need to understand what a custom tab is. A custom tab is an opportunity for Facebook Page owners to showcase the content they want, in addition to the standard features that the social network of your choice offers. For example, in a custom tab, you can add various widgets that help you sell your product more successfully and share information about your company with users.

Here’s what you need to do in order to create a custom Facebook tab:

1. Send a POST request to the /{page-id}/tabs edge:

curl -i -X POST "https://graph.facebook.com/{page-id}/tabs?
        custom_name=My Custom Tab&
        tab={app_id}&
        access_token={page-access-token}"

2. On success, your app will get a response:

{
  "success": true
}

3. Add an app to your Facebook page. Here’s how it can be done with JavaScript SDK:

FB.ui({
  method: 'pagetab',
  redirect_uri: '{your-callback-url}'
}, function(response){});

That’s it! In case you need to know how to customize content of the tab for your users in more detail, read Facebook guide on custom page tabs. 

And now, after you’ve created your custom Facebook page tab, it’s time to see how you can add Elfsight Popup widget to this tab. Follow these steps in order to see Popup working on your custom Facebook Page tab:

1. Log in or register to Elfsight Apps and create your unique Popup for Facebook Page.
2. Save your Popup.
3. Copy the code of the widget you see in the box that appeared after you’ve pressed save.
4. Open your custom Facebook tab and paste the code of the Popup widget to it.
5. Go to your Facebook Page to see how your Popup operates.

The process of adding a Popup to your Facebook Page may not seem as easy as it is with other platforms. However, Popup is an indispensable tool in the e-commerce business, and now many online stores open their representative offices in this social network. Some even prefer to use exclusively the marketing opportunities that Facebook provides, creating online stores based on it, so they can’t do without Popup here.

And if you need more information on how to add Popup to your Facebook page, then we have a special detailed analysis. There you will not only learn about the benefits of a pop-up for your Facebook Page, but you will also be able to see examples of its use.

See more details about Facebook Popup by Elfsight and get to know it better →

How to add Popup to Squarespace

Squarespace is a popular website builder. It offers cool styling solutions for websites and is rightfully popular among the online audience. If you have chosen Squarespace to create your website, then you can easily add various extensions and plugins to it, including Popup. Let’s find out how you can embed Popup on your Squarespace website.

Add Popup to Squarespace through admin panel

Follow these easy steps if you want to add Popup to your Squarespace website code:

1. Go to the Home menu, click Marketing and then choose Promotional Popup.
2. In the Change layout panel, select a layout you need.
3. Go to the action panel to add a newsletter sign-up or a button.
4. Apply the Content panel to add text to your Popup.
5. On the Display & timing panel set how the pop-up appears. 
6. Use the Image panel in order to add a background image to your Popup.
7. Go to the Style panel to style your popup. 

When you are ready to get your popup working on your Squarespace website, Display pop-up toggle at the top of the panel to black and click Save. Of course, this is not the only way to add a popup to your Squarespace site code. You can also do this with the Elfsight Widget.

Add Popup to Squarespace with Elfsight widget

Popup from Elfsight is suitable for many platforms, including Squarespace. Its installation and configuration is quite simple and does not require you to learn how to code. All it takes is a few simple steps and a couple of minutes of your time.

See how easy it is to embed Popup on your Squarespace website:

1. Go to your Elfsight Apps account and start creating your widget. Save the results.
2. Get installation code from Elfsight Apps. Copy the code of Squarespace Pop up text box for later use.
3. Go to the page where you want to demonstrate your Squarespace Popup and embed the code of the widget there.
4. Check the performance of your widget.

This is how easy and simple you can get a cool Popup widget for your Squarespace website. And you don’t have to worry about constantly updating the widget, as you will always have the latest version of it.

Get to know the information about the widget in more detail →

How to add Popup to Webflow

Webflow is a popular website builder and hosting company. Many users choose Webflow to create their website, and accordingly, they often face the problem of finding additional tools for their website. Popup is a popular tool, as it can be used for a variety of purposes, from e-commerce businesses to simple information sites.

If you have been creating and developing websites for a long time, or are just familiar with the Webflow platform, then you will probably be interested in trying to create a Popup for your website yourself. And Webflow willingly offers such opportunities. To create a Popup on your Webflow site yourself, you will need Webflow interactions 2.0.

Webflow representatives have created a detailed and informative guide on how you can create a Popup for your Webflow site in several steps. And if you are looking for a simpler and faster solution for your Webflow site, we suggest you learn how to add a Popup to it using the Elfsight widget.

Add Popup to Webflow with Elfsight widget

So, in order to embed Popup from Elfsite on your Webflow website, you will need:

1. Create your custom plugin at Elfsight Apps and save the results.
2. Copy the personal code that will appear in the special box.
3. Embed the Popup plugin to the HTML code of your Webflow website.
4. Check the performance of your Webflow plugin on your website.

This is how easy and simple you can add a Popup website to your Webflow HTML code. At the same time, do not forget that you can easily and simply customize your Webflow widget by adding virtually any content to it – including using iFrame!

Don’t miss your chance to take a closer look at the Webflow Popup by Elfsight →

Adding Popup to other popular platforms

Our guide would be incomplete if we didn’t mention the possibilities of installing Popup on other popular platforms. Let’s learn how to implement Popup to HTML code of Joomla, GoDaddy, Drupal, OpenCart, Wix, PrestaShop, Jimdo and Blogger. 

By the way, in case you need to combine your Popup widget with some other awesome features, here’s our guide on how you can embed google business reviews on website.

Conclusion

Whatever platform you choose to create your website, be it Joomla, GoDaddy, Drupal, OpenCart, Wix, PrestaShop, Jimdo or Blogger, WordPress or another, now you can easily figure out how to add Popup to it and customize it like this to fit your business needs exactly!

Editor: Create Your Popup for Free

Interested in building your Popup quickly? Access the Popup editor and experiment with all its features on the spot.