👨‍💻 Adding Code Snippets to Your Pages

In this article, we'll explain how to add global and local code snippets

Code snippets can help achieve customizations beyond HubSpot’s built-in capabilities. In this tutorial, we’ll go over how to add code snippets at a global (for all pages) or local level (for a specific content). Remember that while adding snippets can be pretty straightforward, developing those snippets requires coding knowledge. If you are an Atlas 2 or Atlas Pro user, our support can provide snippets for you.

Adding a Local Code Snippet

If you want to add a code snippet that affects a specific page or blog post, you can do so from the page or blog editor.

1. Navigate to your content’s editor.
2. Navigate to the Settings dropdown at the top of your screen.
3. Open the Advanced item.
4. In the Additional code snippets section, paste your code snippet in the Head HTML field. Keep in mind this field processes HTML code, meaning that your snippets need their respective opening and closing <style> or <script> tags. Your field should look something like this:
   
   
5. Your edit is automatically saved, but if your page is published, click the Update button at the top right of your screen.

Adding a Global Code Snippet

A global code snippet will affect all your Pages, Blog Listing Pages, and Blog Posts.

There are two methods to add a global code snippet:

• Using HubSpot’s Site header HTML.
• Using a child theme.

Using HubSpot’s Site header HTML

1. In your HubSpot account, click the settings settings icon in the top navigation bar.
2. In the left sidebar menu, navigate to Content > Pages.
3. In the Templates tab, locate the Site header HTML code box.
4. Enter your 

   <!-- This is an HTML tag -->
   <meta charset="UTF-8">
   
   <!-- This is a JavaScript script -->
   <script>
       console.log('Hello Atlas User!');
   </script>
   
   <!-- This is a CSS script -->
   <style>
       .atlas-example-class{
           background-color: red;
       }
   </style>

5. In the bottom left, click Save to apply your changes.

Using a child theme

1. In your HubSpot account, use the navigation bar to access Content ⇒ Design Manager.
2. Open your child theme’s directory. If you haven’t created one already, check out this article on child themes.
3. If you are trying to add a styling snippet (for merely aesthetic purposes), open the child.css file, which contains all your extra styling rules. However, if you want to add a JavaScript snippet (for functional purposes), open the child.js file.
4. Paste your code snippet in your file’s content. Keep in mind that if your snippet includes HTML tags such as <style> or <script>, you would need to remove them. Your final edit should look something like this:
   
   
   
   
5. In the top right, click Publish to x assets to apply your changes.