Widgets Code Injection (CSS and JavaScript) 🖌️
Code injection enables advanced customization for widgets. However, this is a complex feature that requires coding knowledge. Besides, this feature is available with the Business and Enterprise plans only.
Before going further let's speak about Noticeable widgets as this is required to understand where your code will be injected and what is the scope of code you inject.
A Noticeable widget is made of a widget view and an optional trigger view. For instance, when you create a popup widget with an icon using our live editor, the icon is the trigger view and the popup is the widget view. However, not all widgets include a trigger view. That's for example the case of the Newspage Embed Widget that includes a widget view but no trigger view.
The Noticeable SDK is the magic tool creating widgets, linking views and enabling the communication between views of a same widget. When you call noticeable.render(...) with the Noticeable SDK, then an object representation of your widget is created internally and required views are injected in the DOM tree of your page.
What is important to notice at this stage is that trigger views and widget views are rendered as an HTML iframe element. Since views are iframe elements, you have no control over what is loaded in the iframe. The widgets code injection feature aims to correct this by allowing you to inject custom CSS but also JS code directly in a trigger view iframe or a widget view iframe:
Open the Noticeable dashboard.
Click on Widgets in the left menu.
In the list of widgets that appears, open for edition the one where you want to inject code.
The widget editor appears. If you want to inject code in the trigger view of your widget, then click Trigger in the right menu, otherwise select WIdget.
In the list of options that display, you will find one called Custom CSS and another named Custom JS. Fill the corresponding textareas and type "Enter" or click outside the field to save the changes. Any changes are reflected immediately in the live widget.
You have defined custom CSS but styles are not taken into effect? that's most probably because you are not using the right selector(s). Noticeable views make use of web components (custom elements) to reduce coupling and improve re-usability. To style elements inside Noticeable custom elements, we define parts that you can select with the ::part() CSS pseudo-element.
If you need help, drop us a line in the live chat or via email. We will be happy to help.
Before going further let's speak about Noticeable widgets as this is required to understand where your code will be injected and what is the scope of code you inject.
A Noticeable widget is made of a widget view and an optional trigger view. For instance, when you create a popup widget with an icon using our live editor, the icon is the trigger view and the popup is the widget view. However, not all widgets include a trigger view. That's for example the case of the Newspage Embed Widget that includes a widget view but no trigger view.
The Noticeable SDK is the magic tool creating widgets, linking views and enabling the communication between views of a same widget. When you call noticeable.render(...) with the Noticeable SDK, then an object representation of your widget is created internally and required views are injected in the DOM tree of your page.
What is important to notice at this stage is that trigger views and widget views are rendered as an HTML iframe element. Since views are iframe elements, you have no control over what is loaded in the iframe. The widgets code injection feature aims to correct this by allowing you to inject custom CSS but also JS code directly in a trigger view iframe or a widget view iframe:
How to inject code?
Open the Noticeable dashboard.
Click on Widgets in the left menu.
In the list of widgets that appears, open for edition the one where you want to inject code.
The widget editor appears. If you want to inject code in the trigger view of your widget, then click Trigger in the right menu, otherwise select WIdget.
In the list of options that display, you will find one called Custom CSS and another named Custom JS. Fill the corresponding textareas and type "Enter" or click outside the field to save the changes. Any changes are reflected immediately in the live widget.
You have defined custom CSS but styles are not taken into effect? that's most probably because you are not using the right selector(s). Noticeable views make use of web components (custom elements) to reduce coupling and improve re-usability. To style elements inside Noticeable custom elements, we define parts that you can select with the ::part() CSS pseudo-element.
If you need help, drop us a line in the live chat or via email. We will be happy to help.
Updated on: 12/23/2021
Thank you!