CodeCanyon Popup Maker - WordPress Plugin

Guide to Setting Up and Using CodeCanyon Popup Maker on a WordPress Site

In this guide, CodeCanyon Popup Maker is treated as a WordPress popup solution based on the verified Elfsight Popup product. In the source materials, it is described as a widget for promotional popups, signup forms, notifications, coupons, videos, feedback, and visitor retention scenarios. In practice, what matters is not just placing the widget on a page, but understanding where the popup should appear, which trigger to use, how to avoid annoying visitors, how to test whether it fires correctly, and what to do if it does not appear at all.

Below, you will find the full working flow: site preparation, WordPress installation, layout setup, triggers, frequency, display pages, devices, forms, and integrations. There is also a hands-on example of a promotional popup with an email signup and coupon, because that kind of use case makes all the key decisions easier to see: content, timing, result validation, and troubleshooting.

The product has one important characteristic: part of the logic is controlled not only in WordPress, but also in the Elfsight editor. That means setup should be treated as a chain: "widget in the dashboard -> code or block on the site -> display rules -> browser testing." If you miss even one link in that chain, the popup may be created correctly but still fail to appear on the page where you need it.

What the Plugin Solves and When a Popup Actually Makes Sense

A popup plugin should not exist just to cover the entire screen within the first few seconds of a visit. A good popup shows a short, relevant message at the moment when the visitor is actually ready to respond to it. That might be a product discount, a useful newsletter signup, an event notice, a contact form, a video presentation, a coupon, a cart reminder, or a subtle banner with important news.

Verified Elfsight Popup materials highlight several groups of use cases: promotions and special offers, signup forms, exit recovery, announcements, feedback collection, welcome popups, videos, and rich media inside the popup. On a WordPress site, that covers marketing, support, content-driven projects, and online stores, but it does not replace common sense. If the popup appears for every visitor on every page, it quickly turns into noise.

The main value of CodeCanyon Popup Maker shows up in three situations. First, when you need to launch a campaign quickly without building a custom modal from scratch. Second, when you need a set of display conditions: page, device, trigger, frequency, and schedule. Third, when the popup collects form data and that data needs to reach email, CSV, Google Sheets, Mailchimp, Zapier, Make.com, or a webhook workflow.

At the same time, a popup should not replace proper navigation, an order form, or a full information page. If the message matters on its own, it is better to create a regular page section first and use the popup as an additional entry point. For example, you can show a discount in a popup, but the terms of the offer should still be available on a normal page so the user can return to them later.

Typical Tasks Where the Product Works Best

• Newsletter signup. The popup appears after the user scrolls through an article or spends some time on the page, offers a clear benefit, and sends the submission to email or a marketing service.
• Coupon or promo offer. The popup appears on category, product, or cart pages, but does not interfere with checkout and does not repeat too often.
• Event notification. The popup announces a webinar, product launch, maintenance window, or important update, while being limited by schedule and target pages.
• Contact form. The widget collects questions, feedback, or inquiries after the visitor has spent some time on the page, not immediately after the first click.
• Video or demo. The popup makes it possible to show a short video without sending the visitor to a separate page, as long as the video supports the page goal.

Who CodeCanyon Popup Maker Is a Good Fit For and When Another Approach May Be Better

This product is a strong fit for site owners, editors, marketers, and small teams that need to launch campaigns quickly without building everything from scratch. If you already have a WordPress site, access to page editing, and a clear campaign goal, setup mostly comes down to creating the widget, embedding the code or block, and testing the display rules.

It is especially useful for sites where popup campaigns change more often than the site design itself: seasonal promotions, signup forms, local announcements, temporary promo blocks, lead magnets, surveys, and consultation forms. In that case, it makes more sense to keep popup logic inside the widget editor instead of asking a developer to modify the theme every time.

That said, there are cases where this plugin may not be the best option. If a project needs fully server-side data control, a strict internal approval workflow, custom WordPress database tables, complex CRM logic, or complete independence from an external service, it is worth looking at WordPress-native solutions. If the site runs under a very strict Content Security Policy, check in advance whether Elfsight domains and CDN scripts are allowed. If the site is on WordPress.com with a limited plan, JavaScript code may display as text instead of running.

For WooCommerce stores, it is especially important to evaluate the user experience. A coupon popup can help, but it can also distract someone during checkout. On cart and checkout pages, be especially careful: do not cover form fields, do not trigger the popup too early, do not force users to hunt for the close button, and do not show the same offer after every page refresh.

A Quick Decision Map Before Installation

