From visitors’ email addresses to their website addresses, you will be able to collect all the information that you need to reach out to your customers and boost conversions in your business using the PageSense' pop-up template editor. The easy-to-use drag-and- drop editor, lets you to insert custom elements such as text, images, video, input box, social media, radio button, and more, into your pop-up box without any HTML or CSS knowledge. Further, you can also style and format the appearance of each element such as background color, shadow effect, or border style, using versatile settings available on the left pane.  

In this article, you will learn how to add and customize different types of elements in your pop-up using the PageSense' template editor.

To insert new elements to your pop-up: 

Insert a grid

A grid consists of a set of row and column containers used to create an initial structure for your pop-up, then further add the required content elements that you want. It allows you to organize and place your content in a location that best fits your concept. Every time you choose a grid structure, the template editor will automatically place one or more empty columns and rows to your pop-up spots.

To insert a grid:
1. From the left pane, drag and drop the GRID element, then hover over the pop-up to view the containers you want to insert objects in. 

2. Choose the grid style that fits your requirements, then enter the number of rows and columns you want to add in your pop-up. 

3. Insert the content element (like text, images, video etc) you want within the respective container, then customize the appearance of the elements using various formatting options available on the left pane.

Insert a text

Try to keep the text in your pop-up as short as possible. Too much text might make it difficult to navigate on a mobile device, and it may also drive your customers away from reading your message. Limit the headline to one sentence, and the body text to two or three sentences, for a bigger impact.  

1. Drag and drop the TEXT element from the left pane into the pop-up location where you want to add your text.

2. Type the required text within the text box on your pop-up.

3. You can use various text formatting options that appear in the editor window to make the required changes to the text's font style, font size, font face (bold, italic, underline), text alignment (left, right, center), letter spacing, and more. You can also add a link to the text by clicking the link icon.

Furthermore, you can customize the appearance of textbox (from the left pane) as follows:

• In the BACKGROUND section (on the left pane), choose your preferred background color or image you want to fill within the textbox.
  Note: Choose Transparent if you want to remove the background color or image from the pop-up.

• In the TEXT SHADOW section (on the left pane), choose your desired shadow color for the text from the color picker, and customize its properties such as its vertical and horizontal position and blurriness using the sliders, as shown in the screenshot.
  
  
  

• In the PADDING section, use the padding sliders, including Top, Right, Bottom, and Left, to increase or decrease the space between the border of the text box and text. You can also manually type in the desired value (in pixels) and press Enter.
  
  
  

• In the MARGIN section, use the margin sliders, including Top, Right, Bottom, and Left, to adjust and add a white space margin all around or on specific sides of the textbox that best suits your pop-up design. You can also manually type in the desired value (in pixels) and press Enter.
  
  
  

• In the BORDER AND SHADOW section, click the Border Style dropdown to choose the type of border line you want to apply, such as dotted, dashed, or double.
  You can customize the border's properties using the Border Color, Border Thickness, and Border Radius options, as shown in the screenshot.
  
  
  

• Select your desired shadow color for the textbox from the color picker, then customize its properties, such as position and blurriness, from the BORDER AND SHADOW section, as shown in the screenshot.
  
  
  

Insert an input box 

Use input boxes when you want to gather input or information from your visitors. They act like an interactive field on your pop-up that lets you understand diverse needs of your customers through the custom responsss they enter. This information can later be used to fine tune your future promotions and offers on your website. Ask users questions such as their age, name, country, or area of interest.

To insert an input box:

1. Drag and drop the INPUT BOX element from the left pane to the pop-up location where you want to add your input box.

2. In the Placeholder field (on the left pane), type in the required text that you want visitors to enter in the input box.

3. You can customize the input box properties using various formatting options available on the left pane. Learn more about the different formatting options you can apply for an element in your pop-up.  

Insert a button 

