Pop-up Builder for Magento 2

Magento 2 Popup Builder module allows the store owner to create and send unlimited pop-up notifications for the e-commerce store. These pop-ups can be used for marketing purposes or to create awareness about new or popular products.

The admin can create templates for creating different types of pop-ups and can select a particular template as per the popup requirement.

Magento 2 Popup Builder module also enables the admin to set the start and end date of the pop-up visibility to the customers.

The admin can even select the display device, the page at which the pop-up will appear its position and a suitable entry and exit animation type for the pop-up.

Moreover, the admin can even view the pop-up reports based on customer interaction using the Pop Up in Magento 2.

Watch the Video to Checkout Pop Up in Magento 2 Module Workflow

• The admin can create multiple templates for creating the pop-ups.
• The admin can add HTML and CSS for the pop-up template.
• Simply edit and create a popup enter its heading, description and select its layout.
• The admin can set the duration by selecting the start and end date for a pop-up.
• The admin can select the popup position.
• Select the pages for which the pop-up will work and when it will appear.
• Further, the admin can enable how the pop up can be closed either by clicking outside the pop-up box or clicking the Esc button.
• The admin can set the alignment of the pop-up element.
• A report of the customer actions over pop-up with the number of clicks and views is recorded.
• The pop-up data helps the admin to know about customer inputs on a specific pop-up.
• The admin can select the pop-up animation entrance and exit.

Language Translation – Pop Up in Magento 2

If you want to translate the module language from English to German. Then, follow the following path in the unzipped Magento 2 web security folder. src/app/code/Webkul/PopupBuilder/i18n.

After that, you will receive a CSV file with the name “en_US.csv”. Now, rename that CSV on your region code and language code “de_DE.csv”. And then translate all right-side content in your language.
After editing the CSV, save it and then you need to upload it where you have installed Magento 2 (Adobe Commerce) on the server.

Consequently, the module will get translated into your desired Language.

After the successful installation of the module, the admin can navigate to go to the POPUP > Popup for the module configuration.

Here the admin can check the list of all the pre-existing added popups.

The admin can click on the Add New button to add a new popup. As a result, the below page will open up.

Popup Name: The admin can define the newly added popup with a suitable name.

Status: The admin is required to enable/disable a popup from here.

Customer Group: The admin can select the customer group for whom the popup will be visible.

Start Date: Enter the start date from when the popup will be active on the front end.

End Date: Enter the End date from when the popup will be deactivated on the front end.

Choose Template: For the popup layout, the admin can select a template design from the dropdown menu.

Pages

The admin needs to select the Pages for which the popup will be visible. Currently, the admin can choose from the below options.

• None: If selected None the popup will be visible on none of the pages of the front end.
• All pages: The admin can select All pages so that the pop-up is visible on all the pages of the front end.

• Specific Pages: The admin can also use this option to only enable the pop-up for a selective page for which the admin can enter the Specific Page URL of that page as shown in the below image.

And we can pick a specific page URL like this (we are selecting only page code from the URL) and paste it into the admin end.

The Popup Position: The admin can select the popup position from the given options Top Left, Left, Bottom Left, Top centre, centre, Bottom centre, Top right, Right and Bottom Right.

Popup Animation Entrance: The admin can also select a Popup animation entrance such as None, BounceIn, BounceInDown, BounceInLeft, BounceInRight, BounceInUp.

Popup Animation Exit: The admin can also select a Popup animation exit such as None, BounceOut, BounceOutDown, BounceOutLeft, BounceOutRight, BounceOutUp.

When Popup will appear? Moreover, the admin can also configure when the Popup will appear by selecting the following options from the drop-down: None, On Scroll X% from the top? On-Page Load, On Click Class Match and On Click Id Match. 

Close Popup when clicking outside of the box: Further, the admin can Select Yes/No to enable the pop up to be closed by clicking outside of the box.

Close Popup on Esc Button: Similarly, Select Yes/No to enable the pop up to be closed by clicking the Esc Button.

Once, the admin selects the Yes/No Popup the below options will be visible for the popup settings.

Heading: The admin can enter a Heading for the Yes/No popup.

Description: The admin can add a popup description that will be visible in the popup.

Background Image: The admin can upload an image that will be visible as the background of the respective popup.

Yes Button: Here, the admin has two fields. Firstly enter the Yes Button URL, Secondly, provide a name for the Yes Button Title.

Cancel Button: The admin can enable/disable the cancel button.

Close Label Button: The admin can enable/disable the close label button.

