Serpwise AI

Inject custom CSS and JavaScript into every page served through the SerpWise gateway — without touching your origin server or deploying code.

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

Code Injection applies to every page on the domain. For page-specific injection, use the inject_html rule action with URL conditions instead.

How It Works

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

If CSS is set, a <style> tag containing your CSS is appended to <head>
If Head Scripts is set, the raw HTML is injected immediately before </head>
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

When injecting scripts into Single Page Applications (SPAs) or platforms like Shopify that use client-side routing, ensure your scripts are idempotent (safe to run multiple times).

Because the gateway injects code into HTML responses, client-side navigations might cause scripts to be executed again. Prevent double execution by wrapping your logic:

<script>
  if (!window.myScriptLoaded) {
    window.myScriptLoaded = true;
    // Your script logic here
  }
</script>

Saving and Applying Changes

Fill in any combination of the CSS, Head Scripts, and Body Scripts fields
Click Save Code Injection
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 injects content into every HTML page on the domain. Do not inject scripts with document.write() or anything that blocks page rendering — prefer async or defer attributes on script tags.

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

Code Injection

On this page