How to add new elements to your pop-up using the template editor in Zoho PageSense | Help guide?

Insert new elements to your pop-up

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: 

Navigate to the TEMPLATE EDITOR section, click the ELEMENTS tab on the left pane, then drag and drop your preferred types of elements from the left pane. 

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 conceptEvery 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

Text is one of the basic elements that can be used in pop-ups to create engaging headlines, convey a piece of information, or provide an instructional message to visitors. For example, introducing new form fields, or highlighting quotes or an important note. Using the template editor, you can make your content look appealing, legible, and expressive to your audience, and further better organize your message on the pop-up.
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.  
To insert a text:
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 ColorBorder 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. 


3. Choose whether you want to track button clicks or link clicks added to your pop-up as a conversion, rejection, or none.
  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. 
4. Once you have chosen your desired On click action, you can next customize the properties of the button element, such as button color and others, using the different formatting options available on the left pane.

Insert an image 

Images help visually convey your brand’s message and business idea to your global audience. Adding compelling images to your pop-up can grab your audience's attention instantly and make visitors take action on your website. The PageSense template editor also allows you to customize and enhance the look of these images by applying background color, size, border color, and shadow effects, as needed. 

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



3. Do any of the following:

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

  2. Click the LeftRightCenter, 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 

Checkboxes also work similarly to radio button elements in the pop-up, except that checkboxes allow you to choose more than one option (multiple sets of answers) from the list of choices. You can add, edit, and organize the options on your checkbox as, and further apply background color, shadow, and other customization options to keep it clear and distinct in your pop-up window.

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

2. Click the Type dropdown to choose what you want visitors to do with your content: either Follow or Share

3. In the Placeholder field (on the left pane), add a title you want to show on your pop-up.

4. Enter a name and URL of the social media page to redirect visitors from the pop-up. Click Add new channel to insert another social icon on the pop-up.

5. Do any of the following:

  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.  

    Zoho CRM Training Programs

    Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

    Zoho CRM Training
      Redefine the way you work
      with Zoho Workplace

        Zoho DataPrep Personalized Demo

        If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

        Zoho CRM Training

          Create, share, and deliver

          beautiful slides from anywhere.

          Get Started Now


            Zoho Sign now offers specialized one-on-one training for both administrators and developers.

            BOOK A SESSION









                                        You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.




                                            Manage your brands on social media

                                              Zoho Desk Resources

                                              • Desk Community Learning Series


                                              • Digest


                                              • Functions


                                              • Meetups


                                              • Kbase


                                              • Resources


                                              • Glossary


                                              • Desk Marketplace


                                              • MVP Corner


                                              • Word of the Day


                                                Zoho Marketing Automation

                                                  Zoho Sheet Resources

                                                   

                                                      Zoho Forms Resources


                                                        Secure your business
                                                        communication with Zoho Mail


                                                        Mail on the move with
                                                        Zoho Mail mobile application

                                                          Stay on top of your schedule
                                                          at all times


                                                          Carry your calendar with you
                                                          Anytime, anywhere




                                                                Zoho Sign Resources

                                                                  Sign, Paperless!

                                                                  Sign and send business documents on the go!

                                                                  Get Started Now




                                                                          Zoho TeamInbox Resources



                                                                                  Zoho DataPrep Resources



                                                                                    Zoho DataPrep Demo

                                                                                    Get a personalized demo or POC

                                                                                    REGISTER NOW


                                                                                      Design. Discuss. Deliver.

                                                                                      Create visually engaging stories with Zoho Show.

                                                                                      Get Started Now









                                                                                                          • Related Articles

                                                                                                          • Create your first pop-up in Zoho PageSense

                                                                                                            Choose from predesigned pop-ups in Zoho PageSense to engage customers on your website and use their feedback to improve your business instantly. No coding or design experience needed. All of the pop-up forms can be easily customized and distributed ...
                                                                                                          • Create a multi-screen pop-up in PageSense

                                                                                                            In PageSense, apart from creating the traditional single-step pop-ups that ask for information like visitor name and/or email address at the first sight, you can also set up a more effective and engaging multi-screen pop-up campaigns to ...
                                                                                                          • Customize elements in your pop-up using the template editor

                                                                                                            Our flexible template editor allows you to select and modify each element individually on your pop-up however you like. You can freely move elements around, and customize the appearance of your pop-up, including background color, button color, image ...
                                                                                                          • Setup triggers for your experiment in PageSense

                                                                                                            In PageSense, you can create and launch different types of polls and pop-ups to grab the attention of visitors coming to your site. Even though these on-site messages are a powerful way to kindle your audience's interest towards your brand, if they ...
                                                                                                          • Invite new users and assign roles in Zoho PageSense

                                                                                                            In PageSense, you can invite new members to collaborate on different projects, and assign them various roles such as administrators, members, editors, and viewers. Defining specific roles to individuals in a project is specifically useful when there ...
                                                                                                            Wherever you are is as good as
                                                                                                            your workplace

                                                                                                              Resources

                                                                                                              Videos

                                                                                                              Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                              eBooks

                                                                                                              Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                              Webinars

                                                                                                              Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                              CRM Tips

                                                                                                              Make the most of Zoho CRM with these useful tips.



                                                                                                                Zoho Show Resources