Element Align: Lastly, the admin can also set the alignment of the popup element.

Once, the admin selects the Follow us Popup the below options will be visible for the popup settings.

Heading: The admin can enter a Heading for the Follow us popup.

Description: The admin can add a popup description that will be visible in the popup.

Background Image: The admin can upload an image that will be visible as the background of the respective popup.

Now, in the next sections, the admin simply needs to paste the URL of the mentioned social media platforms so as the user is redirected to the same page when clicked.

The follow us popup includes these social media platforms follow button links –Facebook, Twitter, Instagram, Linked In & Youtube.

Cancel Button: The admin can enable/disable the cancel button.

Element Align: Lastly, the admin can also set the alignment of the popup element.

Once, the admin selects the Video Popup the below options will be visible for the popup settings.

Settings – Video Popup

Heading: The admin can enter a Heading for the Video popup.

Description: The admin can add a popup description that will be visible in the popup.

Video URL: The admin needs to enter the URL of the video for the video popup.

Close Button: The admin can enable/disable the close button.

Once, the admin selects the Details Video Popup the below options will be visible for the popup settings.

Heading: The admin can enter a Heading for the Details Video popup.

Description: The admin can add a popup description that will be visible in the popup.

Video URL: The admin needs to enter the URL of the video for the video popup.

Close Button: The admin can enable/disable the close button.

Close Label Button: Here, there are two inputs required in the field. Firstly enter a URL in the  Close Button URL to which the user will be redirected if clicked and the Close Button Title.

Once, the admin selects the Cookies Popup the below options will be visible for the popup settings.

Heading: The admin can enter a Heading for the Cookies popup.

Description: The admin can add a popup description that will be visible in the popup.

Background Image: The admin can upload an image that will be visible as the background of the respective popup.

Yes Button: Here, the admin has two fields. Firstly enter the Yes Button URL, Secondly, provide a name for the Yes Button Title.

Close Label Button: Here, there are two inputs required in the field. Firstly enter a URL in the  Close Button URL to which the user will be redirected if clicked and the Close Button Title.

Close Button: The admin can enable/disable the close button.

Element Align: Lastly, the admin can also set the alignment of the popup element.

The admin can go to the Popup Information > Report while editing or adding a new popup and can check the Report of the popup.

The Report will help you analyze how effective your popups are whats is the rate of user interaction that fetches. As a result, helping in the conversion of more customers.

Moreover, the admin can check the Views, Clicks, and Average Popup View Duration in seconds.

The admin has the option to edit or delete an existing pop-up as well. For this go to the POPUP > Popup under the actions tab click to select and then Edit or Delete the popup as required.

If the admin selects to edit a popup as shown below.

Further, on the Edit Popup page go to the Layout section under Popup information. after which, the admin can make the required changes and click Save. 

As a result, the below success message will be displayed to the admin.

The admin can go to the POPUP > Popup Template to visit the list of all the added templates.

The admin can simply click on the Add New button and give input for the below fields.

Name: The admin can give a suitable name to the template design.

Enabled: From here the admin can enable/disable the template.

Description: Here, the admin can add the description of the template.

HTML: The admin is required to enter the HTML content for the layout of the template.

CSS: The admin is to required to enter the CSS content for the layout of the template.

As a result, when the admin saves the template below success message will be visible.

Note: The admin can even Edit/Delete a Popup by selecting the Edit/Delete button after clicking on the select button under the Action tab.

As soon as the user opens the frontend page based on the configurations done by the admin the popup will be visible to the customers as shown in the below pop-ups.

The store admin can also add the offer/image pop-ups that can be added with an image added with the help of the template. These can be mostly used to promote or display ongoing offers using the pop-up.

Now, easily get customer input using the Yes/No pop-up. Moreover, the store admin can add images in the pop-up background using this pop-up.

Follow Us Pop-up Illustration

The follow us pop-up can be simply used by the store admin to promote the social media handles of their respective store.

The below is a sample of the Video pop-up. It informs the customers that the store uses videos for displaying offers.

The admin can add a button for the video details and user can check that and play it in another tab. 

Cookies Pop-up Illustration

The below is a sample of the cookie pop-up. It informs the customers that the store uses cookies and asks for cookie consent.

That’s all for the Magento 2 (Adobe Commerce) pop-up builder. If you still have any questions regarding the module please create a support ticket by clicking here or send an email to support@webkul.com

Explore the Adobe Commerce Cloud development services by Webkul. You may also browse our quality Magento 2 extensions.