Before you embed the widget, answer four questions. What is the one action you want the visitor to take? On which page does that action make sense? At what moment will the popup feel helpful rather than annoying? How will you know the setup actually worked? If you do not have specific answers yet, it is better to finish the offer and the scenario first, and only then open the editor.

Practical rule: one popup should solve one task. Do not combine a signup, discount, video, survey, and catalog link inside the same popup. The more actions you put into one window, the harder it becomes to validate the result and find the source of errors.

What to Check Before Installing It on WordPress

Preparation is not just a formality. Most popup problems are not caused by the popup text itself, but by the embed location, WordPress limitations, cache, security policy, conflicts with blockers, incorrect display rules, or overly aggressive JavaScript optimization. Before installation, it is worth running through a quick technical checklist.

Access and WordPress Site Type

If the site runs on self-hosted WordPress, it is usually enough to have permission to edit pages, blocks, widgets, the theme template, or the code insertion area. If it is WordPress.com, check the plan and whether JavaScript embedding is allowed. Elfsight's official instructions specifically note that scripts are not supported on some WordPress.com plans, and the code may be shown as plain text. That is not a popup bug, but a platform limitation.

With a classic theme, installation options are usually broader: you can insert the code on a specific page using a Custom HTML block, add it to a widget area, or place it before the closing page tag through the theme editor. With a block theme, it is often easier to start with a specific page and then decide whether you need a global embed.

Cache, Optimization, and Security

If the site uses a caching plugin, CSS/JavaScript minification, script combining, deferred loading of external files, or strict security headers, it is best to configure the popup in test mode first. Start by embedding the widget on a non-critical page and make sure it appears. Then enable optimizations one by one. That sequence is faster than trying to figure out why the popup is missing on a live page with a dozen active rules.

For sites with a Content Security Policy, check ahead of time whether *.elfsight.com and *.elfsightcdn.com are allowed sources. Elfsight's official troubleshooting materials explicitly list CSP as one reason the widget may fail to load. If you do not manage the server headers yourself, it is better to ask a developer or hosting administrator to handle that check.

Legal and UX Constraints

If the popup collects an email address, phone number, name, or any other contact details, prepare clear consent text, a privacy policy link, and a plan for handling submissions. Do not promise anything in the popup that is not backed up on the page itself. If you offer a discount, the user should understand the terms. If the popup appears on mobile, make sure it does not cover the main content so heavily that the page becomes difficult to use.

Installation: Where to Place the Code and How to Run the First Check

In Elfsight, the installation flow revolves around the ready-made installation code: you create the popup in the editor, copy the code, and paste it into WordPress. For a specific page, the official workflow is straightforward: open the page in the admin panel, add a Custom HTML block, paste the code, save the changes, and then check the live page. With Elementor, you need the HTML element rather than the similarly named Custom HTML, because Elfsight documentation notes that using the wrong element can prevent the widget from displaying correctly.

If the popup should work across all pages, the options depend on the theme and page builder. In a classic theme, you can add the code before the closing page tag, through a widget area, or with a suitable code insertion tool. For WPBakery, the documentation shows a separate path using Raw HTML for a specific page and Custom JS for a global installation. In a normal end-user workflow, it is safer to start with a single page, because that makes testing easier and avoids affecting the entire site.

Step-by-Step Installation on a Single Page

1. Create or open the popup in the Elfsight editor and make sure it is published within the widget editor itself.
2. Copy the installation code from the product interface.
3. In WordPress, open Pages and select the page where you want to test the popup.
4. Add a Custom HTML block in a convenient place on the page. For a popup, the position of the block usually does not determine where the window appears visually, but it helps you control where the code lives.
5. Paste the code and save the page using Update or Publish.
6. Open the page in a private browser window so you can test behavior without old cookies or the admin session affecting the result.

At that point, do not rush to add the code to the site template. First, make sure the popup appears for the selected trigger, does not cover critical elements, and closes properly. If it does not appear, check not only WordPress, but also the widget settings themselves: display pages, devices, schedule, frequency, and triggers.

When to Place It Globally

A global embed makes sense for floating popup scenarios that should be available across many pages: exit discounts, a general event banner, a welcome popup, or a signup form after article reading. But even with a global embed, it is better to restrict the display rules inside the editor. For example, a campaign for blog readers should not appear on the payment page, and a signup popup should not interfere with a contact page that already has its own form.

If you use a global embed, test at least four pages after publishing: the homepage, a typical article, a product or service page, and a form page. Open them on desktop and mobile, then repeat the check in a private window. That helps you see not only whether the popup appears, but also how often it repeats.

Configuring Popup Content, Layout, and Visual Behavior

