Help

2 min read

Previewing & Filtering

The visual preview system in the Banners tool lets you see exactly how banners will appear in your app before publishing. Use filtering to test different scenarios and ensure everything works perfectly.

Understanding the Visual Preview

The visual preview appears on the right side of the Banners tool, showing a scrollable representation of your app's home screen.

Key features:

  • Real-time updates - Changes as you adjust filters
  • Platform-accurate - Shows how banners appear on different devices
  • Interactive - Scroll to see the full banner sequence
  • Filter-responsive - Hides/shows banners based on your filter settings

Filtering Options

Date & Time Filtering

Test how your banners will appear at specific future dates and times.

Use cases:

  • Weekend promotions - Set up Saturday/Sunday specific content
  • Flash sales - Schedule limited-time offers
  • Seasonal campaigns - Preview holiday content in advance
  • Time-sensitive content - Ensure banners appear at the right moments

How to use:

  1. Set the desired date using the date picker
  2. Adjust the time if needed
  3. Watch the preview update automatically
  4. Banners not scheduled for that time appear inactive in the list

Platform Filtering

Preview banners for specific device types to ensure proper display across platforms.

Available platforms:

  • iPhone - iOS mobile devices
  • iPad - iOS tablet devices
  • Android - Android mobile devices

Why it matters:

  • Different screen sizes may require different banner layouts
  • Some banners may be platform-specific
  • Ensures consistent user experience across devices

Tag Filtering

Filter banners by custom tags for organized preview and management.

Preview States

Active Banners

Banners that match your filter criteria appear normally in both the list and preview.

Inactive Banners

Banners that don't match filters are:

  • Shown as inactive in the banner list (grayed out)
  • Hidden from visual preview - won't appear in the scrollable view

This helps you understand exactly what users will see under specific conditions.

Device Preview (Draft Only)

Available in the Draft view, this feature lets you test banners on actual mobile devices.

How to Use Device Preview

  1. Set your filters first - Date, time, and platform
  2. Click "See on device" - Button appears below visual preview
  3. Scan the QR code - Use your smartphone camera
  4. App opens with draft - Shows filtered banner content

Requirements

  • App must be installed on your test device
  • QR code reflects current filter settings
  • Only works with draft content (not published)

Troubleshooting Device Preview

"App bundles are not set up" error:

  • Contact support team for assistance
  • This indicates a configuration issue

QR code not working:

  • Ensure app is installed on device
  • Try refreshing the QR code
  • Check that filters are set correctly

Best Practices for Testing

Comprehensive Testing Scenarios

  1. Test all platforms - Preview iPhone, iPad, and Android versions
  2. Check scheduling - Use date/time filters for future content
  3. Verify inactive states - Ensure banners hide when scheduled to do so
  4. Mobile device testing - Use QR codes for real-world validation

Common Testing Workflow

  1. Set up banners in draft mode
  2. Filter by platform - Test each device type
  3. Check future dates - Verify scheduled content
  4. Device preview - Test on actual mobile device
  5. Publish when satisfied with all scenarios

Filter Tips

  • Save time - Set filters before creating banners to see immediate results
  • Test edge cases - What happens at midnight? Between scheduled periods?
  • Platform consistency - Ensure important content works across all devices
  • Schedule validation - Double-check that time zones are handled correctly

Preview vs. Reality

The visual preview is highly accurate, but device preview provides the definitive test:

Visual preview is great for:

  • Quick layout checks
  • Content verification
  • Scheduling validation
  • Multi-platform comparison

Device preview is essential for:

  • Final quality assurance
  • Touch/tap testing
  • Performance verification
  • Real-world user experience

What's Next?