Skip to main content

Responsive widgets

You can make your widget adaptable to your visitors' devices using the Kameleoon Widget Studio. Your widget is automatically responsive, but you can make changes to optimize user experience.

Switch between devices​

At the top of the Widget Studio, you can preview your widget on different devices (mobile, tablet, desktop) to ensure it's displaying correctly.

You can make changes to any of these views.

Edit the view on a device​

You can customize your widget's elements based on the device it is displayed on. Customize your widget by device to optimize visitors' viewing experience.

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 will not 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.

Devices synchronization​

With devices synchronization, you can designate a master device for each element, and determine how the element's settings should be synchronized between the master device and the other devices. You must choose a synchronization rule for all slave devices.

In each element's General tab, you will find a section called Devices synchronization.

When you open this section, there is a Master device label with three clickable icons: mobile, tablet, and desktop. By default, the master device selected is desktop, but you can select another master device. The settings applied on a master device will be 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.

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 a device.
  • No synchronization: none of the element's settings are synchronized with the master 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.
  2. Select your conditions.
  3. Click Add action > Elements.

You can now choose to show or hide a specific element.

If you previously hid an element on a specific device (in the three-dots menu), it is indicated by icons in the pop-in.