Skip to main content
The FunnelFox Visual Editor is a powerful WYSIWYG (What You See Is What You Get) tool for building web funnels. View your funnel in a canvas interface, drag and drop elements, and create sophisticated conversion flows without writing code.
The editor displays a mobile preview by default because most funnel traffic comes from mobile devices. Your funnels automatically work on all screen sizes.

​
Editor interface

The Visual Editor has three main areas that work together:

​
Screens & Elements

You’ve got two tabs on the left panel:
  • Screens tab: View all screens in your funnel, add new ones, and reorder them by dragging.
  • Elements tab: Browse elements on your screens or add new ones.

​
Canvas

More canvas features are coming soon!
Your main funnel view with a canvas interface. Browse your funnel flow here in mobile device frames and click any screen to start editing it. You can zoom in or out to see all funnel branches at once. Canvas is especially helpful for managing dynamic navigation flows. To collaborate on your launch, share the canvas with your team if needed.
You can switch to the classic view anytime using the Screen/Canvas toggle below.

​
Screen & Styles

When you start editing a screen, you’ll see two tabs in the right panel:
  • Screen: Adjust basic screen settings and metadata.
  • Styles: Set screen and element visual styling and layout.

​
Key features

​
Version history
The Visual Editor maintains a complete version history. Access it using the version dropdown (e.g., “v12”) in the top toolbar.
Version history panel
  • Each save creates a new version (v1, v2, v3…).
  • Click the restore arrow to rollback to any previous save.
  • The version you’re editing right now is marked as Current.
  • Each version has a timestamp when it was saved.
The editor doesn’t auto-save. Click the Save button to preserve your work.
​
Screens
Screens are individual pages in your funnel. Each screen has its own URL path like /funnel-slug/screen-id. Always use descriptive screen IDs (e.g., ‘welcome’, ‘benefits’, ‘checkout’) for clean URLs and better analytics tracking.
  • Screen Types
  • Screen Properties
Set screen types for analytics tracking:
  • Default: Standard content screens
  • Auth: Login or registration
  • Checkout: Payment processing
  • Finish: Success or confirmation
  • Paywall: Pricing presentation
  • Upsell: Additional offers
Screen types are for analytics only. They don’t change functionality but help track conversion metrics like “Start to Paywall” rates.
​
Elements
Elements are the building blocks of your screens. Add them from the left panel onto your canvas to build your funnel. Each element has properties you can customize:
  • Visual styling (colors, fonts, spacing)
  • Content (text, images, placeholders)
  • Behavior (actions, conditions)
Learn more about elements.
​
Actions & triggers
Actions define what happens when users interact with elements. Triggers determine when actions execute.

Common Actions

  • Navigate to next/specific screen
  • Show or hide elements
  • Purchase a product
  • Scroll to element

Trigger Examples

  • Button click
  • Option selected
  • Timer completion
  • Purchase success/failure
Learn about actions & triggers.

​
Build your funnel

1

Add screens

Start with screens for your funnel flow. Click Add screen to create new pages for your journey.
2

Design with elements

Add elements onto each screen. Build your layout with text, images, buttons, and forms.
3

Configure actions

Set up navigation and interactions. Most commonly, buttons navigate to the next screen.
4

Set screen types

Mark screens appropriately (Paywall, Checkout, etc.) for analytics tracking.
5

Preview and test

Use Preview mode to test your funnel with sandbox payments before going live.

​
Group funnel screens

Groups organize screens and enable progress tracking: Organization
  • Group related screens (e.g., “Quiz Questions”, “Checkout Flow”)
  • Collapse groups for cleaner navigation
  • Reorder entire groups at once
Progress bars
  • Each group becomes a progress point
  • Users see completion as they advance
  • Visual feedback improves conversion
Example: Three groups with 3 screens each shows 3 dots in the progress bar. Completing group 2 fills the second dot.
Unlike traditional page builders, funnel screens aren’t directly linked. Instead, they follow a sequence with navigation controlled by actions. You can easily visualize the entire user journey through your funnel using the canvas view. Default flow:
  • Screens appear in the order shown in left panel
  • Next screen action follows this order
  • Users progress linearly through the funnel
Dynamic navigation:
  • Use Destination to [specific screen] for branching
  • Create conditional navigation based on user choices
  • Build dynamic paths with personalization

​
Share canvas

You can share your funnel while building it in two ways:
  1. Click the Share button below.
  1. Select how you share the canvas:
  • Editor: For users with builder access.
  • Preview: For public viewing of the current canvas (without editing).

​
Preview vs production

You can view each funnel in Preview or Publish mode:
  • Preview mode
  • Published mode
For testing and development:
  • Instant updates
  • Sandbox payments (test cards)
  • No real transactions
  • Faster builds
  • Share preview links for public viewing without builder access
Use for all testing before going live.

​
Keyboard shortcuts

Speed up your workflow with shortcuts:
  • Cmd/Ctrl + Z: Undo
  • Cmd/Ctrl + Shift + Z: Redo
  • Cmd/Ctrl + C: Copy element
  • Cmd/Ctrl + V: Paste element
  • Delete: Remove selected element
  • Cmd/Ctrl + S: Save changes

​
FAQ

Yes, funnels work perfectly on desktop browsers. However, they’re optimized for mobile users since that’s where most traffic comes from. The mobile-first design ensures the best experience for the majority of your visitors.
Yes, the Raw HTML element allows custom code. However, most funnels can be built entirely with visual elements, which is recommended for reliability and performance.
No, you need to manually save your work. Press Cmd/Ctrl + S or click the Save button regularly. Make sure to save before closing the editor or your changes will be lost.
No, the editor doesn’t support real-time collaboration yet. Only one person should edit a funnel at a time to avoid conflicts. Coordinate with your team to prevent overwriting each other’s work.

​
Next steps