> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.noticeable.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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_. 

![A popup widget with its trigger and widget views](https://storage.crisp.chat/users/helpdesk/website/55d6234c11240c00/screenshot-from-2021-12-23-00-_1e6sfgi.png)


The [Noticeable SDK](/en-us/article/how-to-use-the-noticeable-javascript-sdk-7k5kc2/) 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:

![](https://storage.crisp.chat/users/helpdesk/website/55d6234c11240c00/noticeable-widgets-code-inject_byrh9i.png)

## How to inject code?

1. Open the Noticeable dashboard.
2. Click on *Widgets* in the left menu.
3. In the list of widgets that appears, open for edition the one where you want to inject code.
4. 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*.
5. 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](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). 

![](https://storage.crisp.chat/users/helpdesk/website/55d6234c11240c00/screenshot-from-2021-12-23-16-_1tsi8un.png)

If you need help, drop us a line in the live chat or via email. We will be happy to help.