Creating smart pop-ups for website

Creating smart pop-ups for website

Pop-ups are effective in bringing about a lot of conversions. They are proven to work in optimizing your online marketing potential. There are two types of smart pop-ups you can create using Zoho MarketingHub:

Signup pop-ups

Signup pop-ups are intended to convert your visitors to leads effectively. They gather information about the visitors on your webpages. They can be used for subscriptions and registrations. You can set where, when, how, and to whom they should appear in your webpages. 

Click here to know more about Signup pop-ups. 

Engagement pop-ups

Engagement pop-ups are intended to increase your visitors' engagement in your website. They can be used to promote your pages by configuring redirection URL in a CTA button. They connect instantly with your visitors prompting them to take action on your message.

Creating engagement pop-ups

  1. From the Navigation toolbar, choose Web Assistant and select Websites 
  2. Select the domain for which you want to create an engagement pop-up.
  3. Click Smart pop-ups
  4. Click  Create smart pop-up .
  5. Click  Create new in  Engagement pop-ups section.
  6. Edit the default name provide on left top corner to customize the pop-up name.

Defining engagement pop-ups

Once you've given your pop-up a name, you can proceed to define it. 

Click  Design engagement pop-up  . Creating a pop-up involves the following three steps. 

  1. Selecting a pop-up template 
  2. Customizing your pop-up 
  3. Setting up pop-up display preferences 

Selecting a pop-up template 

We have a wide range of predesigned templates from which you can choose and customize to suit your needs. Go through the Engagement pop-ups templates and choose the one you want by clicking Use template.


Customizing your pop-up 

Once you have chosen the template, you will be taken to the pop-up editor. You can customize the pop-up as per your need. You can apply different styles to every element in the pop-up.

Customize texts

Select the text you want to customize and do any of the following:

  • Background  - Apply a background color and image for the text. 
  • Border  - Change the border color, style, and size for the text. 
  • Width  - Change the width of the text. 
  • Height  - Change the height of the text. 
  • Font : Change the font of the text.
  • Text : Write your own message.


Customize button and define redirection URL

It is must to configure a redirection URL in the button. Clicking on the button will take the visitor to the configured URL. 

Click the button and do the following: 

  • Enter the redirection URL in On click redirect to field.
  • Choose whether the redirection page should open in a New tab or the Same tab.

You can customize the look of the button by doing any of the following:

  • Background  - Apply a background color and image for the button. 
  • Border  - Change the border color, style, and size for the button. 
  • Width  - Change the width of the button. 
  • Height  - Change the height of the button. 
  • Font  - Change the label font, color, style and size of the button. 
  • Text - Change the label of the button.


Customize pop-up body 

Click on the pop-up body to customize and do the following: 

  • Background  - Apply a background color and image for the body. 
  • Border  - Change the border color, style and size for the body. 
  • Width  - Change the width of the body. 
  • Height  - Change the height of the body. 
  • Background image - Change the image in the background.
  • Image opacity - Change the opacity of the background image
  • Border radius - Change the radius of the background

Customize exit option

Click on the exit option and choose from the templates of exit buttons provided there.


Customize overlay

Overlay covers the webpage forming the base for pop-up. You can customize its appearance on the screen.

  • Choose overlay option.
  • You can change the overlay's opacity and its background.

Setting up pop-up display preferences 

Once you've customized the pop-up to suit your needs, you need to choose when, where, and how your pop-up should appear on your pages. 

Click the  Setup tab from the left pane of the editor and set up the following: 

When to show 

Set up when you want your pop-up to appear on your visitors' screens. You can choose to display the pop-up on the  Entry of the visitors or at their  Exit  or when they  scroll  up to a certain percentage of the page. For the scroll option, define the percentage of content you want your visitors to view before you show them the popup.  You can also set the Time Onpage option that shows your pop-up after a set time the visitor is on page.

Where to show 

