Make your widget responsive

Written by Julie Trenque

Updated on 06/05/2023

3 min


Was this content useful?

Thanks to the Kameleoon Widget Editor, 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 Editor, 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.

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.

  • In this article :