Customize Magnet Appearance and Display Timing
What this guide covers Magnet supports widget customization and behavior controls. You decide how the widget looks and when it appears on the page. This guide covers colors, shape, size, and position, plus display timing
Last reviewed: October 9, 2026
What this guide covers
Magnet supports widget customization and behavior controls. You decide how the widget looks and when it appears on the page. This guide covers colors, shape, size, and position, plus display timing by time on page and by scroll depth. It ends with fixes for timing that doesn’t work and widgets that look misaligned on mobile.
Customize colors to match your brand
Set Magnet’s colors to match your brand so the widget looks like part of your site.
Customize shape, size, and position
Adjust the widget’s shape, size, and position for the page it sits on. Check the result on desktop and on mobile, because a position that works on a wide screen may not suit a small one.
Set display timing
You can control when Magnet appears in two ways:
- Time on page: show the widget after the visitor has spent a set time on the page.
- Scroll depth: show the widget after the visitor scrolls a set distance down the page.
Pick the trigger that fits the page and test it the way a visitor would.
Test before you go live
- Configure appearance and display behavior for the target page.
- Run desktop and mobile checks on visibility and the interaction flow.
- Go live only after you’ve confirmed the trigger behavior and the conversion path.
Troubleshooting
Trigger timing isn’t working
- Reproduce it with one controlled test: one page, one browser, and the exact time or scroll depth you set.
- Confirm the embed script is installed in the correct placement on that page.
- Change one timing setting at a time and retest the same scenario.
Magnet looks misaligned on mobile
- Test on a real mobile device. Mobile behavior should be validated on real devices before rollout.
- Adjust size and position, then retest on the same device.
- Recheck desktop after each change so a mobile fix doesn’t break the desktop layout.
Common mistakes
- Going live without end-to-end testing.
- Using one setup for every page without adapting it.
- Changing several settings at once and losing track of what fixed the problem.