Define where on the webpage you want your pop-up to appear by choosing the  Position . You can choose between center, top-left, top-right, bottom-left, or bottom-right of the webpage. 

How to show 

Define how you want your pop-up to appear in your page. Choose from the listed animations. 

Re-appearance of pop-ups

Define the time for the pop-up to reappear when the visitor rejects the pop-up. You can also choose to continue to show the pop-up to the visitors on rejection by choosing No limit in the drop down. Even after submission you can choose to continue to show the pop-up to the visitors by checking the  show again after response  check box.


pop-up set up


Once you're done with the customization, click Save and proceed . 

Select pages 

Now you will be taken to the detail view of the pop-up. Click Select pages and fill in the following information: Under this section, select webpages where you want your pop-up to appear, 

Pages  : Choose the webpages where you want the pop-up to appear. You can select one of the following: 
    • All pages  - Show the pop-up in all the pages of the selected domain. 
    • Specific pages  - Show the pop-up only on the selected pages. Select the required pages from the dropdown menu. 
    • Pages matching a specific criteria  - Define a criteria based on the page URL. The pop-up will be shown only on the pages that match the criteria. Note: The pop-up will appear only on the pages where the Web Assistant's tracking code is embedded. 

Show to  Choose who you want to show the popup to. You can choose to show it to anonymous visitors, to your leads, or to both. Activity based criteria: You can set up certain activity based criteria and the pop-up will be shown to the visitors who satisfy the criteria.

Activity based criteria You can set up certain activity based criteria and the pop-up will be shown to the visitors who satisfy the criteria.

Click  Save  after adding the details. 

Select pages

Schedule

Here you should define the time period you want your pop-up to be active on your pages. 

Click  Schedule . You can choose to keep the pop-up active always or set a definite time period. 


Once you've completed the setup you can Activate the pop-up. 

Report

Once you've activated the pop-up you can see the pop-up report under the Reports section. 

Overall stats 

You can view the following information: 

  • Views  - Number of visitors to whom the pop-up was displayed. 
  • Bounces  - Number of visitors who closed the popup without submitting. 
  • Clicks  - Number of clicks received by the CTA button irrespective of the number of visitors.
  • Unique clicks - Number of visitors who clicked the CTA button


Time-based report 

This graph will show you the number of views, bounces, clicks, and unique clicks over time. 


Top performing countries 

Countries with the highest number of clicks will be listed in this section. 

Pages with high views

Pages where a high number of views occurred will be listed in this section.

Pages with high unique clicks 

Pages where a high number of unique clicks occurred will be listed in this section. 

Pages with high bounces 

Pages where a high number of bounces occurred will be listed in this section. 


Location-based stats 

You can view the number of views and clicks occurred from various locations on a geo-map. 




Learn how to create a signup pop-up.
    • Related Articles

    • Smart pop-ups

      Pop-ups are effective in bringing about a lot of conversions. They are proven to work in optimizing your online marketing potential. There are two types of smart pop-ups you can create using Zoho MarketingHub: Signup pop-ups Signup pop-ups are ...
    • Signup pop-ups for website

      Signup pop-ups are intended to convert your visitors to leads effectively. They gather information about the visitors on your webpages. They can be used for subscriptions and registrations. You can set where, when, how, and to whom they should appear ...
    • Creating smart pop-ups for web app

      Pop-ups are effective in bringing about a lot of conversions. They are proven to work in optimizing your online marketing potential. There are two types of smart pop-ups you can create using Zoho MarketingHub: Signup pop-ups Signup pop-ups are ...
    • Understanding Signup pop-ups

      Signup pop-ups are intended to convert your visitors to leads effectively. They gather information about the visitors on your webpages. They can be used for subscriptions and registrations. You can set where, when, how, and to whom they should appear ...
    • Signup pop-ups for webapps

      Signup pop-ups are intended to convert your visitors to leads effectively. They gather information about the visitors on your app. They can be used for subscriptions and registrations. You can set where, when, how, and to whom they should appear in ...