Skip to main content
A simulation runs your widget on the URL you entered when you created it, so you can check how it looks and behaves before it goes live. Kameleoon recommends checking your widget in a simulation before you link it to a campaign. To simulate your widget:
  1. Click Simulate in the header of the Widget Studio.
  2. Set the options in the sidebar. See Settings.
  3. Click Simulate to launch the simulation.
Widget Studio toolbar with undo and redo arrows, a Simulate button, an accessibility button, and a blue Activate button
You can check the changes made to your widget and verify its settings (for example, whether events fire).

​
Settings

You can choose to position your widget Fixed in-page or Above the page. This selection affects which settings are available.

​
Fixed in-page

Simulation panel with Fixed in-page selected, a CSS selector field, Before, Replace, and After positions, device choices, and the JS & CSS code output
  • Position: If you select Fixed in-page, your widget appears fixed among the page’s content.
  • Anchor element: Enter the CSS selector of the element used as a reference for your widget’s position.
  • Anchor position: Select the widget’s position relative to the anchor element: Before, Replace, or After.
  • Devices: Choose the devices where the widget appears.
  • Code output:
    • JS & CSS: The widget is inserted into the main DOM with JavaScript and its styles are applied using regular CSS.
      • This option is best for widgets that should blend with your site’s design or when you want to restyle or adapt the widget.
    • JS with Shadow DOM: The widget is injected with JavaScript, but its HTML and CSS live inside a Shadow DOM (an isolated subtree of the DOM).
      • This option is best for complex, self-contained widgets that must behave the same everywhere or when stability matters more than customization.
      • The Shadow DOM protects your widget from external CSS and other styling rules.

​
Above the page

Simulation panel with Above the page selected, device choices, JS & CSS code output selected, and a disabled Simulate button
  • Position: If you select Above the page, your widget appears above your page’s content.
  • Devices: Choose the devices where the widget appears.
  • Code output:
    • JS & CSS: The widget is inserted into the main DOM with JavaScript and its styles are applied using regular CSS.
      • This option is best for widgets that should blend with your site’s design or when you want to restyle or adapt the widget.
    • JS with Shadow DOM: The widget is injected with JavaScript, but its HTML and CSS live inside a Shadow DOM (an isolated subtree of the DOM).
      • This option is best for complex, self-contained widgets that must behave the same everywhere or when stability matters more than customization.
      • The Shadow DOM protects your widget from external CSS and other styling rules.

​
Launch the simulation

The simulation opens on the URL you entered when creating your widget. You can test your widget and verify its behavior (for example, ensure animations work correctly if they were set).