Superpopups offers multiple popup formats designed for different marketing goals:

1. Lightbox Popup
   
   • Look: Centered overlay, background dimmed
     
   • Best for: Email capture, promo codes, announcements
     
2. Fullscreen Popup
   
   • Look: Covers entire screen
     
   • Best for: Limited-time offers, important notices
     
3. Slide-in Popup
   
   • Look: Slides from left, right, or bottom
     
   • Best for: Subtle promotions, cart reminders
     
4. Floating Bar / Ribbon
   
   • Look: Fixed strip at top or bottom of page
     
   • Best for: Ongoing banners (free shipping, countdown timers)
     
5. Embedded Form
   
   • Look: Stays inside page content
     
   • Best for: Permanent lead capture or feedback
     

Pro Tip: If you’re new, start with a Lightbox - it has the highest visibility.

Step-by-Step:

1. From the dashboard, click Create Popup or select an existing popup to edit.
2. You’ll see three main areas:
   
   • Left Canvas: Your live popup preview
   • Right Panel: Settings for the selected element (colors, fonts, spacing, animations)
     
3. To edit an element: Click it once, then use the right panel to adjust.
4. See Preview for both desktop and mobile.

Pro Tip: Nothing changes on your live site until you click Publish.

Step-by-Step:

1. Click the Templates tab (from navigation).
2. Use the filter menu on the left to choose a category
3. Hover over a template and click Use Template.
4. The editor will open — click text or images to replace with your own.
5. Adjust colors, fonts etc. in the right panel.
6. Click Save (top-right) when finished.

Adding or Editing Text:

1. Click on any text element in the popup preview.
2. Type directly into the box.
3. Adjust font, size, color, and spacing in the right panel.
   

Adding or Editing Images:

1. Click Replace Image by clicking on it.
   
2. Upload from your computer or pick from your library.
   
3. Adjust size, and alignment from options.
   

Adding or Editing Videos: (coming soon!)

1. Drag the Video element from the left panel.
   
2. Paste a YouTube/Vimeo link or upload an MP4.
   
3. Control autoplay, mute, and loop in the right panel.
   

Pro Tip: Use optimized images/videos under 1MB for fast loading.

Step-by-Step:

1. In the editor, click on the Image element.
2. In the right panel, change:
   
   • Background Color or Background Image
   • Overlay Opacity (if using a background image)
3. Click on any text element to edit Font, Font Size, and Font Color.
4. For buttons, click them and adjust Background Color, Text Color.

Pro Tip: Keep your design consistent with brand colors and font styles.

Step-by-Step:

1. In the editor, click the Mobile Preview icon (small phone shape in top toolbar).
   
2. Check how your popup looks in mobile view.
   
3. Resize text and images so they fit without scrolling sideways.
   
4. Adjust button sizes for easy tapping.
   
5. Preview on a real mobile device before publishing.
   

Pro Tip: Use from mobile templates for best mobile experience.

Step-by-Step:

1. Go to dashboard
   
2. Click the More Options (⋮) menu on the popup you want to reuse.
   
3. Select Duplicate.
   
4. Name your template and click Save.
   

Pro Tip: Use this option to launch campaigns quickly, if relevant.

Adding HTML:

1. In the editor, drag the HTML/Code Element from the left panel.
   
2. Paste your HTML into the code box.
   

Adding CSS:

1. In the editor, click Settings (top toolbar).
   
2. Select Custom CSS.
   
3. Paste your styles and save.
   

Adding JavaScript:

1. Click Settings (top toolbar).
   
2. Select Custom JS.
   
3. Paste your script and save.
   

Pro Tip: Test any custom code in Preview mode before publishing- incorrect code can break your popup.