> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Snippets

> Snippets are blocks of code shared at the site level that can be added to your pages. Code that is not visual, such as Google Analytics, Facebook pixels, or custom CSS, should be placed into snippets. We recommend using separate snippets for each block of code to keep things flexible and easy to find.

## Creating a snippet

To create a new snippet, deselect all elements and click the Page tab in the right sidebar. Click the "+" icon in the "Snippets" panel, and select "Create snippet" in the menu.

Name your snippet, paste in your code, and add cleanup code if necessary. You can select if the code should be placed in the `<head>` or end of the closing `<body>`. If you're unsure which to choose, please check with the code's documentation. Lastly, select whether or not to automatically include this snippet when new pages are created.

<Frame>
  <img src="https://mintcdn.com/makeswift/cdz9WIAi676OTSsF/images/snippets/snippet-modal.png?fit=max&auto=format&n=cdz9WIAi676OTSsF&q=85&s=c326dc47493c18fe0f688748d2e07d05" alt="Makeswift snippet dialog" width="1300" height="1390" data-path="images/snippets/snippet-modal.png" />
</Frame>

After clicking "Create" you'll be given the option of adding the new snippet to your current page or all pages in your site. This snippet will also appear in the add snippet menu for pages that don't already include it.

To remove a snippet from a page, click on the `—` found on each snippet row.

<Frame>
  <img src="https://mintcdn.com/makeswift/cdz9WIAi676OTSsF/images/snippets/add-and-remove-snippet.gif?s=7e53d123b926cd0f0a2646516c02ec18" alt="Add and remove snippets" width="478" height="246" data-path="images/snippets/add-and-remove-snippet.gif" />
</Frame>

## Managing snippets

Opening a snippet's action menu will display options to edit the snippet or add it to all pages. When editing a snippet, saved changes will be applied to all pages using this snippet. Deleting a snippet will remove it from all pages in a site.

## Snippets and client-side routing

Makeswift sites are [Next.js](https://nextjs.org/) applications and feature client-side routing for blazing fast navigation throughout your site. Navigating between pages within the site does not cause a page refresh, which requires additional considerations for certain types of snippets.

Sometimes you want to be able to run a snippet in specific pages but not in others. For example, you might want a chat support widget on your marketing pages but not on your blog pages. Makeswift will automatically remove the relevant snippet HTML and CSS when moving from a page with a snippet to a page that doesn't have that snippet. But if the snippet ran a side effect with JavaScript (i.e., installing a chat support widget), then a clean up script will need to be provided (i.e., to uninstall the chat support widget).

<Note>
  Note, the clean up script is only needed when a snippet isn't used in all
  pages and also has some sort of side effect that needs to be cleaned up.
</Note>

## Clean up script example

Google Analytics [provides
instructions](https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications)
for measuring page activity in single page applications. Here's an example of
what that looks like in Makeswift.

### Snippet

```
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

<!-- Google Analytics SPA Tracking -->
<script>
window['ga-disable-UA-XXXXX-Y'] = false;

function onStateChange(state) {
	ga('set', 'page', state.url);
	ga('send', 'pageview');
}

var originalPushState = window.history.pushState;
window.history.pushState = function pushState(state) {
	originalPushState.apply(window.history, arguments);

	onStateChange(state);
};

var originalReplaceState = window.history.replaceState;
window.history.replaceState = function replaceState(state) {
  originalReplaceState.apply(window.history, arguments);

  onStateChange(state);
};
</script>
<!-- End Google Analytics SPA Tracking -->
```

### Clean up script

```
window['ga-disable-UA-XXXXX-Y'] = true;
window.history.pushState = originalPushState;
window.history.replaceState = originalReplaceState;
```

## Pro tips

Snippets can be configured to be automatically added to all new pages. To do so, check the box labeled "Add to new pages by default" when creating or editing a snippet. This is useful for snippets that should be included on every page, such as Google Analytics or Facebook pixels

<Frame>
  <img src="https://mintcdn.com/makeswift/cdz9WIAi676OTSsF/images/snippets/add-to-new-pages-snippet.png?fit=max&auto=format&n=cdz9WIAi676OTSsF&q=85&s=dbc9feb482f4c8cbbe815ea1fcda7053" alt="Add snippets to new pages" width="212" height="38" data-path="images/snippets/add-to-new-pages-snippet.png" />
</Frame>

## Developer notes

When using a custom host, we suggest using `next/script` to add snippets directly to your codebase. Using `next/script` in Next.js is beneficial because it optimizes the loading of third-party scripts, ensuring they don't block the main thread and improving page performance. It also allows for fine-grained control over script loading behavior, such as lazy loading or loading only after the page has rendered, enhancing the overall user experience.

<Note>
  Any snippets that need to be maintained by non-developers should be added to
  Makeswift as snippets. This allows for easy management and editing by
  non-technical users.
</Note>
