# Popup Editor The **Popup Editor** is a tool that allows you to customize the design, content, and behavior of your popups. It provides an easy-to-use interface where you can create and modify popups according to your website’s needs. With the Popup Editor, you can adjust the layout, add images or text, set colors, and define the style of your popup to match your brand. \ \ By customizing your popups, you can boost user interaction and increase conversions, whether that’s through encouraging sign-ups, promoting sales, or offering discounts. ## Importance of the Popup Editor The Popup Editor is a key tool for optimizing the effectiveness of popups on your website. It allows you to fully customize and control how popups interact with your visitors, leading to better user engagement and improved conversions. ### Customization for Branding The Popup Editor enables you to design popups that match your website's style, ensuring a consistent brand experience. > * **Match Your Website’s Look**: Choose fonts, colors, and images that align with your brand. > * **Visual Consistency**: Maintain a cohesive design language to keep the popup in harmony with the rest of the site. ### Enhanced User Engagement Customized popups capture users' attention and encourage them to take action. > * **Create attention-grabbing designs** that capture user interest. > * **Personalized Content**: Tailor the message based on user behavior or interests to make it more relevant and engaging. ### Targeted Messaging Create specific messages for different types of visitors to drive better results. > * **Behavioral Triggers**: Set popups to appear based on user actions (e.g., adding an item to the cart or spending a certain time on the page). > * **Custom Offers**: Show personalized discounts or incentives, increasing the likelihood of conversions. ### Control Over Popup Behavior The Popup Editor gives you full control over when and where your popup will appear. > * **Timing Control**: Choose when the popup shows up—whether after a delay, on exit intent, or after a certain action. > * **Page-Specific Targeting**: Decide which pages or sections of the site should trigger the popup, ensuring it’s shown at the right moment. ### Improved Conversion Rates Well-crafted popups increase the likelihood of user actions such as purchases, sign-ups, or other goals. > * **Strategic Popups**: Display offers, promotions, or important messages at moments when users are most likely to convert. > * **Higher Engagement**: Relevant and well-timed popups drive user action, helping you meet your conversion goals more effectively. The **Popup Editor** is vital because it helps you create effective, branded popups that engage users and encourage conversions while giving you full control over the timing, behavior, and appearance of the popups. ## Popup Editor - Drag & Drop Tools The **Drag & Drop Tools** in the Popup Editor allow you to easily customize your popup by dragging elements (like text, images, and buttons) into place. ### Layout The **layout** in the Popup Editor determines how elements like text, images, and buttons are arranged within the popup

* **1 Column**: A simple layout with all content stacked vertically, ideal for minimalistic designs. * **2 Columns**: Content is divided into two side-by-side sections, perfect for balancing text and images. * **3 Columns**: A layout with three equal sections, useful for displaying multiple pieces of content in an organized way. * **2 Columns (3/7)**: Uneven column layout where one section takes 3/7 of the space, useful for emphasizing one piece of content. ## Elements in the Popup Editor ### **Text** Adds customizable text to the popup, allowing you to deliver your message clearly. ### **Link** Creates clickable links to direct users to other pages or resources.

After clicking '**Add Image**,' a popup appears.

Uploading Image / Choose Pre-uploaded Image

### **Coupon** Displays a discount code or offer, encouraging conversions.

### **Button** Adds a clickable button, often used for actions like submitting a form or making a purchase.

{% hint style="info" %} #### **Link Options in the Popup Editor** * **Next Page**: Links to the next page in the user’s journey, guiding them to more content or offers. * **Close**: Links to close the popup, allow users to dismiss it and continue browsing. * **Redirect**: Redirects users to a specific URL or external page, such as a product page or checkout. * ![](https://837552055-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDdKRAW4KzC-CNNbvnH%2Fuploads%2F9Vshp5Sq5g8L0tXdtwWL%2FScreenshot%202024-12-01%20at%2012.38.53%20PM.png?alt=media\&token=aed70d9e-c8c1-4e60-8434-1b5a66a4e3c5) {% endhint %} ### **Divider** A line or separator that helps break up content for a cleaner, more organized look. ### **Spacer** Adds space between elements to improve the layout and readability. ### **Subscription Form** Allows visitors to subscribe to newsletters or offers directly from the popup. **Implicit in a Sign-Up Form** refers to the information or actions users agree to or provide without explicitly stating them. For example: * **Pre-checked Consent Boxes**: When a user signs up, they might unknowingly agree to terms, privacy policies, or marketing communications due to pre-checked boxes. * **Hidden Data Collection**: The form may collect additional data behind the scenes (e.g., tracking the user’s IP address or location) without the user explicitly giving consent. This can be a concern for user privacy, and it's important to ensure clear consent is given for all data collection and usage.

**Explicit in a Sign-Up Form** refers to clear, direct actions or agreements made by the user. It means the user knowingly and voluntarily provides their information or consents to certain terms. Examples include: * **Unchecked Consent Boxes**: Users must actively checkboxes to agree to terms, privacy policies, or marketing communications. * **Clear Information Requests**: Users are explicitly asked for specific details, such as email addresses or preferences, without hidden or implied data collection. Explicit consent ensures transparency and helps maintain trust with users by clearly informing them of what they’re agreeing to.

## Form in the Popup Editor ### Email A field where users enter their email addresses is typically used for sign-ups, newsletters, or contact forms.

### Legal Consent for marketing A checkbox or consent field where users agree to terms and conditions or privacy policies, ensuring legal compliance. ### **Implicit** If a customer provides their email address but does not explicitly opt out of marketing communications, it is considered that they have given implicit consent. {% embed url="" %} **EXAMPLE** If a sign-up form automatically subscribes users to a newsletter without asking for explicit consent, this is **implicit consent**. Users may not realize they're being signed up because the action is assumed by default

### **Explicit** This requires clear action by the customer to indicate their consent, such as ticking a checkbox to receive marketing communications. **EXAMPLE**: If a sign-up form has a checkbox that the user must click to agree to terms and conditions or subscribe to a newsletter, this is **explicit consent**. The user is actively and knowingly agreeing to the terms.

### First Name A field where users enter their first name, often used to personalize communication ### Last Name A field for entering the user's last name also used for personalization or formal address ### Phone A field where users input their phone number, useful for contact or account recovery purposes

## Teaser A **teaser** is a short, engaging piece of content or message designed to spark curiosity and encourage the audience to take further action. It is often used in marketing, popups, and advertisements to provide a glimpse of something exciting or valuable without giving away too much detail, prompting users to learn more or engage further. {% hint style="info" %} #### EXAMPLE 1. **Pop-up Message**: "Wait! Don’t miss your chance for 20% off your first order!" 2. **Email Subject Line**: "The secret to a flawless look—find out inside!" {% endhint %} Teasers are meant to catch attention, create interest, and drive users to take the next step, such as clicking a link, signing up, or making a purchase.

### Conclusion: The Popup Editor is an essential tool for creating impactful and engaging popups tailored to your website’s needs. With features like branding customization, targeted messaging, and user-friendly drag-and-drop tools, it empowers you to design popups that not only align with your brand but also boost user engagement and conversions. {% hint style="success" %} **Need More Help?** We’re here to make things easier for you! * Email Us: Reach out anytime at . * Schedule a Call: Still stuck or need a hands-on walkthrough? Book a quick session with our support team, and we’ll guide you step-by-step. [**Schedule a call with us**](https://zcal.co/retainful/onboarding)**.** {% endhint %}