The content inside a popup should be shorter and more specific than a normal page section. Elfsight's official descriptions mention different popup types: notifications, exit intent, video, message, newsletter, discount, email, forms, and welcome popups. That does not mean you should enable everything at once. Start with the goal, then choose the structure.

For a discount, a headline, a short condition, and a coupon or button are usually enough. For a signup, use a headline, an email field, one benefit, and a privacy link. For a video, add a short explanation, the embedded video, and a close button. For an announcement, use text, the event date in the regular page content, and a clear next step. The smaller the popup, the more important precise wording becomes.

Layouts: Modal Window, Side Panel, Pane, and Banner

Elfsight describes five layout options, including a centered modal, side-in variations, and a pane. A modal works well for a strong offer because it focuses attention. A side layout or panel is better for softer notifications, because the user can keep reading. For important news, a top or bottom bar can make sense, but it should be tested alongside any sticky header and cookie banner.

The layout choice should depend on the cost of interruption. If the user is reading an article, a side panel is gentler. If they are about to leave the site, exit intent may be more noticeable. If they are already submitting an inquiry, an extra popup can do more harm than good. So the exact same message may need different layouts on different parts of the site.

Design Without Overload

The editor lets you change the background, image, overlay, width, popup shape, colors, element placement, and close button. Start with a small set of essentials: a high-contrast button, readable text, enough spacing, a clearly visible close button, and a width that does not break the mobile screen. Add video, background images, and gradients only if they strengthen the message.

On mobile devices, check the height of the popup. If users have to scroll inside the popup itself, many of them will just close it. If the form contains several fields, keep only the necessary ones. For a signup, email is usually enough. For feedback, you can add name and message, but phone number, website, job title, and extra questions are usually better left for a full form on a separate page.

A Small CSS Tweak for a Page with Its Own Trigger

Sometimes the popup opens when the user clicks a button you added to WordPress content. In that case, the safest customization applies not to the Elfsight code itself, but to the trigger button on the page. You can style it in the theme, child theme, or through a reliable CSS plugin. The selector should apply only to your button so you do not accidentally change the entire site.

.promo-popup-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 6px;
  background: #1f6feb;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.promo-popup-trigger:hover,
.promo-popup-trigger:focus {
  background: #174ea6;
  color: #ffffff;
}

After adding the CSS, make sure the button is keyboard accessible, the text does not collapse on a mobile screen, and the element actually has the id you plan to reference in the On Click setting. Rolling it back is simple: remove this CSS and let the button return to the theme's default styles.

Triggers: How to Choose the Right Moment Instead of Just Turning the Popup On

A trigger is the event that opens the popup. Elfsight documentation lists six main options: On Page Load, Time on Page, On Scroll, On Scroll to Element, On Click, and On Exit Intent. What matters is not the number of triggers, but whether the timing fits the situation. If the user sees the popup before understanding the page, conversion can drop even if the design looks polished.

Page Load and Time Delay

On Page Load opens the popup after the page loads. This can work for a critical announcement, but for marketing purposes it is often too abrupt. If you do use page load, keep the popup small, use a reasonable frequency, and make sure it does not appear on one page after another.

Time on Page is gentler: the popup appears after a set delay. Use it when the visitor needs time to read the hero section, understand the context, and only then receive an offer. For a blog, knowledge base, or landing page, this is often a more appropriate choice than an instant popup.

Scroll Depth and Specific Element

On Scroll fires after the visitor scrolls through a specified percentage of the page. It works well for articles, reviews, and long landing pages where user interest can be inferred from reading depth. If someone has already scrolled through half the content, a subscription offer or helpful checklist feels more logical than it would at the top of the page.

On Scroll to Element fires when the user reaches a specific element. In WordPress, that is useful when the popup is tied to a particular page block: for example, after a pricing section, a benefits section, a Buy Now button, or an FAQ section. Elfsight documentation shows this setup using the unique element ID entered into the HTML Element ID field. If the element does not already have an ID, you can add one in the WordPress block or page builder settings, but do not rely on a random auto-generated ID that may change after editing.

Clicking an Element

On Click works well when the popup is a continuation of a deliberate user action. For example, a button labeled "Get Coupon" opens a form, a "Watch Video" link opens a video, and an "Ask a Question" card opens a short inquiry form. In this mode, it is especially important that the element has a stable id and that the popup itself is installed on the same page. If the widget code is missing from the page, the click will not open anything.

When multiple triggers are enabled, Elfsight applies whichever condition is met first. That is convenient for experimentation, but it can make testing harder. During setup, enable one main trigger, test it thoroughly, and only add additional ones if you have a clear reason to do so.

Exit Intent and Mobile Limitations

