---
title: "Code Injection - Serpwise Documentation"
description: "Inject custom CSS and JavaScript through the Serpwise gateway without touching your origin server or deploying code."
url: "https://serpwise.ai/docs/code-injection/"
source: "https://serpwise.ai/docs/code-injection/"
---
[Back to Serpwise](/)

Serpwise Documentation

Connect · Configure · Execute

Search documentation

`/`

No documentation found.

↑↓ Navigate Enter to open

Browse documentation

**Code Injection** lets you append global CSS and JavaScript to every HTML response served by the Serpwise gateway for a domain. It runs at the gateway layer, so changes apply instantly without a code deployment, CMS publish, or CDN purge on your origin.

Common use cases:

- Hide or restyle elements you can’t modify in your CMS (cookie banners, widgets, legacy footers)
- Load third-party analytics, consent, or chat scripts globally
- Add tracking pixels or deferred scripts without touching your theme
- Override styles from a third-party tool embedded on every page

* * *

## How It Works

When a proxied HTML response is returned from your origin, the gateway applies code injection **before** evaluating rules:

1. If **CSS** is set, a `<style>` tag containing your CSS is appended to `<head>`
2. If **Head Scripts** is set, the raw HTML is injected immediately before `</head>`
3. If **Body Scripts** is set, the raw HTML is injected immediately before `</body>`

Rule actions run after code injection, so rule-based HTML modifications (like `inject_html`) are applied on top of globally injected code.

* * *

## Configuration

Navigate to your domain in the dashboard, click the **Code** tab, and fill in any combination of the three fields.

### CSS

Injected as a `<style>` tag appended inside `<head>`.

**Example - hide a cookie banner:**

```
.cookie-banner,
#CybotCookiebotDialog {
  display: none !important;
}
```

**Example - fix a layout issue across all pages:**

```
.sidebar {
  max-width: 280px;
}
```

Up to 50 KB.

* * *

### Head Scripts

Raw HTML injected immediately before `</head>`. Use this for scripts that must load early - analytics initialization, consent managers, font preloads, and similar.

**Example - Google Tag Manager:**

```
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
```

**Example - preload a custom font:**

```
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" as="style">
```

Up to 50 KB.

* * *

### Body Scripts

Raw HTML injected immediately before `</body>`. Use this for deferred scripts - tracking pixels, chat widgets, and anything that should load after the page content.

**Example - Intercom chat widget:**

```
<script>
  window.intercomSettings = { app_id: "your_app_id" };
</script>
<script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){
ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;
var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};
w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';
s.async=true;s.src='https://widget.intercom.io/widget/'+w.intercomSettings.app_id;
var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};
if(document.readyState==='complete'){l();}else if(w.attachEvent){
w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();</script>
```

**Example - Facebook Pixel:**

```
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
```

Up to 50 KB.

* * *

## Idempotent Scripts for SPAs and Shopify

* * *

## Saving and Applying Changes

1. Fill in any combination of the CSS, Head Scripts, and Body Scripts fields
2. Click **Save Code Injection**
3. Trigger a cache invalidation for your domain so the gateway reloads its config

Changes are applied to all subsequent requests once the gateway cache is refreshed. Existing cached pages at your CDN layer may need a separate purge depending on your CDN configuration.

* * *

## Code Injection vs. Rule Actions

|          | Code Injection                                                                   | `inject_html` Rule Action                          |
|----------|----------------------------------------------------------------------------------|----------------------------------------------------|
| Scope    | Every page on the domain                                                         | Pages matching rule conditions                     |
| Position | CSS → `<head>`, Head Scripts → before `</head>`, Body Scripts → before `</body>` | `head_start`, `head_end`, `body_start`, `body_end` |
| Runs     | Before rules                                                                     | During rule evaluation                             |
| Best for | Global scripts and styles                                                        | Page-specific snippets                             |

Use Code Injection for sitewide global code. Use `inject_html` rule actions when you need to target specific pages, URL patterns, or bot traffic.

* * *

## Limitations

- **50 KB per field** - CSS, Head Scripts, and Body Scripts each have a 50 KB maximum
- **HTML only** - Head Scripts and Body Scripts accept raw HTML, not bare JavaScript; wrap scripts in `<script>` tags
- **All pages** - there is no per-page filtering in Code Injection; use rule actions for conditional injection
- **Non-HTML responses are not modified** - JSON, images, and other non-HTML content types are skipped