Skip to main content
Your widget adapts to each visitor’s device by default. You can still change its elements for each device, so visitors see a layout that suits their screen. By default, elements use percentages instead of pixels (px) for more flexible layouts. Decimal values are supported for percentage sizing, and default templates automatically apply percentages for element sizing. Additionally, pop-in and banner elements support viewport width (vw) and viewport height (vh) units.

​
Switch between devices

At the top of the Widget Studio, you can preview your widget on different devices (mobile, tablet, desktop) to check that it displays correctly.
Device selector with mobile, tablet, and desktop icons, desktop selected
You can make changes to any of these views.

​
Edit the view on a device

You can customize each element for each device. Visitors then see the layout set for their device.

​
Desktop priority

Add all elements to the Desktop view, which is the default configuration. You can adapt your design to another device if needed (mobile/tablet). Changes made to another device remain specific to that device and don’t affect the others.

​
Edit an element on a specific device

To edit an element on a specific device, click one of the device icons at the top of the page, then edit the element.

​
Hide an element on a specific device

To hide an element on a specific device:
  1. Select the element you’d like to hide.
  2. Click the three-dots menu.
  3. Click a device icon to hide the element.
Element list with Text1, Email, Button, Image, and Background, and the Image menu open with Edit, Rename, Duplicate in, Hide, and Delete

​
Devices synchronization

With devices synchronization, you can designate a leader device for each element, and determine how the element’s settings should be synchronized between the leader device and the other devices. You can choose a synchronization rule for each follower device. Each element’s General tab contains a Devices synchronization section.
Devices synchronization section with Leader device icons, desktop selected, and Tablet and Mobile set to Partially synchronized
When you open this section, there is a Leader device label with three clickable icons: mobile, tablet, and desktop. By default, the leader device is desktop, but you can select another one. The settings applied on a leader device are replicated on all other devices that are fully or partially synchronized with it. You can select the synchronization option using the dropdown menu. By default, the synchronization rule you apply to each device is Partially synchronized. Each device uses one of these synchronization options:
  • Fully synchronized: properties, position, size, and states of the element are synchronized with the leader device.
  • Partially synchronized: all styles are inherited from the leader device until a style changes on that device.
  • No synchronization: none of the element’s settings are synchronized with the leader device.
  • Hide: the element is not visible on the device.

​
Set up a “Device” type event

You can also configure an event to customize the display of your widget’s elements depending on device. To add a Device type event:
  1. Click + Add event > Device, then click Next.
Create new event dialog with Survey, Language, Timer, Custom Data Value, and Device options, Device highlighted, plus Cancel and Next buttons
  1. Select your conditions.
  2. Click Add action.
You can now choose to show or hide a specific element.
Actions section with the Select an action dropdown open, listing Show an element, Hide an element, and Show a screen