On Exit Intent is based on cursor behavior: the popup appears when the user moves the mouse toward closing the tab. Elfsight documentation explicitly states that this mode does not work on mobile devices because there is no mouse cursor. So for mobile, you need a different scenario: a time delay, scroll trigger, or click. Do not treat the absence of exit intent on a phone as a bug.

Frequency, Display Pages, and Devices: Protection Against Popup Fatigue

Even a well-designed popup becomes irritating if it appears too often. Elfsight includes a separate Frequency setting with options such as Show every time, Show every time, until I close it, Show once, Show every day, and Show every week. These modes should be chosen based on how intrusive the popup feels and how long the campaign is supposed to run.

How to Choose the Right Frequency

On a private test page, showing it every time can be useful because you need to validate the result quickly. On a live site, that is almost always too aggressive. For a signup or promo coupon, Show once or a daily or weekly display is usually more appropriate. For an important technical announcement, showing it more often may make sense, but once the visitor closes it, it should not immediately return with every refresh.

If you are unsure, start with the gentler frequency. Then look at actual behavior: how many people close the popup, how many submit the form, whether there are complaints, and whether key actions on the page drop. Without analytics, it is hard to fine-tune frequency precisely, but obvious overload is usually noticeable even through manual testing.

Included and Excluded Pages

Elfsight documentation lets you choose specific pages, exclude certain URLs, and use a * wildcard pattern for groups of pages. This is especially important in WordPress, where one global code embed can technically exist across the entire site. Display rules should determine where the popup is actually active.

For example, a blog popup can appear on URLs that begin with the blog path, while excluding contact pages, cart, checkout, account pages, and utility pages. For a campaign targeting a single landing page, it is better to choose Specific Pages and enter only that address. If you need to exclude the homepage, use the exclusion mode instead of trying to work around it by removing code from the template.

Devices and Audiences

Elfsight's official materials note that you can control popup activity on desktop, mobile phones, and tablets. This is not just a cosmetic option. It is part of the UX. On a small screen, a popup with multiple fields can disrupt reading, and exit intent does not work there anyway. For mobile, it is better to use shorter copy, fewer fields, and a softer trigger.

If the editor includes visitor or schedule settings, use them carefully. You might show a welcome offer to a new visitor, a reminder to a returning one, and a temporary campaign only during its active period. But the more conditions you add, the harder troubleshooting becomes. Keep track of which rules are enabled so you do not end up looking for a problem where the popup is actually behaving exactly as configured.

How to Build a Popup Campaign from Components Instead of Random Settings

One of the most common mistakes with popup builders is starting with design. The user picks a nice template, changes the button color, adds an image, enables several triggers, and only then tries to figure out why the popup is not helping. With CodeCanyon Popup Maker, it is better to do the opposite: define the campaign mechanics first, then build the content, then configure the design, and only after that turn on the display rules.

The mechanics of a popup campaign consist of five parts: attention source, offer, action, constraint, and validation. The attention source answers why the visitor sees the popup right now. The offer explains what they get. The action shows what they need to do. The constraint protects against being intrusive: pages, devices, frequency, and schedule. Validation proves that the system actually works: the popup appeared, the form was submitted, the data arrived, and the repeat display is not annoying.

If you build the campaign in that order, Elfsight settings stop feeling like a collection of tabs and start working like a clear framework. Triggers handle the attention source. Builder and the form blocks handle the offer and action. Display Settings and Frequency handle the constraint. Submissions, email notifications and integrations handle validation. This matters especially on WordPress sites, where the same code may be embedded globally, but behavior still needs to vary by page.

The "Soft Signup After Reading" Scenario

For a blog, knowledge base, or tutorial page, the popup should respect the reading context. It is usually better not to open it on page load. Use Time on Page or On Scroll so the offer appears only after some sign of interest. In the copy, do not promise "the best content" without specifics. A short, concrete line is much stronger: "Get new WordPress tutorials once a week" or "Save the pre-launch setup checklist."

In this scenario, the form should be minimal. Email, button, short consent text, and a clear success message. If you add name, phone number, city, and comment, it stops being a signup and becomes a lead form, and the trigger timing needs to be chosen more carefully. After launch, check that the popup does not appear before the user has seen the main substance of the article. If it covers the headline or the first screen, change the trigger.

The "Coupon for an Interested Visitor" Scenario

For a store or service page, a coupon works best when it is tied to an action that signals interest. That might be scrolling to the pricing section, clicking a "Learn More" button, opening a product card, or trying to leave the page on desktop. The popup itself should explain exactly what the user gets: a percentage discount, promo code, free consultation, order bonus, or access to gated content. Do not make the offer vague.

