Skip to main content
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 →
  • Test & demonstrate SaaS applications like website widgets and monitoring scripts on target websites.
    Learn more →

​
How to Configure the Rule

1

Open HTTP Rules and Create a New Rule

Navigate to the HTTP Rules tab in the web or desktop app. Click on + New Rule and select Insert Script from the options.
2

Name and Describe Your Rule

Provide a descriptive name for the rule to keep your setup organized. Optionally, add a brief description explaining its purpose for easier identification later.
3

Define the Source Condition

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.

Example:

To apply a rule on our demo website, use the following configuration:
  • Condition Type: URL
  • Operator: Contains
  • Value: requestly-playground.com
This example targets any requests made to the Requestly Playground, ensuring the script is applied wherever the URL contains requestly-playground.com.
4

Select the Code Source

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.
  • URL
  • Custom Code
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 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.
5

Choose whether to inject CSS styles or JavaScript code

You can add either CSS styles or JavaScript code:
  • CSS
  • JavaScript
To Add CSS Styles→ Insert the following code to modify the web page’s styling:
<style type="text/css">
  .product-card {
    background-color: #e0ffe5;
  }
  .product-image {
    mix-blend-mode: darken;
  }
</style>
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
6

[Optional] Add Custom Attributes to Scripts

While injecting JavaScript, you can enhance the <script> tag by adding custom attributes. This is useful when you want to fine-tune how the script behaves in the browser, improve debugging, support conditional handling, or pass configuration data.Requestly lets you define these attributes directly in the Insert Script Rule interface. You can specify standard or custom attributes like defer, async, crossorigin, data-*, and more all depending on your use case.
<script 
  src="https://example.com/script.js" 
  id="custom-script"
  defer 
  crossorigin="anonymous" 
  data-source="requestly" 
  data-widget-id="tracking-xyz">   
</script>
7

Decide whether to insert the script before or after the page load.

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
8

Save and Activate the Rule

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.
9

Test 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.ORHere, you can see that the rule has been applied, and the styles defined in the CSS are applied to the page.
⌘I