Snippet Injection

Overview

You can inject snippets with Stormkit. This is extremely helpful to manage third-party scripts like:

Analytics tools (Google Analytics, Plausible, etc.)
Chat widgets (Intercom, Drift, etc.)
A/B testing tools
Marketing pixels
Custom JavaScript or CSS

These snippets are handled at an environment level, which makes it possible to inject different snippets based on the environment.

The effects are immediate - you won’t have to redeploy when enabling or disabling snippets.

Accessing Snippets

To manage snippets:

Click on an environment
Look for the Snippets menu item in the left sidebar
This page will display all snippets defined for this environment
You can turn them on and off easily with a switch

Adding a New Snippet

Navigate to Snippets

From your environment dashboard, click on Snippets in the left sidebar

Create snippet

Click on New snippet button. A modal will pop up.

Configure snippet

Fill in the snippet configuration (see settings below)

Save

Click save. The snippet will be applied immediately if enabled.

Snippet Settings

Setting	Description
Title	The title is used internally to describe what the snippet is about.
Content	This is the content that will be injected in the document. Can be HTML, JavaScript, or CSS.
Location	The location specifies where to inject the snippet. You can inject it in either body or head and you can either append or prepend them.
Enabled	Whether the snippet is enabled or disabled. Effects are immediate, you won’t have to redeploy.
Hosts	Stormkit allows you to configure multiple domain names for your project. You can apply specific snippet for each domain.
Path	The regular expression determines where the snippet will be applied. You can test your expression via regex101

Location Options

Head (Prepend)

Injects the snippet at the beginning of the <head> tag. Best for critical CSS or meta tags.

Head (Append)

Injects the snippet at the end of the <head> tag. Commonly used for analytics scripts.

Body (Prepend)

Injects the snippet at the beginning of the <body> tag. Good for above-the-fold content.

Body (Append)

Injects the snippet at the end of the <body> tag. Best for non-critical scripts that shouldn’t block page rendering.

Common Use Cases

Google Analytics

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Location: Head (Append) Path: .* (all pages)

Custom CSS

<style>
  .custom-banner {
    background: #007bff;
    color: white;
    padding: 10px;
    text-align: center;
  }
</style>

Location: Head (Append) Hosts: Specific domains only

<script>
  (function() {
    // Chat widget initialization code
    window.chatWidget = { /* config */ };
  })();
</script>

Location: Body (Append) Path: ^/(?!admin).* (all pages except /admin)

<div class="staging-banner" style="background: orange; padding: 10px; text-align: center;">
  ⚠️ This is a staging environment
</div>

Location: Body (Prepend) Enabled: Only on staging environment

Host Filtering

If you have multiple domains configured for your environment, you can specify which domains should display the snippet:

Leave empty to apply to all domains
Add specific domains (e.g., example.com, www.example.com)
Add multiple domains separated by commas

Path Filtering with Regex

Use regular expressions to control which pages display the snippet:

Pattern	Matches
`.*`	All pages
`^/$`	Homepage only
`^/blog/.*`	All blog pages
`^/(?!admin).*`	All pages except admin
`\.(html\|htm)$`	Only HTML files

Test your regular expressions using regex101 before applying them.

Managing Snippets

Enable/Disable

Toggle the switch next to any snippet to enable or disable it immediately without redeploying.

Edit

Click on a snippet to edit its configuration. Changes take effect immediately.

Delete

Remove snippets you no longer need to keep your environment clean.

Best Practices

Use descriptive titles - Make it easy to identify snippets at a glance
Test on staging first - Verify snippets work correctly before applying to production
Keep snippets focused - One snippet per purpose (analytics, chat, etc.)
Use path filtering - Only inject snippets where needed to improve performance
Monitor performance - Heavy snippets can slow down your site
Environment-specific snippets - Use different snippets for staging/production (e.g., test analytics IDs)

Troubleshooting

Snippet not appearing

Check that the snippet is enabled (toggle switch)
Verify the path regex matches your current URL
Ensure the host filter includes your domain
Check browser console for JavaScript errors
Clear browser cache and reload

Snippet appearing on wrong pages

Review the path regex pattern
Test your regex at regex101
Check if multiple snippets are conflicting

Performance issues

Move non-critical snippets to Body (Append)
Use async/defer attributes for script tags
Consider using path filtering to limit scope
Review if all snippets are necessary

Get Started

Self-Hosting

Deployments

Features

Contributing

Snippet Injection

Overview

Accessing Snippets

Adding a New Snippet

Snippet Settings

Location Options

Head (Prepend)

Head (Append)

Body (Prepend)

Body (Append)

Common Use Cases

Google Analytics

Custom CSS

Chat Widget

Environment-Specific Banner

Host Filtering

Path Filtering with Regex

Managing Snippets

Enable/Disable

Edit

Delete

Best Practices

Troubleshooting

​Overview

​Accessing Snippets

​Adding a New Snippet

​Snippet Settings

​Location Options

Head (Prepend)

Head (Append)

Body (Prepend)

Body (Append)

​Common Use Cases

​Google Analytics

​Custom CSS

​Chat Widget

​Environment-Specific Banner

​Host Filtering

​Path Filtering with Regex

​Managing Snippets

​Enable/Disable

​Edit

​Delete

​Best Practices

​Troubleshooting

Overview

Accessing Snippets

Adding a New Snippet

Snippet Settings

Location Options

Common Use Cases

Google Analytics

Custom CSS

Chat Widget

Environment-Specific Banner

Host Filtering

Path Filtering with Regex

Managing Snippets

Enable/Disable

Edit

Delete

Best Practices

Troubleshooting