Popup Editor User Guide

A focused guide for beginners to effectively use the popup design editor.

Table of Contents

  1. Getting Started with the Popup Editor
  2. Understanding the Editor Interface
  3. Working with Popup Steps
  4. Adding and Managing Elements
  5. Styling Your Popup Elements
  6. Layout and Positioning
  7. Theme Customization
  8. Form Elements and User Input
  9. Preview and Testing
  10. Common Tasks and Troubleshooting

1. Getting Started with the Popup Editor

Opening the Popup Editor

The popup editor is your main workspace for creating and customizing popups:

  1. From the Flows Dashboard: Click on any existing popup flow to open it in the editor
  2. Creating a New Popup: Use the “Create New Flow” button and select “Popup” as your flow type

Understanding the Editor Interface Layout

The popup editor uses a three-panel layout:

Left Sidebar - Navigation and Structure

Center Area - Live Preview

Right Sidebar - Editing and Styling

  1. Device Toggle: Look for the desktop/mobile icons in the top toolbar
  2. Click to Switch: Simply click the device icon to switch between views
  3. Independent Styling: Each device can have different layouts and styling
  4. Preview Changes: Always test your changes on both devices

Basic Editor Controls

Essential Controls:

Quick Tips:

2. Understanding the Editor Interface

Step Management Section:

Element Tree Section:

Center Area: Live Preview of Your Popup

Preview Features:

Working with the Preview:

Content Editing:

Styling Options:

Top Bar: Device Switching and Action Buttons

Device Controls:

Action Buttons:

3. Working with Popup Steps

What Are Popup Steps and Why They Matter

Steps are individual screens in your popup flow:

Common Step Types:

Why Use Multiple Steps:

Creating New Steps in Your Popup Flow

  1. Locate the Add Step Button: Look for the “+” icon in the step list area
  2. Click to Add: Click the “+” button to create a new step
  3. Choose Step Type: Select from templates or start with a blank step
  4. Name Your Step: Give it a descriptive name like “Email Collection”

Step Creation Tips:

Renaming and Organizing Steps

  1. Select the Step: Click on the step you want to rename
  2. Access Step Menu: Click the three-dot menu icon next to the step name
  3. Choose Rename: Select “Rename” from the dropdown menu
  4. Enter New Name: Type a clear, descriptive name
  5. Save Changes: Press Enter or click outside to save

Naming Best Practices:

Deleting Unwanted Steps

  1. Select the Step: Click on the step you want to delete
  2. Open Step Menu: Click the three-dot menu icon
  3. Choose Delete: Select “Delete” from the dropdown
  4. Confirm Deletion: Click “Yes” in the confirmation dialog

Before Deleting Steps:

Understanding Step Order and Navigation

Step Flow Logic:

Reordering Steps:

  1. Drag and Drop: Click and drag steps in the step list to reorder them
  2. Update Button Links: Check that buttons still link to the correct steps
  3. Test the Flow: Always preview after reordering

Navigation Best Practices:

4. Adding and Managing Elements

Adding New Elements

Elements are the building blocks of your popup:

Text Elements:

Interactive Elements:

Layout Elements:

Adding Elements Step-by-Step:

  1. Select Your Step: Choose which step will contain the new element
  2. Find the Add Button: Look for the “+” icon in the step header or element tree
  3. Choose Element Type: Click the “+” and select from the element menu
  4. Customize Content: Click the element to edit its content and styling

Selecting Elements

Clicking in the Preview:

Using the Element Tree:

Understanding Parent and Child Relationships:

Moving Elements Around

Drag and Drop in Element Tree:

  1. Select the Element: Click the element you want to move
  2. Drag to New Position: Click and drag the element name in the tree
  3. Drop in Place: Release when you see the blue insertion line
  4. Verify Position: Check the preview to ensure correct placement

Moving Elements Between Steps:

  1. Copy the Element: Right-click and select “Copy” or use Ctrl+C
  2. Switch Steps: Click on the destination step
  3. Paste Element: Right-click in the element tree and select “Paste”

Organization Best Practices:

5. Styling Your Popup Elements

Understanding Shared Styles vs Individual Styles

Shared Styles (Recommended for Consistency):

Individual Styles (For Unique Elements):

How to Apply Shared Styles:

  1. Select Your Element: Click the element you want to style
  2. Find Style Options: Look for “Shared Style” dropdown in the right sidebar
  3. Choose a Style: Select from available options like “Primary Button” or “Heading”

