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 multiple snippets for each block of code to keep things flexible and easy to find.

Creating a snippet

To create a new snippet, go to a page’s settings and click “Add snippet” found below the metadata.

In the “Add a snippet” modal, click “Create new snippet”.

Name your snippet and add your code. 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.

Adding a snippet

Once snippets have been created, you can add one or more using the checkboxes. You can choose to either add the snippet(s) to a single page, or all pages in the site.

Managing snippets

To remove a snippet from a page, click on the “X” found when hovering on a snippet card. Clicking on a snippet card will display the snippet details.

Modify a snippet by clicking “Edit snippet” in the snippet modal. These 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 applications and will soon 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, 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.

Examples of clean up scripts

Google Analytics

Google Analytics provides instructions 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;

More examples and resources

Intercom

Hubspot

Did this answer your question?