Excluded pages matter especially here. Do not show the same coupon on utility pages where the user is already completing the target action. If the popup appears on checkout and covers the payment form, it can hurt conversion. If the offer is tied to a product category, restrict the display to that category or URL group. If the offer is temporary, use scheduling, but do not forget to remove or update the text on the page itself if the terms change.

The "Notification Without a Form" Scenario

Not every popup needs to collect a lead. Sometimes the goal is simply to communicate a maintenance notice, a new section, an event, a schedule change, an important warning, or a collection launch. For a no-form notification, readability and frequency matter more than anything else. If the message is critical, it can appear on page load, but it should stay small and easy to close. If it is promotional, use a delay or scroll trigger instead.

Notifications come with a hidden risk: they age badly. In CodeCanyon Popup Maker, you need not only to create the popup, but also to set a control point for when the campaign should be turned off. If scheduling is available, use it. If scheduling is not confirmed for your version or plan, set an internal reminder. An outdated popup looks worse than no popup at all.

The "Open on Button Click" Scenario

A click-based popup works well because the user initiates the action themselves. It is the calmest option for forms, videos, offer details, and quick questions. But it requires precision: the button needs a stable ID, the widget must be installed on the page, and the correct HTML Element ID must be entered in On Click. If the button is created in a page builder, check whether the ID changes after saving or duplicating the block.

In this kind of scenario, the popup can be more detailed than an automatically triggered one because the user has already shown interest. Even so, do not turn the popup into a full page. If there is a lot of information to present, it is better to use a short form in the popup and link out to a full page for the details.

How to Validate Results After Launching the Campaign

Validating results is not just about "I can see the popup" or "I cannot see the popup." A working popup campaign should pass several levels of testing: technical display, correct timing, correct frequency, mobile appearance, form submission, data delivery, and no conflicts with the page's primary action. If you skip even one level, the campaign may look successful in the dashboard while still frustrating real users on the site.

Technical Display Check

Open the page in a normal browser window, then in a private window. Make sure the popup appears for the correct action: after a delay, after scrolling, on click, when reaching an element, or on exit attempt on desktop. If it appears only in the normal window but not in private mode, you may be seeing an old page version or the effect of an admin session. If it appears in private mode but not in the regular window, check cookies, frequency settings, and browser extensions.

Then open developer tools and make sure the Elfsight code is actually present on the page. There is no need to edit the code manually. It is enough to find a fragment related to elfsight and confirm that it is not commented out. If the code is there but the widget does not load, check the console. Content Security Policy errors, blocked external scripts, or extension conflicts will help you identify the cause faster.

Frequency and Repeat Display Check

You cannot validate frequency with a single page refresh. If Show once is selected, the popup may disappear for the current visitor after the first display. If a daily or weekly mode is selected, a repeat test in the same browser will behave differently than a test in private mode. So split the check into stages: temporarily enable frequent display on a test page, confirm the mechanics, then switch back to the real frequency and test again as a new visitor.

Do not judge frequency only through the site owner's eyes. You will see the popup more often because you are testing it over and over. A real visitor may see it once and close it. After launch, it is useful to ask another person to open the page in a clean browser and describe what happened: when the popup appeared, whether it was clear how to close it, and whether it interfered with the main task on the page.

Form and Submission Delivery Check

If the popup includes a form, send at least three test submissions: one with a normal email address, one with any extra field filled out if the form includes one, and one from a mobile device. Confirm that the email contains all the data, that mail-tags are not left empty, that the table receives a new row, and that Mailchimp or Zapier does not create duplicates when you submit again. If the integration requires a token or external account, do not place that information into visible WordPress code.

After the test, make sure the post-submit message is clear to the user. If the form simply closes with no confirmation, the user may not know whether it worked. If the message promises an email, verify that the email actually arrives. If the submission goes into a spreadsheet, add a source-page column or use an available URL tag so you can later see which page generated the contact.

Checking Impact on the Page's Primary Action

The popup should not break the user's main path. On a product page, test adding to cart. On a service page, test submitting the main form. On an article page, test reading and following internal links. On mobile, test closing the popup and continuing to scroll afterward. If the popup gets in the way, reduce its size, change the layout, disable it on mobile, or move the trigger later in the user journey.

After enabling cache and optimizations, run the checks again. Sometimes the widget works before minification but stops loading after scripts are combined or deferred. Do not conclude that "the plugin is broken" until you have tested the page both with and without optimization. If the problem appears only after optimization, ask a developer to exclude the external script or adjust the loading order.

Forms, Leads, and Integrations: How Not to Lose Leads

