> ## Documentation Index
> Fetch the complete documentation index at: https://interceptor-docs.requestly.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Insert Scripts
> Learn how to use Requestly Interceptor's Insert Script Rule to inject JavaScript or CSS into web pages without changing the original code
***
The **Insert Scripts** Rule allows you to inject JavaScript/CSS into web pages before/after they load. This means you can modify the DOM, change styles, or even add new functionality without altering the source code directly. It’s important for testing hypotheses or debugging during development and quality assurance processes.
To see how the Insert Script Rule can be configured and applied in different scenarios, watch the video below, where we demonstrate its usage and potential
## Why Use the Insert Script Rule?
* Inject popular libraries or hosted scripts or execute custom code snippets on or after page load using a simple rule builder.\
[Learn more →](https://requestly.com/blog/how-to-inject-a-script-before-page-load-on-a-website/)
* Test & demonstrate SaaS applications like website widgets and monitoring scripts on target websites.\
Learn more →
## **How to Configure the Rule**
Navigate to the `HTTP Rules` tab in the web or desktop app. Click on `+ New Rule` and select `Insert Script` from the options.
Provide a **descriptive name** for the rule to keep your setup organized. Optionally, add a **brief description** explaining its purpose for easier identification later.
Define where the rule should be applied by specifying criteria such as **URL**, **Host**, or **Path**. You can choose from options like **Regex**, **Contains**, **Wildcard**, or **Equals**, or use **Advance Filters** for more precise conditions.
For more details on source conditions, [**read this guide**.](/http-rules/advanced-usage/advance-targeting)
To apply a rule on [our demo website](https://www.requestly-playground.com/), use the following configuration:
* **Condition Type:** URL
* **Operator:** Contains
* **Value:** `requestly-playground.com`
This example targets any requests made to the [**Requestly Interceptor Play**](/http-rules/advanced-usage/advance-targeting)[**ground**](https://requestly-playground.com), ensuring the script is applied wherever the URL contains `requestly-playground.com`.
You have **two options** for the code source:
1. **Custom Code:** Directly paste your script or CSS into the editor (used in the examples below).
2. **URL:** Provide a link to an external file containing the script or CSS.
In the **URL** option, add a link to an external file containing the script or CSS.
> **You can also pick the response from the Requestly Interceptor File Server using the** `Pick from File Server` **feature.** This allows you to inject scripts or JSON responses hosted on the File Server directly into your rule.
In the **Custom Code** option, you can directly paste your script or CSS into the editor.
Here, we are using **Custom Code** as it allows you to easily add and test your code directly.
You can add either CSS styles or JavaScript code:
**To Add CSS Styles→** Insert the following code to modify the web page's styling:
```xml theme={null}
```
This code changes the background colour of product cards to a light green (`#e0ffe5`) and adjusts the product images' blend mode.
You can also import this rule and apply it directly by using this\
→**shared list**
**Add JavaScript Code →** Insert the following script to display an alert message:
```xml theme={null}
```
This JavaScript code triggers an alert with the message `Script injected successfully!` to confirm the rule is active.
You can also import this rule and apply it directly by using this\
→ **shared list**
While injecting JavaScript, you can enhance the `
```
If you are injecting **CSS**, it is applied automatically as soon as the rule is executed.
This option is available **only when injecting JavaScript**
* **As Soon As Possible:** The script will be injected as soon as the page starts loading.
* **After Page Load:** The script will be injected after all page content has fully loaded
Once you are satisfied with your configuration, click **Save** to store the rule. After saving, make sure to toggle the rule **ON** to activate it. This will apply the rule.
There are multiple ways to validate if a rule is applied or not, learn more about how to `validate rule execution`**.**
To ensure the rule is working correctly, click the **Test** button and enter the URL of the page where you want to apply this rule.
A confirmation widget will appear to indicate if the rule has been successfully applied.
Here, you can see that the rule has been applied, and an alert displays the message **Script Injected Successfully.**
`OR`
Here, you can see that the rule has been applied, and the styles defined in the CSS are applied to the page.
## **How to Configure the Rule**
A confirmation widget will appear to indicate if the rule has been successfully applied.
Here, you can see that the rule has been applied, and an alert displays the message **Script Injected Successfully.**
`OR`
Here, you can see that the rule has been applied, and the styles defined in the CSS are applied to the page.