---
title: "How to add features to your site via snippet injection"
description: "Learn how to add analytics or temporary features to your site using code snippets injection"
source: "https://www.netlify.com/blog/2021/12/20/how-to-add-features-to-your-site-via-snippet-injection/"
last_updated: "2026-07-10T21:07:22.000Z"
---
> Throughout December we’ll be [highlighting a different Netlify feature each day](https://www.netlify.com/blog/2021/12/01/highlighting-a-different-netlify-feature-each-day-in-december/?utm_campaign=featdaily21&utm_source=netlify&utm_medium=blog&utm_content=snippet-injection). It might just be the thing you need to unlock those creative juices, and [dust off that domain](https://www.netlify.com/blog/2021/12/01/dusty-domains-your-forgotten-domains-raise-money-for-charity/?utm_campaign=featdaily21&utm_source=netlify&utm_medium=blog&utm_content=snippet-injection) you registered but never deployed! Keep an eye [on the blog](https://www.netlify.com/blog/2021/12/01/highlighting-a-different-netlify-feature-each-day-in-december/?utm_campaign=featdaily21&utm_source=netlify&utm_medium=blog&utm_content=snippet-injection) and on [Twitter](https://twitter.com/netlify) for each feature!

Want to add some small temporary feature to your site? What about doing it via snippet injection!

Snippet injection allows you to insert a bit of code to your site at the CDN level so you don’t have to add it to your source code. This way, anyone on your team can quickly add or remove some functionality without having to be familiar with the codebase.

Under your site’s settings in Netlify, navigate to **Build & Deploy > Post processing > Snippet injection**.

From there, you can decide if you’d like the code to be added to the `</head>` or `</body>`, pick a name for your script, paste the HTML and you’re done!

## Example

As a quick demo of how this works, let’s add [elevator.js](https://github.com/tholman/elevator.js) by [Tim Holman](https://twitter.com/twholman) to a site via snippet injection!

For this, you can add 2 scripts, the first one in the `</head>` tag to load the library:

```
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevator.js/1.0.1/elevator.min.js"></script>
```

And the second one in the `</body>` tag to create an `Elevator` instance and trigger it when clicking on the footer of your site (or any other element of your choice):

```
<script>    window.onload = function() {    var elevator = new Elevator({        element: document.querySelector('footer'),        mainAudio: 'https://github.com/tholman/elevator.js/blob/master/demo/music/elevator.mp3?raw=true',        endAudio: 'https://github.com/tholman/elevator.js/blob/master/demo/music/elevator.mp3?raw=true'    });    }</script>
```

Once these 2 scripts are added, it should look like this in the Netlify UI:

![Screenshot of the elevator.js library loaded in a script tag in the </head> and code snippet above loaded in a second snippet in the </body>](/v3/img/blog/advent-snippet-injection.png)

Now, when you visit your site, scroll to element you want to use as trigger and click on it, you should start hearing that sweet elevator music!

## More information

-   [Docs: Snippet injection](https://docs.netlify.com/site-deploys/post-processing/snippet-injection/?utm_campaign=featdaily21&utm_source=netlify&utm_medium=blog&utm_content=snippet-injection)
-   [Docs: Handle snippets via the API](https://docs.netlify.com/api/get-started/?utm_campaign=featdaily21&utm_source=netlify&utm_medium=blog&utm_content=snippet-injection#snippets)

### Share

-   [X (fka Twitter)](https://twitter.com/intent/tweet?text=How to add features to your site via snippet injection&url=https://www.netlify.com/blog/2021/12/20/how-to-add-features-to-your-site-via-snippet-injection//)
-   [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2021%2F12%2F20%2Fhow-to-add-features-to-your-site-via-snippet-injection%2F%2F)
-   [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2021/12/20/how-to-add-features-to-your-site-via-snippet-injection//)
-   [Bluesky](https://bsky.app/intent/compose?text=How to add features to your site via snippet injection+https://www.netlify.com/blog/2021/12/20/how-to-add-features-to-your-site-via-snippet-injection//)

* * *

### Tags

-   [Tips](/blog/tags/tips/)

## Keep reading

![](/images/blog-fallback-thumbnail.svg)

Guides & Tutorials December 1, 2021

[

### Highlighting a different Netlify feature each day in December

](/blog/2021/12/01/highlighting-a-different-netlify-feature-each-day-in-december)

-   ![Profile picture of Phil Hawksworth](/_astro/9cfe2bbe94bcb555ce3ac7683ac7905ad3fd32b1-400x400_Z18H6R1.webp)
    
    Phil Hawksworth
    

![](/images/blog-fallback-thumbnail.svg)

Guides & Tutorials December 14, 2020

[

### Add Web Monetization to your sites with Snippet Injection

](/blog/2020/12/14/add-web-monetization-to-your-sites-with-snippet-injection/)

-   ![Profile picture of Cassidy Williams](/_astro/a62099fab0f946e063c4b84ff4b4d9c94f9aa7a5-400x400_ZdakPa.webp)
    
    Cassidy Williams
    

## Recent posts

News & Announcements June 25, 2026

[

### Netlify Functions, designed for Agent Experience

](/blog/netlify-functions-designed-for-agent-experience)

-   ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp)
    
    Eduardo Bouças
    

News & Announcements June 24, 2026

[

### How we measure Netlify’s Agent Experience

](/blog/how-we-measure-netlify-agent-experience)

-   ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp)
    
    Sean Roberts
    

Guides & Tutorials May 15, 2026

[

### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)

](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)

-   ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp)
    
    Nahrin Jalal
    

![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp)

### How do the best dev and marketing teams work together?

[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)