A popup with a form requires more attention than a simple notification. The user is entering data, which means you are responsible for receiving, storing, processing, and securing it. Elfsight Popup includes verified built-in submission handling options: CSV export, email notifications, Google Sheets, Zapier, Make.com, Mailchimp, and webhooks. That makes the product useful not only for showing a popup, but also for routing incoming leads.

The Minimum Setup for a Signup Form

For a signup form, you usually need an email field, clear consent text, a button, and a post-submit message. If you add a name field, make sure it actually serves a purpose. If the form promises a discount, verify in advance that the user understands where the coupon will appear: on screen, by email, or in the next message.

In the email notification settings, pay close attention to sender name, subject, and mail-tags. Elfsight documentation notes that the message should include mail-tags such as [form-data]; otherwise, the email may arrive empty. That is a common small mistake that makes it look as if the form is broken when the submission is actually going through.

CSV, Email, and Spreadsheets

CSV works well for manual export, but it is not ideal for real-time handling. Email is fine for a low volume of submissions, but messages can end up in spam or get buried in the inbox. Google Sheets works well for transparent tracking when submission volume is low and a team is handling the leads manually. For ongoing marketing, it is better to connect Mailchimp or another service if that fits your workflow.

Before launching the campaign, send a test submission. Check not just whether it went through, but what it contains: email, name, source page, consent, and message. If the submission should go into an external service, make sure the fields are mapped correctly and not mixed up.

Zapier, Make.com, and Webhooks

Zapier and Make.com are useful when a submission needs to trigger a follow-up workflow: create a contact, assign a task to a manager, send a notification, add a row in a CRM, or trigger an email. In Elfsight documentation for Zapier, the key steps include the connection token, selecting the New Form Submission trigger, testing the trigger, configuring the action, and publishing changes in the widget. If you forget that last step, the automation may be configured but still inactive on the live popup.

A webhook is a better fit for projects with their own processing endpoint. Use it only if you have a developer who can accept the data, verify access or signatures, log errors, and handle retries after failures. Do not send personal data to untrusted endpoint URLs, and do not place secret keys in visible page code.

Hands-On Scenario: Coupon Popup After Interest in the Page

Let us walk through a scenario that fits an online store, service catalog, or product page: the visitor explores the page, scrolls through a meaningful portion of it, and then sees a clean offer to get a coupon or bonus in exchange for an email address. This works better than an instant popup on page load because the offer appears only after a sign of interest.

Goal

The goal is to show visitors on a service or product page a popup with a short offer: get a coupon, checklist, or consultation. The popup should appear after scrolling, should not repeat on every page refresh, and should send the submission to email or a spreadsheet. As a result, the site owner gets a lead, and the user does not see the popup before they have had a chance to understand the page offer.

Preparation

• Create a separate test page or choose a page where it is safe to temporarily test the popup.
• Prepare the offer copy: one headline, one sentence, one call to action.
• Decide what happens after form submission: an on-screen message, an email, a spreadsheet entry, or an automation.
• Choose an appropriate frequency. For a real launch, it is usually better not to show the popup on every single visit.

Setup Steps

1. In the Elfsight editor, choose a popup template that matches the task: discount, email, newsletter, or form.
2. Keep only the elements you need: headline, short explanation, email field, button, and a link to terms or the privacy policy.
3. In the layout section, choose either a modal or a side layout. For a softer service-page scenario, the side layout may feel calmer; for a pre-exit coupon, the modal is often more noticeable.
4. In Settings -> Triggers, enable On Scroll or On Scroll to Element. For a regular long page, start with a scroll percentage. For a specific section, use the element ID.
5. In Settings -> Frequency, choose a mode that is not overly aggressive. For testing, you can temporarily use frequent display, but switch to a gentler mode before publishing.
6. In Display Settings -> Pages, limit the display to one page or a group of pages. Do not launch the coupon across the entire site right away.
7. Set up email notifications or a Google Sheets integration. In the test email, verify that the form data is present.
8. Publish the changes in the widget editor, then paste the installation code into WordPress using Custom HTML or the appropriate page builder element.

Result Validation

Open the page in a private window. Scroll to the chosen threshold or element. The popup should appear once, should not break scrolling, should have a clearly visible close button, and should submit the form correctly. After submission, check whether the email arrived or whether the row appeared in the spreadsheet. Then refresh the page and see how the frequency setting behaves. If the popup shows up again too quickly, go back to Frequency.

Check the mobile version separately. If the popup takes up almost the entire screen, shorten the copy, reduce the number of fields, or disable it on mobile devices. If exit intent is in use, remember that it is intended for desktop scenarios and a different trigger is needed on a smartphone.

The Detail That Most Often Breaks Testing

