Make your widget responsive

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 03/05/2023

3 min

Beginner

Create and manage your widgets

Create a new widget
Manage your widgets

Create a widget from code

Create a widget from code

Create a widget with the Widget Editor

Access the Widget Editor and select a template
Structure of the Widget Editor
Edit the content of your widget
Make your widget responsive
Add an animation to your widget
Associate events and actions to your widget
Simulate your widget
Save and activate your widget

Create forms

Create forms: introduction
Design your form
Create conditional logic in your forms
Set up rules on your form fields
Send your form data using a URL of your site or via a web service
Send your form data to a Google Sheet
Build a success / error screen

Create HTML blocks

Add a HTML block to your widget
Understand our custom code editor

Create sliders

Add a slider to your widget

Use widgets in your campaigns

Associate a widget with a campaign
A/B test several versions of your widget
Associate a widget with a personalization

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 :

    • Related articles

    Add a HTML block to your widget

    You can add HTML code into your widget, and insert it into a block that you can position or resize like any other (...)

    Understand our custom code editor

    You can create custom CSS or JS code in our widget editor, and apply your custom styles to any widget element or run (...)

    Add a slider to your widget

    You can add sliders to your widgets to make them more dynamic. In this article, you will learn how to: Add a slider (...)