Using buttons in pop-up is the best way to connect your visitors to different pages on your website, and further increase the overall engagement rate across your webpages. In PageSense, you can effortlessly add a CTA to your pop-up and further customize the way your button should behave when visitors click on it. This includes redirecting visitors to another web page, jumping to another pop-up screen, or simply closing your pop-up window once after visitors click the CTA on your pop-up. Additionally, the template editor lets you even track both successful and unsuccessful button clicks on your pop-up in terms of conversions and rejections, respectively, to help understand whether your pop-up is truly performing well or needs further changes or improvement. 

To insert a button:
1. Drag and drop the BUTTON element from the left pane to the pop-up location where you want to add your new button, then edit the button name.


2. In the On Click Action dropdown on the left pane, select what you want to happen when the visitor clicks this button. You can choose to do any of the following:

1. Select Redirect to redirect visitors to a new webpage URL. In the Placeholder field (on the left pane), type the URL link of the webpage that you want to open when the visitors click this button.
   
   For example, if you are running an e-commerce business, this redirect option can be used to take customers to a web page that promotes offers on newly launched products, or to open a customer satisfaction form post order confirmation on your e-commerce site.
   
   
   
2. Turn on Redirect with query params to direct visitors to the webpage along with the query parameters in the URL (optional). Displaying query param string in the URL, such as the button name or ID, pop-up campaign name, or main landing page, can help you learn which pop-up button or page is getting more hits on your site and which landing page is actually sending traffic to your redirection page.
   
   
   
3. Turn on Open link in new tab to open the redirection link in a new tab on your browser (optional).
   
   
   
4. Select Jump to screen to let visitors move on to the next screen, thank you screen or any particular screen in your campaign. This option can be used when you want to let visitors jump on to a right sequence in your pop-up based on their previous response.
   
   For instance, you can use Jump to screen to display coupon codes or extra shopping discounts to customers who clicked the actionable CTA such as 'Claim code' or ‘Get offer’ on their previous screen in your pop-up.
   
   
   
5. Choose Close to simply close the pop-up window without any redirection.
   

1. Custom JS: Using Custom JavaScript you can embed a code to full-fill any action required.
   
   For instance, you can open your website's chat bot or add credits to your customer's account as a Welcome Bonus, or have any action of your choice you want implemented, when the visitor clicks the button. 
   

1. Conversion: Select this option to mark the button clicks in your pop-up as a conversion.
   
   For example, if the purpose of your campaign is to track visitors who filled and submitted the newsletter subscription pop-up placed within your blog, then you can mark the 'Yes, Subscribe' button click as a conversion to keep count on the number of visitors who successfully subscribed to your newsletter through your pop-up.
   
   
   
2. Rejection: Select this option to mark the button clicks in your pop-up as a rejection. Few of the reasons for which your visitors reject your pop-up message could be because they are uninterested in what you offer, or they find your message irrelevant or perhaps they don't like to answer your question at the moment.  
   
   Let's say you have a newsletter subscription form placed within your blog, and you have two CTAs 'Yes, Subscribe' and 'No, Thanks' button. In this case, you can mark the clicks on 'No, thanks' button on your pop-up as a rejection.
   
   
   
   
3. None: Select this option when you neither want to mark the button click as a conversion nor rejection instead use it to let visitors simply navigate from one pop-up screen to another or to any other page on your site. 
   

Insert an image 

To insert an image:
1. Drag and drop the IMAGE element from the left pane to the pop-up location where you want to add your image.

2. Click the upload icon to choose an image saved on your local computer.

3. You can customize the following options from the left pane: 

1. Use the Size slider to increase or decrease the size of the image.
   

2. Click the Image Fit dropdown to adjust how your image squishes and stretches inside the placeholder in the pop-up. 
   

3. Choose the alignment options, including Left, Right, Center, or Justified to align two or more images with respect to each other within the placeholder. 
   

4. Edit the margin, padding and border and shadow settings of the image from the left pane. 
   

   
   

Note: To delete or replace an image, click the Delete icon on the left pane.

Insert a video

Videos remain the most popular forms of content marketing around the world, and having them in your pop-up can do wonders. They can help showcase your message visually and improve the engagement time of visitors on your website. The PageSense template editor lets you easily embed YouTube videos (local videos cannot be uploaded directly), and show a preview of videos directly on your pop-up window. You can also customize the video by adding a border or shadow effect, adjusting the margin position, and choosing to autoplay the video.

