> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/stormkit-io/stormkit-io/llms.txt
> Use this file to discover all available pages before exploring further.
# Snippet Injection
> Inject and control 3rd party scripts through Stormkit UI without redeploying.
## 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:
1. Click on an environment
2. Look for the **Snippets** menu item in the left sidebar
3. This page will display all snippets defined for this environment
4. You can turn them on and off easily with a switch
## Adding a New Snippet
From your environment dashboard, click on **Snippets** in the left sidebar
Click on **New snippet** button. A modal will pop up.
Fill in the snippet configuration (see settings below)
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](https://regex101.com/r/dX8cN8/1) |
## Location Options
Injects the snippet at the beginning of the `` tag. Best for critical CSS or meta tags.
Injects the snippet at the end of the `` tag. Commonly used for analytics scripts.
Injects the snippet at the beginning of the `` tag. Good for above-the-fold content.
Injects the snippet at the end of the `` tag. Best for non-critical scripts that shouldn't block page rendering.
## Common Use Cases
### Google Analytics
```javascript theme={null}
```
**Location:** Head (Append)
**Path:** `.*` (all pages)
### Custom CSS
```html theme={null}
```
**Location:** Head (Append)
**Hosts:** Specific domains only
### Chat Widget
```html theme={null}
```
**Location:** Body (Append)
**Path:** `^/(?!admin).*` (all pages except /admin)
### Environment-Specific Banner
```html theme={null}
⚠️ This is a staging environment
```
**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](https://regex101.com/r/dX8cN8/1) 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
* 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
* Review the path regex pattern
* Test your regex at [regex101](https://regex101.com/r/dX8cN8/1)
* Check if multiple snippets are conflicting
* 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