Custom Code Integration with JS/HTML

The Custom Code Integration feature allows you to seamlessly embed personalized JavaScript or HTML code into your webpage. This capability enables you to introduce unique components, offering you a high degree of creativity and flexibility to design a customized user experience that perfectly matches your vision.

Basic Configuration

Component Name or Label
In the Basic Configuration section, you’ll find the default name or label for the component you’re editing. You also have the option to rename it to better organize multiple elements, ensuring each one is easily identifiable as you work through different sections of your project.

Launch Code Editor
The Launch Code Editor button opens a popup window where you can enter your custom JavaScript or HTML code. This functionality provides an easy way to paste or type in code, helping you personalize your webpage's look and feel while enhancing the functionality of individual elements.

Layout Adjustment Options
These settings give you control over the spacing and positioning of your content. Each setting will apply only to the element you're editing. For instance, when adjusting a specific section (highlighted with a blue border), any changes will only affect the contents within that section.

• Padding Controls (Top, Bottom, Left, Right): Adjust the position of the content by toggling sliders to move the content in the specified direction.
• Margin Controls (Top, Bottom): You can set the space above or below your element by using the top or bottom margin toggles.

Display Settings
This feature allows you to manage whether certain components are visible on desktop, mobile, or both. It helps optimize the webpage’s appearance and functionality based on the device, ensuring that users get the best experience regardless of platform.

Custom Style Classes
By entering a specific class name in the Custom Style field, you can apply predefined styles to individual elements of your webpage. This feature allows you to connect your elements to custom CSS definitions, giving you more control over your webpage’s design.

CSS Code Snippets
For quick access to your custom CSS code, you can click the copy icon next to the CSS reference. This feature simplifies the process of copying and applying CSS selectors across different parts of your webpage.