You can create custom CSS or JS code in our Widget Studio, and apply your custom styles to any widget element or run your custom scripts on demand.
In this article, you will learn how to:
- Add custom CSS
- Apply your CSS code to widget elements
- Add JS code
- Change code view
How Custom code can help you design your widgets?
A common use case is to allow you to quickly apply the same style to widget elements of your choice, over and over again (rather than manually setting up style properties on each element). If you’re a non-technical user, ask one of your company’s developers to create predefined CSS classes for you.
Add custom CSS and apply it to any element of your widget
- Click on Custom code (last item of the left menu)
- By default, the page opens with the Custom CSS option selected. If this is not the case, click on Custom CSS (below Widget code title).
- Add your CSS code in the right part of the screen. A CSS bookmark will appear on top.
The block with the black background is our built-in code editor. Start typing your CSS code and you will benefit from our smart code completion.
Apply your CSS code to widget elements
- Open the Design section
- Select the element of your choice to be styled according to one of the classes created in the custom code editor.
- Scroll down and unfold section Css and classes
- Add the name of your class in Element ClassName field, or in Container ClassName if you want to apply this class to the parent element.
Please note that at this time, the result will not appear directly in the preview area on the right. You must click on the Preview action (camera icon) to see your change.
Add JS code
Adding JS code allows you to run a custom script on demand in your widget.
- Click on Custom JS (from the panel on the left, in section Widget code).
- Add your JS code in the right part of the screen. A JS bookmark appears on top.
The block with the black background is our built-in code editor. Start typing your JS code and you will benefit from our smart code completion.
- To check the execution of your script, you need to click on the Preview action (camera icon) to see your change.
Below is an example of a script attributing a random background color to the title of our pop-in.
- Change code view:
Do you both work with CSS and JS code? It might be handy to be able to read both your codes at the same time.
- Click the Add Panel icon in the upper right corner to split your code panel into two parts.
- You can then manually resize each part to suit your needs.
- To return to the previous view (a single code panel), just click on the cross to the right of the code bookmark (JS or CSS).
