The widget editor preview only displays the desktop view. To preview or configure your widget on mobile, this article guides you step by step.
Configuration
Context: you have configured a classic widget on desktop, positioned on the right. By default on mobile, a badge will be displayed and you want to adapt its display (to the left).
- In my strategy, go to the "Position" tab > Advanced settings
- Check the option Customize mobile widget and configure your widget
- Click on Test on my website at the top of the preview
- Right-click on the page and select Inspect
💡 Shortcut: Press F12 - Click on the mobile/tablet icon in the toolbar at the top
💡 Shortcut: Ctrl + Shift + M (Windows) or Cmd + Shift + M (Mac) - In the dropdown menu at the top, you can select a device model (e.g.: iPhone 12, Samsung Galaxy S20)
- Perform the desired configuration
- To return to the desktop view, close the right window by clicking on the cross at the top right of your screen
Mobile widget adaptation
The Mobile version preview may be misleading as some widgets automatically adapt by displaying a Badge on mobile.
Indeed, when your visitors browse the mobile version of your site, they are often in more of a hurry and are certainly on a smaller screen. Your widget must therefore be present for those who would appreciate help, while being as unobtrusive as possible during their navigation.
The table below shows the rendering depending on your visitor's device.
| Widget | Desktop Display | Mobile Display |
|---|---|---|
| Embedded Starters | Embedded Starters | Embedded Starters |
| Floating Starters | Floating Starters | Badge |
| Smart Banner | Smart Banner | Badge |
| Classic | Classic | Badge |
| Badge | Badge | Badge |
| Custom button | Custom button | Badge |
| Messaging | Messaging | Badge |
| Mini badge (deprecated) | Mini badge | Mini badge |
| Invitation (deprecated) | Invitation | Badge |
Example: if you enable Floating Starters in your configuration (desktop and mobile), your visitors on mobile will see a Badge displayed.
Best Practices
- Test on multiple device models to check different screen sizes
- Make sure the widget does not hide important content
- Check readability (less visible than your main buttons)
💡 Tip: use the design of your secondary buttons - Always test on real mobile devices before going into production