Skip to main content
The Custom code section in the left sidebar holds a code editor where you write custom CSS to style widget elements and custom JS to run a script in your widget. Custom CSS and custom JS are both optional. You can use one or both in the same widget. In this article, you will learn how to:
  • Add custom CSS code
  • Apply CSS code to widget elements
  • Add JS code
  • Show multiple code editors
Widget Studio Custom code view, with Custom CSS selected and an example CSS comment in the editor

​
Example use case

A common use case of custom code is applying the same style to widget elements multiple times, rather than manually setting up style properties on each element. If you’re a non-technical user, ask one of your developers to create predefined CSS classes for you.

​
Add custom CSS code

  1. Click Custom code in the left sidebar. The page opens with the Custom CSS option selected.
  2. Add your CSS code in the code editor.

​
Apply CSS code to widget elements

  1. Open the Design section.
  2. Select the element that you want to style with one of your classes.
  3. Scroll down and expand the CSS and classes section.
  4. Add your class’s name in the Element ClassName field, or in Container ClassName if you want to apply this class to the parent element.
The right preview area doesn’t show your custom styles until you click the camera icon.

​
Add JS code

Adding JS code lets you write a custom script for your widget.
  1. Click Custom code in the left sidebar.
  2. Click Custom JS.
  3. Add your JS code in the code editor.
To check your script’s execution, click the camera icon.

​
Show multiple code editors

If you’re working with both CSS and JS code, you may want to view both at the same time. To show multiple code editors:
  1. Click the Add Panel icon in the upper-right corner of the code editor.
  2. Manually resize each panel to suit your needs.
To close a panel, click the X to the right of the code bookmark (JS or CSS).