Text Styling

Font and Size Controls:

  1. Select Text Element: Click any text element (headline, paragraph, etc.)
  2. Find Typography Section: Look for “Text” or “Typography” in the right sidebar
  3. Choose Font Family: Select from available fonts in the dropdown
  4. Adjust Font Size: Use the size slider or enter a specific number

Text Color and Formatting:

Text Alignment and Spacing:

Typography Best Practices:

Colors and Backgrounds

Setting Text Colors:

  1. Select Text Element: Click the text you want to color
  2. Open Color Picker: Click the color square in the styling panel
  3. Choose Color Method:
    • Color Picker: Click and drag to select any color
    • Hex Code: Enter a specific hex code (e.g., #FF0000 for red)
    • Brand Colors: Select from your predefined brand colors

Background Colors for Elements:

Using the Color Picker Effectively:

Understanding Color Variables and Themes:

6. Layout and Positioning

Element Positioning

Understanding Layout Containers:

Spacing Between Elements (Margins and Padding):

Margins (Space Outside Elements):

  1. Select Your Element: Click the element you want to adjust
  2. Find Spacing Controls: Look for “Margin” in the styling panel
  3. Adjust Values: Use sliders or enter specific pixel values

Padding (Space Inside Elements):

  1. Select Container Element: Click a container or button element
  2. Find Padding Controls: Look for “Padding” in the styling panel
  3. Adjust Internal Space: Increase padding to make elements feel less cramped

Alignment Options:

Size and Dimensions

Setting Element Widths and Heights:

Width Controls:

  1. Select Your Element: Click the element you want to resize
  2. Find Size Controls: Look for “Width” in the styling panel
  3. Choose Size Type:
    • Auto: Element sizes itself based on content (recommended)
    • Percentage: Element takes a percentage of available space (e.g., 50%)
    • Fixed Pixels: Element has a specific pixel width (e.g., 300px)

Height Controls:

Responsive Sizing for Different Devices:

Best Practices for Sizing:

7. Theme Customization

Global Theme Settings

Understanding Your Popup’s Overall Theme:

Accessing Theme Settings:

  1. Open Theme Panel: Look for “Theme” or “Global Styles” in the right sidebar
  2. Navigate Sections: Find different theme categories (colors, fonts, buttons)
  3. Make Changes: Adjust theme settings to match your brand

Customizing Brand Colors Across the Popup:

Primary Colors:

Setting Brand Colors:

  1. Select Color Category: Choose which color type to customize
  2. Open Color Picker: Click the color square to open the picker
  3. Choose Your Color: Use the picker, enter hex codes, or upload brand guidelines

Setting Consistent Fonts and Styles:

CSS Variables and Advanced Theming

Using Theme Variables for Consistency:

Customizing Shared Style Handles:

Creating Reusable Design Elements:

  1. Define Base Styles: Set up your core design elements
  2. Apply Consistently: Use the same styles throughout your popup
  3. Update Globally: Make changes that affect all instances

Advanced Theme Tips:

8. Form Elements and User Input

Adding Form Fields

Email Collection Fields:

  1. Add Email Field: Click the “+” button and select “Email Input”
  2. Set Placeholder Text: Add helpful text like “Enter your email address”
  3. Configure Validation: Mark as required and set error messages
  4. Style the Field: Match your brand colors and fonts

Email Field Best Practices:

Name and Contact Information:

Adding Name Fields:

  1. Select Name Input: Choose “Name Input” from the element menu
  2. Choose Field Type: Single name field or separate first/last name
  3. Set Placeholder: Use “Your full name” or “First name”
  4. Configure Requirements: Decide if name is required or optional

Custom Form Fields:

Adding Custom Fields:

  1. Choose Field Type: Select “Free Text” or other custom field types
  2. Set Field Label: Clearly describe what information you’re collecting
  3. Configure Format: Set validation rules (date format, text length, etc.)

Form Styling

Input Field Appearance:

Styling Input Fields:

  1. Select Form Field: Click any input field element
  2. Find Style Controls: Look for “Input Styles” in the right sidebar
  3. Adjust Appearance: Modify borders, backgrounds, and text styling

Button Styling for Form Submission:

Configuring Submit Buttons:

  1. Select Button Element: Click your form’s submit button
  2. Enable Submit Function: Check “Submit form” in button settings
  3. Style the Button: Use your primary brand color for maximum impact
  4. Set Button Text: Use action words like “Get My Discount” or “Subscribe”

Error States and Validation Styling:

Form Styling Best Practices:

9. Preview and Testing

Using the Live Preview

The live preview is your most important tool for ensuring your popup works perfectly:

Seeing Changes in Real-Time:

How to Use Live Preview Effectively:

  1. Make Changes: Edit any element in your popup
  2. Watch Preview: Observe changes in the center preview area
  3. Test Interactions: Click buttons, fill forms, navigate between steps
  4. Switch Devices: Toggle between desktop and mobile views

Testing Different Device Sizes:

Previewing User Interactions:

Testing Your Popup

Preview Mode Functionality:

  1. Open Preview: Click the “Preview” button in the top toolbar
  2. New Tab Opens: Your popup opens in a separate browser tab
  3. Real Environment: See exactly what customers will experience

Testing Form Submissions:

Form Testing Checklist:

  1. Required Fields: Ensure required fields prevent submission when empty
  2. Email Validation: Test with invalid email formats
  3. Error Messages: Verify helpful error messages appear
  4. Success Flow: Complete valid submissions and check thank you steps

Checking Mobile Responsiveness:

Testing Best Practices:

10. Common Tasks and Troubleshooting

Frequently Asked Questions

“How do I change the popup background color?”

  1. Select the Main Container: Click the outermost container in your popup
  2. Find Background Settings: Look for “Background” in the styling panel
  3. Choose Background Color: Click the color picker and select your desired color
  4. Test on Both Devices: Check desktop and mobile views

“How do I make text bigger or smaller?”

  1. Select Text Element: Click the text you want to resize
  2. Find Font Size Control: Look for “Font Size” or “Text Size” in the styling panel
  3. Adjust Size: Use the slider or enter a specific pixel value
  4. Test Mobile: Verify text is readable on small screens

“How do I add my logo to the popup?”

  1. Add Image Element: Click “+” and select “Image” from the element menu
  2. Upload Logo: Click “Upload Image” and select your logo file
  3. Position Logo: Drag the image element to the desired location in the element tree
  4. Resize Logo: Adjust width and height to appropriate size

“How do I change button colors?”

  1. Select Button: Click the button you want to style
  2. Find Button Styling: Look for “Background Color” in the styling panel
  3. Choose Color: Use the color picker to select your brand color
  4. Set Text Color: Ensure button text contrasts well with background

“How do I make elements stack vertically?”

  1. Select Container: Click the container holding your elements
  2. Find Layout Settings: Look for “Layout” or “Direction” options
  3. Choose Vertical: Select “Column” or “Vertical” layout
  4. Adjust Spacing: Add appropriate spacing between stacked elements

Common Styling Issues

Elements Not Appearing as Expected:

  1. Check Element Visibility: Ensure elements aren’t hidden or transparent
  2. Verify Container Size: Make sure parent containers are large enough
  3. Clear Browser Cache: Refresh preview to see latest changes
  4. Check Device View: Switch between desktop and mobile views

Colors Not Matching Your Brand:

  1. Use Brand Color Codes: Enter exact hex codes from your brand guidelines
  2. Set Up Theme Colors: Configure global theme colors for consistency
  3. Check Color Contrast: Ensure sufficient contrast for readability
  4. Use Color Picker Tool: Sample colors directly from your website

Text Appearing Too Small on Mobile:

  1. Increase Mobile Font Sizes: Set larger sizes specifically for mobile view
  2. Check Line Height: Ensure adequate spacing between lines
  3. Test on Real Devices: Preview on actual phones when possible
  4. Simplify Content: Reduce text amount for mobile screens

Buttons Not Standing Out Enough:

  1. Use Contrasting Colors: Make buttons stand out from background
  2. Increase Button Size: Make buttons larger and easier to tap
  3. Use Action Words: Write compelling button text like “Get My Discount”
  4. Test Button Placement: Position buttons prominently in the layout

Best Practices

Keeping Designs Simple and Clean:

Ensuring Mobile-Friendly Layouts:

Using Consistent Branding:

Optimizing for Conversion:

This guide is designed for users with little to no CSS experience. Each section includes step-by-step instructions to help you create effective popups using the design editor.