Mobile-friendly popups are crucial for the success of your Wisepops campaigns. This guide will help you create popups that look great on both mobile and desktop devices, considering the unique challenges of mobile screens.
Visualizing Your Popup on Different Devices
To ensure your popup looks good on both mobile and desktop:
Use the toggle in the top right of the popup editor to switch between Desktop and Mobile views.
Use the preview feature to see how your popup appears on your actual website in both modes.
Customizing Popup Design for Mobile
Hiding Columns on Mobile
Wisepops allows you to hide specific columns on mobile devices:
Hover over the column you want to hide.
Click "Edit Column".
In the left menu, toggle "Display on mobile" to hide the column.
Verify the changes by switching between Desktop and Mobile views.
Note: Many multicolumn templates are pre-edited to hide unnecessary columns on mobile.
Warning: Avoid hiding columns with critical elements, such as buttons linking to next steps.
Creating Separate Mobile-Only Popups
In some cases, you may need to create a separate mobile popup:
Duplicate your desktop campaign or start from scratch
Set the popup to display on phones:
Click "Display" > "Audience" tab
Select "Display on mobiles" next to Device
3. Adjust content & styling:
Adjust or remove images to improve loading time
Edit copy and font sizes
Adjust call-to-action button
Mobile Best Practices
Easy Closing: Increase the size of the closing 'X' for easier tapping.
Use the Tab Feature: Activate the tab for non-invasive calls to action.
Add a Delay: Implement a page view delay to comply with Google guidelines.
Simplify Design: Remove unnecessary elements and optimize for smaller screens.
Optimize Loading Speed: Minimize image usage and file sizes.
Troubleshooting
If you're not seeing your popup on your website, try these tips:
Clear your browser cache and cookies.
Check your targeting settings.
Verify that your website's code snippet is correctly installed.
Test on different devices and browsers.