The user tests the popup many times in the same browser, closes it, changes the frequency, and assumes the popup has disappeared. In reality, the display logic for a unique visitor has already kicked in. For testing, use a private window, a different browser, or temporarily change the frequency only on a test page. After the test is complete, return the frequency to its normal mode.

How to Check That the Popup Does Not Hurt SEO, Performance, or Usability

A popup by itself does not automatically make a page better or worse for search. What matters is the timing, access to the main content, mobile behavior, loading speed, and whether the popup becomes intrusive. If the popup covers the main content immediately after page load on a phone, the user experience suffers. If it appears after a meaningful action and is easy to close, the risk is lower.

Performance Check

After installation, check the page both without the popup and with it, especially if the site already loads many external scripts. Do not draw conclusions from a single number. What matters is whether the main content is blocked, whether interactivity is delayed, and whether the page shifts visually. If you use optimization plugins, do not combine or defer external scripts blindly. First make sure the widget works, then enable optimizations one at a time.

Accessibility and Mobile UX Check

Open the popup with the keyboard if it is triggered by a click. Make sure focus is not lost, the close button is visible, the text is readable, and the form fields are accessible. On mobile, check whether the popup can be dismissed easily with a thumb and whether the keyboard covers the submit button. If the user has to scroll inside the popup, reduce the content or choose a different layout.

Indexing and Main Content Check

Do not place critically important text only inside the popup. If search or social traffic lands on the page looking for specific information, that information should also exist in the regular HTML page content. A popup can reinforce the action, but it should not be the only place where the user learns the offer terms, contact details, service rules, or key limitations.

Custom Considerations for WordPress Builders and Themes

WordPress sites vary widely: classic editor, block editor, Elementor, WPBakery, Divi, custom themes, caching plugins. So in practice, "paste the code" really means choosing the right embed location for that specific site stack. Elfsight product sources provide separate instructions for WordPress, Elementor, and WPBakery, while user feedback around popup plugins shows that page builders and minification are frequent causes of odd behavior.

Block Editor and Custom HTML

For a specific page, use Custom HTML. Do not paste the code into a regular text block, because it may be escaped or displayed as plain text. After saving, view the page on the live site, not just in the editor. Some widgets are not meant to render fully inside the WordPress editing interface.

Elementor

In Elementor, use the HTML element. Elfsight documentation specifically warns not to confuse it with Custom HTML. Paste the installation code into the HTML Code field, publish the page, and check the result on the live page. If the popup does not display inside the Elementor editor, that does not necessarily mean there is a problem. The real test is the public page.

WPBakery

For a WPBakery page, use Raw HTML. For global output, the documentation shows an option through Custom JS, but that method is best used only if you clearly understand where the code will be added and how it affects all pages. If you are not sure, start with a specific page instead of a global embed.

Themes, Minification, and Style Conflicts

If the theme or builder aggressively rewrites CSS and JavaScript, do not configure the popup while aggressive minification is enabled. During the design phase, temporarily disable combining and deferred loading for the affected page, configure the popup, and then gradually restore optimization. After each change, test the same set of things again: opening, closing, form behavior, mobile view, and appearance.

Common Problems and Troubleshooting

Popup troubleshooting should move from simple checks to more complex ones. Do not start by reinstalling the product. First check whether the widget is published, whether the code is present on the page, whether a trigger is enabled, whether the page matches the display rules, whether the device is allowed, and whether a browser extension is interfering.

The Popup Does Not Appear on the Page

Symptom: the popup has been created and the code has been inserted, but nothing shows up on the live page. Possible causes include the widget being hidden in the dashboard, deleted, limited by view count, missing an active trigger, excluded by page rules, not actually inserted, or removed during editing.

Check the widget in the Elfsight Dashboard: is hide mode enabled, does the widget still exist, are there any view limits? Then open the popup settings and make sure at least one trigger is enabled. After that, open the page in developer tools and search the markup for elfsight. If the code is not there, go back to the installation step. If the code is present, move on to checking the browser and CSP.

The Popup Appears on the Wrong Page

Symptom: the popup is visible on pages where it should not appear, or missing where you expect it. The cause is usually in the Pages rules: all pages are selected, the URL is wrong, an exclusion was forgotten, or the * pattern was used incorrectly.

Open Settings -> Display Settings -> Pages. For a narrow campaign, use Specific Pages. For exclusions, use Excluded Pages. If you are working with a URL group, test the pattern on a test page and avoid overly broad paths that may accidentally include the cart, account, or utility pages.

Clicking the Button Does Not Open the Popup

Symptom: the button is there, but On Click does not fire. Possible causes include the button not having a stable id, entering # along with the ID in the HTML Element ID field, the popup code being missing from the page, another trigger firing first, or the page builder changing the markup after saving.

