Thanks to the Kameleoon Widget Studio, your widget is adaptable to your visitors’ devices. Your widget is automatically responsive, but you can make changes, such as not displaying certain elements on mobile devices, in order to optimize the user experience.
Switch between devices
At the top of the Widget Studio, you can change the view depending on the device (mobile, tablet, desktop) to make sure your content is exactly displayed the way you want.
You can easily make changes to any of these views, as we will see in this article.
Edit the view on a device
You can adapt the elements of your widget depending on the device on which it is displayed. Customize your widget by device to ensure optimal viewing experiences.
Desktop priority
Start by adding all the elements on the Desktop view which is the default configuration.
Then you can adapt your design to another device if needed (mobile/tablet). Changes made to another device remain specific to that device and will not impact the others.
Edit an element on a specific device
To edit an element on a specific device, click on one of the 3 icons at the top of the page to choose a device type.
Then edit your element.
Hide an element on a specific device
Select the element of your choice, and click to open the 3-dot menu. Then, click on the device icons to show or hide this element on this device.
Devices synchronization
With devices synchronization you can designate a master device for each element, and determine how the settings of the element should be synchronized between the master device and the other devices. This is achieved by choosing an appropriate synchronization rule for all slave devices.
In the General tab of each element, you will find a dedicated section named Devices synchronization.
When you open this section, you will find a label named Master device with 3 clickable icons: one for each device (mobile/tablet/desktop). By default, the master device selected is the desktop, but you can select another master device for the element. The settings applied on a master device will be replicated in all other devices that are fully or partially synchronized with it.
Using the dropdown button, you can select the synchronization option to apply for each device based on the master device settings. It is a mandatory setting. By default, the synchronization rule applied for each device is “Partially synchronized”.
The status of a device can be:
- Fully synchronized: properties, position, size & states of the element are synchronized with the master device.
- Partially synchronized: all styles will be inherited from the master device until one of the styles changes on some device.
- No synchronization: none of the settings of the element are synchronized with the master device.
- Hide: the element is not visible on the device.
In the example above, the master device is the mobile phone, and the element is hidden on the other devices.
Set up a “Device” type event
You can also configure an event to customize the display of your widget’s elements depending on the device.
Click on + Add event to associate a new event. Then click on Device.
Select one of the options. Depending on what you set, the condition can be true :
- either when the device is the selected one (for example is a mobile);
- or when the device is not the selected one (for example is not a computer).
Click on Add action inside the event, then click on Elements.
You can choose to show or hide a specific element.
If you have previously chosen to hide an element on a specific device (in the 3-dot menu), specific icons indicate it in the pop-in.
