Home / Widgets

Custom Code Widget

Tech Writers Team @ Ucraft

Last updated on Sep 02, 2024

Use the Custom Code widget to add and embed your own custom HTML, CSS, or JavaScript code into your website. It gives you the flexibility to implement specific features or functionalities that are unique to your website. Make the changes directly on the preferred page or area with the Custom Code widget. You can use the Custom Code widget to customize the appearance of your website beyond the options provided by the templates and styles to modify colors, fonts, layouts, and more. This widget is also applicable for creating dynamic elements, animations, or interactive features on your website.

Adding a Custom Code Widget

To add a Custom Code widget:

  1. Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
  2. Navigate to the required page.
  3. Go to the Widgets list on the Visual Editor Left Panel.

  4. Type the widget name in the search bar, or expand the Advanced group to access the Custom Code widget.

  5. Drag and drop the widget onto the required area of the Layout Canvas.

    Configuring the Custom Code Widget

    To design the appearance and behavior of the Custom Code widget, activate the Property Panel of the widget by clicking it to access the widget Styles, Content, and Settings.

    1. Go to the widget Styles to make the required configuration of general styling features (see Global Styles) to achieve the desired visual and functional outcomes.

    2. Access the widget Content to insert the required code extract.

    3. Access the widget Settings to set its visibility (see Visibility Settings) on the website based on criteria such as your customers' location, session status, device type, browser, language preference, etc., to tailor it to specific user segments or conditions.

    Note:  You can also integrate third-party services, APIs, or tools to be applied to the whole website instead of certain pages. Read more in the Code Injection article.

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.