To check how your widget looks on mobile directly on your website, use the Widget Editor test mode together with your browser's responsive view. This article guides you step by step.

Configuration

Example: your strategy targets Desktop & Mobile and displays a Classic widget positioned on the right. On mobile, this widget is displayed as a Badge, and you want to move this Badge to the left.

In your strategy, open the Position tab, then expand Advanced settings.
Turn on Customize mobile widget, then choose the position (Bottom left or Bottom right) and the distances (Distance from side, Distance from bottom).
Click Test on my website at the top of the preview. The strategy is saved and your website opens in test mode, in the same tab.
Right-click on the page and select Inspect.
💡 Shortcut: F12 (Windows) or Cmd + Option + I (Mac)
Click 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, select a device model (for example iPhone 12 or Samsung Galaxy S20).
Check how your widget looks.
To go back to the desktop view, close the developer tools panel by clicking the cross at the top right.

NB In test mode, the mobile view is displayed as soon as the window is less than 768 px wide or a mobile device is emulated. No need to reload the page.

⚠ The Test on my website button only appears if the iAdvize tag is detected on your website.

Embedded Conversation Starters

The mobile position is set with the Personalize the mobile widget position checkbox, at the bottom of the Position tab. Once checked, it opens the Position for mobile block: CSS selector, placement and margins specific to mobile.

NB This checkbox only appears for a strategy targeting Desktop & Mobile. If you then switch the strategy to Desktop or Mobile, the mobile customization is cleared.

Mobile widget adaptation

On mobile, your visitors often browse faster and on a smaller screen. Your widget must remain available to those who need help, while being as unobtrusive as possible. This is why some widgets are automatically displayed as a Badge on mobile.

The strategy preview shows the desktop view, the mobile view or both, depending on the Device selected in the Widget and conditions tab.

The table below shows the rendering depending on your visitor's device.

Widget	Desktop display	Mobile display
Embedded Conversation Starters	Embedded Conversation Starters	Embedded Conversation Starters
Floating Conversation Starters	Floating Conversation Starters	Floating Conversation Starters
Smart banner (available on request)	Smart banner	Badge
Classic	Classic	Badge
Badge (Mobile strategy only)	–	Badge
Custom button	Custom button	Custom button
Messaging	Messaging	Badge
Mini badge (deprecated)	Mini badge	Mini badge
Invitation (deprecated)	Invitation	Badge

Example: with a Classic widget on a Desktop & Mobile strategy, your mobile visitors see a Badge. The editor shows it on the widget card: "Desktop: Classic", "Mobile: Badge".

Best practices

Test on several device models to check different screen sizes.
Make sure the widget does not hide important content.
Keep the widget unobtrusive, less visible than your main buttons.
💡 Tip: reuse the design of your secondary buttons.
Before going live, also test on real mobile devices.