Open the browser inspector, select the button, and find id="...". Copy only the value, without the # and without quotes. Make sure the widget is installed on that page. Temporarily disable other triggers during testing. If the builder generates unstable IDs, add your own custom ID in the button or block settings.

Exit Intent Does Not Work on a Smartphone

Symptom: on desktop, the popup appears when the user is leaving, but on mobile it does not. This is an expected limitation, not a bug. Exit intent depends on cursor movement toward closing the tab, and touch devices do not provide that signal.

For mobile visitors, configure a separate trigger: time on page, scroll percentage, click, or reaching an element. Also check that the device type is not disabled in the display settings.

The Form Submits, but the Emails Are Empty or Missing Data

Symptom: the notification arrives, but without the form fields. The email notification settings may not include the required mail-tags. Elfsight documentation provides examples such as [form-data] for submission details and [website-url] for the page address.

Open the form block, check Email Notifications, fill in the subject and message, and add the required mail-tags. Then send a new test submission. Old emails will not be retroactively fixed, so only evaluate a fresh submission.

The Browser or Security Policy Blocks the Widget

Symptom: the code exists on the page, but the popup does not load. Possible causes include an ad blocker, privacy extension, JavaScript blocker, or Content Security Policy. Elfsight's official troubleshooting recommends checking a private window, another browser, and the console for CSP errors.

Open the page in a private window with extensions disabled. If the widget appears, disable extensions one by one or add Elfsight domains to the allowlist. If the console shows a Content Security Policy error involving script-src, ask a developer to allow *.elfsight.com and *.elfsightcdn.com in the site's policy. Do not weaken CSP across the board for the sake of one widget.

FAQ for Setting Up CodeCanyon Popup Maker

Can I use one popup across the entire WordPress site?

Yes, if the code is embedded globally or the widget is available on all required pages. But the display rules should still be restricted. For campaigns related to blog content, products, or promotions, it is usually best to exclude cart, checkout, account pages, and any pages where the popup interferes with the main task.

Why is everything configured in the editor, but the popup does not appear on the site?

Check four things: whether the widget is published, whether the installation code is present on the page, whether at least one trigger is enabled, and whether the current page matches the display rules. If all of that looks correct, check the browser console, blockers, and Content Security Policy.

Which trigger is best for a newsletter signup?

For articles and tutorial pages, Time on Page, On Scroll, or On Scroll to Element are usually better choices. Instant display on page load should be used carefully. The visitor should understand the value of the page first, otherwise the signup form will feel like an obstacle.

Can I open the popup by clicking a WordPress button?

Yes, as long as the button has a stable ID and the widget has On Click enabled with that ID specified. The field should contain only the ID value itself, without extra symbols. Also make sure the popup code is present on the same page.

What should I do if the popup repeats too often?

Open Settings -> Frequency and choose a softer mode such as Show once, daily, or weekly display. For testing, you can temporarily enable frequent display, but before publishing you should always return it to a normal frequency.

Is exit intent suitable for mobile devices?

No. Elfsight documentation states that exit intent works only on desktop because it depends on cursor movement. For smartphones, use time on page, scroll, or click instead.

Should I add video to the popup?

Only if the video helps the visitor make a decision at that exact point on the page. Do not add a video just for visual effect. Check performance, mobile rendering, and the close button. For long-form content, it is often better to link to a separate page or place the embed in a regular content block.

Where is the best place to store form submissions?

For a small volume, email notifications and CSV are usually enough. For ongoing processing, Google Sheets, Mailchimp, Zapier, Make.com, or a webhook may be more practical if you already have a clear workflow. Before launch, always send a test submission and verify every field.

When CodeCanyon Popup Maker Is the Right Choice

CodeCanyon Popup Maker is worth using if you need a fast and flexible way to create popups without building them from scratch: signup forms, coupons, announcements, forms, videos, exit scenarios, scroll-based display, or click-based triggers. Its main strength is the combination of a visual editor, display rules, and integrations, but that also requires discipline: limit the pages, choose one clear trigger, set a reasonable frequency, and always test the result on the live site.

Before launching it on a production site, start with one page and validate the code, trigger, device behavior, frequency, and form submission. Then expand the campaign more broadly. If the product fits your scenario after testing, you can download CodeCanyon Popup Maker and move on to safe testing on your WordPress site.

The main selection criterion is simple: a popup should help the user take the next step, not get in the way of reading, buying, or submitting a form. When every popup is tied to a specific page, a clear moment, and a testable outcome, the tool becomes a useful part of the site instead of an irritating layer sitting on top of the content.