Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt

Use this file to discover all available pages before exploring further.

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. 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-up and banner elements support viewport width (vw) and viewport height (vw) units for true responsiveness.

​
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 leader device for each element, and determine how the element’s settings should be synchronized between the leader device and the other devices. You must choose a synchronization rule for all follower devices. In each element’s General tab, you will find a section called Devices synchronization.
When you open this section, there is a Leader device label with three clickable icons: mobile, tablet, and desktop. By default, the leader device selected is desktop, but you can select another leader device. The settings applied on a leader 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 leader device.
  • Partially synchronized: all styles will be inherited from the leader device until one of the styles changes on a 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.
  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.