To insert and customize the video:
1. Drag and drop the VIDEO element from the left pane to the pop-up location you want to insert your video.

2. In the Video URL box (on the left pane), enter the URL of the video you want to insert on your pop-up.

1. Enable the Autoplay button to automatically start playing your video as soon as the visitor lands on your pop-up.
   

2. Click the Left, Right, Center, or Justified options to align the video within the placeholder and other elements in the pop-up. 
   

3. Use the Size slider to increase or decrease the size of the video box in the pop-up. Furthermore, you can edit the margin and border, and shadow settings for the video from the left pane.
   
   

Insert a text area

Text area is an input box that allows visitors to add short passages of text in your pop-up. This element is a great fit  when you want to get detailed information from your visitors. Using the template editor, you can enhance the look of the text area by applying background color, shadow effect, or rounded corners. For example, you can ask questions like "What are your weekend plans?" or "What are your preferred travel destinations?" and How should we improve our products and services?

To insert and customize the text area:

1. Drag and drop the TEXT AREA element from the left pane to the pop-up location where you want to insert a text area.

2. In the Placeholder field (on the left pane), type the required text you want visitors to enter in the text area.

3. You can now customize the text area box properties using various formatting options available on the left pane. Learn more about the different formatting options you can apply for an element in your pop-up.  

Insert a radio button

Adding a radio button in your pop-up lets your visitors choose one option from the displayed list, and is commonly used in forms and surveys. Using the template editor, you can easily add, edit, and organize the options on your radio box, and further apply background color, shadow effect, and other customization options that capture your visitors' attention on your website.  

To insert and customize a radio button:
1. Drag and drop the RADIO element from the left pane to the pop-up location where you want to insert a radio button. 

2. In FIELD SETTINGS (on the left pane), enter the question and answers you want to display to visitors on the pop-up. Click Add new option to introduce a new option to your radio box.

3. Do any of the following:

1. In the DISPLAY section, choose to add a color to the list of options and the buttons in your radio box. From here, you can also choose the style for your radio button, as shown in the screenshot.
   
   

2. In the FONT section, choose the type and color of the font you want to apply for the radio box content.
   

   Furthermore, you can apply different formatting options to the radio button, such as margin, border, shadow, and much more, from the left pane. Learn more about the different formatting options you can apply for an element in your pop-up.  
   
   
   

   
   

Insert a checkbox 

To insert and customize a checkbox:
1. Drag and drop the CHECKBOX element from the left pane to the pop-up location you want to insert a checkbox.

2. In FIELD SETTINGS (on the left pane), enter the question and answers you want to display to visitors on the pop-up. Click Add new option to introduce a new option to your checkbox.

3. Do any of the following:

• In the DISPLAY section, you can choose to add a color to the list of options, and the button in your checkbox. From here, you can also choose to apply a style for your checkbox button.
  

• In the FONT section, choose the type and color of font you want to apply for the checkbox fields.
  

  Furthermore, you can apply different formatting options to the checkbox, such as margin, border, shadow, and much more, from the left pane. Learn more about the different formatting options you can apply for an element in your pop-up.  
  

Insert a social media icon

Social media icons are an immense power in today's marketing world, as they help increase the visibility of your website. Adding social media icons like Facebook, Twitter, and Instagram in your pop-up allows visitors to easily share and follow your website conten. This will help increase the reach of your website across the globe and give visitors the opportunity to like your page.

To insert and customize a social media icon:
1. Drag and drop the SOCIAL element from the left pane to the pop-up location where you want to insert a social media icon.

1. In the STYLE section, choose the type and color of the font you want to apply for the text. 
   

2. You can also choose the Icon height, Icon Type (Circle or Square), and Style (colored, B&W, vintage) for the social media icon, as shown in the screenshot.
   
   

Furthermore, choose to apply different formatting options to the social media icon, such as margin, border, shadow, and much more, from the left pane. Learn more about the different formatting options you can apply for an element in your pop-up.