Menu Close
    Searching for an experienced Magento 2 Development Company ?

    Pop-up Builder for Magento 2

    Introduction

    Using the Pop Up in Magento 2 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.

    This 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

    OgpV7NTCNqE

    Features – Pop Up in Magento 2

    • 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.

    Install Extension from Webkul Store

    #1 Download Module

    Firstly, you need to log in to Webkul Store, go to My Account>My Purchased Products section, verify and then download and extract the contents of this zip folder on the system.

    #2 Upload Folder

    Once the module zip is extracted, follow path src>app and then copy the app folder into the Magento 2 root directory on the server as shown below:

    Installation using Zip-Pop Up in Magento 2

    #3 Run Commands

    After uploading the module folder, you need to run the following commands in the Magento 2 root directory:

    First command –

    php bin/magento setup:upgrade

    Second Command –

    php bin/magento setup:di:compile

    Third Command –

    php bin/magento setup:static-content:deploy

    Fourth Command –

    php bin/magento indexer:reindex

    Install Extension from Magento Marketplace

    If you have purchased this extension from the Magento Marketplace then please follow the below process or visit this link.

    #1 Get Access Keys

    You need to get access keys, navigate to My Profile in Magento Marketplace, then choose Access Keys in the My Products section.

    my-profile-Pop Up in Magento 2

    Go to Magento 2 and then you need to copy both the Access Keys – Public Key and Private Key. These access keys will be needed in the next steps for authentication.

    copy-keys

    If access keys are not created earlier, click Create A New Access Key, enter any name and click OK.

    create-key-name-Pop Up in Magento 2

    #2 Update composer.json File

    To know the component name and version number, go to your Magento Marketplace account section, My Profile>My Purchases, then find this extension to view the details. Please note – Below is an example image, every extension will have its unique component name and version.

    know-component-name-version-Pop Up in Magento 2

    After that, navigate to your Magento project directory and update your composer.json file in the following format.

    composer require <component-name>:<version>

    For example, to install version 5.0.0 of this extension you need to run the following command:

    composer require webkul/PopupBuilder:5.0.0

    #3 Enter Access Keys

    Now you will need to enter the Access Keys that you obtained as explained in the first step #1 Get Access Keys. Wait for Composer to finish updating your project dependencies and make sure there aren’t any errors.

    #4 Run Command

    You need to run the following commands:

    First command

    1 php bin/magento setup:upgrade

    Second Command

    1 php bin/magento setup:di:compile

    Third Command 

    1 php bin/magento setup:static-content:deploy

    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 on the server.

    webkul-magento2-sample-product - Pop Up in Magento 2

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

    Module Translation - Pop Up in Magento 2

    Module Configuration – Pop Up in Magento 2

    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.

    Module Configuration - Pop Up in Magento 2

    Add New Popup – Information

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

    Add New button

    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.

    Choose Template

    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

    • 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.

    Specific Pages

    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.

    specific page URL

    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 Entrance

    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.

    Add New Popup – Popup Information – Layout 

    Under the Layout section, the admin can select the layout of the popup from the drop-down menu.

    layout

    The module helps the admin to choose from different types of popup. Further, we will define each popup layout and Settings of the same. 

    Newsletter Popup

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

    Newsletter Popup

    description -Pop Up in Magento 2

    Settings Newsletter Popup

    Further, enter the inputs for the below settings under the Newsletter popup.

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

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

    Subscribe button: Moreover, the admin can add a subscribe button in the Newsletter Popup as well. Here, the admin needs to enter the Subscribe title.

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

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

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

    Offer Popup/Image Popup

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

    Pop Up in Magento 2

    Settings – Offer Popup/Image Popup

    As shown in the above image the admin can select the Close Button Color.

    Yes/No Popup

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

    Yes/No Popup

    Settings - Yes/No Popup - Pop Up in Magento 2

    Settings – Yes/No Popup

    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.

    Follow us PopUp

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

    Follow us PopUp - Pop Up in Magento 2

    Settings

    Settings – Follow us PopUp

    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.

    Video Popup

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

    Video Popup

    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.

    Details Video Popup

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

    Details Video Popup

    Settings – Details Video Popup

    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.

    Cookies Popup

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

    Cookies Popup

    Cookies Popup -popup in magento 2

    Settings – Cookies Popup

    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.

    Report – Popup Information

    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.

    Edit-Popup-Magento-Admin-1

    Edit/Delete Popup

    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 select and then Edit or Delete the popup as required.

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

    Edit/Delete Popup

    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. 

    Edit Popup page

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

    success message

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

    Popup Template

    Add New Template – Pop Up in Magento 2

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

    Add New Template

    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.

    description of the template.

    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.

    Different Popup Views – Frontend

    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.

    Newsletter Pop-up Illustration

    Below is a sample of the Newsletter pop up created by the admin which includes different input fields that can be added or removed by making changes in the custom template used.

    Bags-Gear-2-Newsletter-popup - Pop Up in Magento 2

    Offer Popup/Image Popup Illustration

    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.

    Offer-image-pop-upBags-Gear - Pop Up in Magento 2

    Yes/No Pop-up Illustration

    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.

    yes_no_popup - Pop Up in Magento 2

    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.

    Follow-us-pop-up-Bags-Gear

    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.

    Bags-Gear-2-cookies-popup

    That’s all for the Magento 2 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 [email protected]

    Current Product Version - 5.0.0

    Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Table of Content

    Hide Index