🇬🇧 English

🇫🇷 Français
🇩🇪 Deutsch

🇬🇧 English

🇫🇷 Français
🇩🇪 Deutsch

Appearance

Installing Cabin ​

Start by adding the domain name to your Domains page. Then follow the instrctions below to add cabin to your website.

Basic Installation ​

Place the following code before your closing </body> tag.

html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>

WordPress ​

  1. Install the the Insert Headers and Footers plugin.
  2. Go to Settings > Insert Headers and Footers menu.
  3. Paste the code below into the Footer scripts:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  4. Click Save.

Shopify ​

NOTE

This requires access to your Shopify theme code.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit and click Actions > Edit code.
  3. In the Layout directory, click on theme.liquid.
  4. Find the closing </body> tag and paste the following code just before it:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  5. Click Save.

WooCommerce ​

  1. Install and activate the Code Snippets plugin.
  2. Go to Snippets > Add New.
  3. Give your snippet a title like "Cabin Analytics".
  4. Paste the following code:
    php
    function add_cabin_analytics() {
    echo '<script async defer src="https://scripts.withcabin.com/hello.js"></script>';
}
add_action('wp_footer', 'add_cabin_analytics');
  5. Set the snippet to run on the "Frontend" only.
  6. Click Save Changes and Activate.

Alternatively, you can follow the WordPress instructions above using the Insert Headers and Footers plugin.

Squarespace ​

NOTE

Only available for sites with a Squarespace Business or Commerce plan.

  1. Click Settings, click Advanced and then click Code Injection
  2. Add the following code to the Footer:
    html
     <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  3. Click Save at the top of the page.

More details at Squarespace

Wix ​

NOTE

Only available for sites on a WIX paid plan.

  1. Click Settings in your site's dashboard.
  2. Click the Tracking & Analytics tab under Advanced Settings.
  3. Click + New Tool and select Custom from the dropdown.
  4. Paste in the code from below:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  5. Select the relevant domain. Note: This option will appear only if you have multiple domains.
  6. Enter a name for your custom code. E.g. Cabin Script
  7. Add Code to Pages: Choose All Pages and Load code once.
  8. Place Code in: Choose Body - end.
  9. Click Apply.

More details on WIX

Next.js ​

Create or edit the app/layout.js (or app/layout.tsx) file and import the script in your RootLayout component:

jsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://scripts.withcabin.com/hello.js"
          strategy="afterInteractive"
        />
      </head>
      <body>
        {children}
      </body>
    </html>
  )
}

More details on Next.js Script component.

Ghost ​

  1. Go to your Ghost Admin settings.
  2. Click on Code Injection in the sidebar menu.
  3. Paste the tracking code below into the Foot section:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  4. Click Save.

More details on Ghost.

Webflow ​

NOTE

Only available for paid Webflow accounts.

  1. Go to your Project settings (gear icon in the left sidebar).
  2. Select Custom code in the tabs menu.
  3. Paste the tracking code below into the Footer Code section:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  4. Click Save Changes.
  5. Click Publish to make your changes live.

More details on Webflow custom code.

Nuxt.js ​

Nuxt 3 ​

  1. Create or edit the plugins directory in your project
  2. Create a new file plugins/cabin.client.js:
    js
    export default defineNuxtPlugin(() => {
  useHead({
    script: [
      {
        src: 'https://scripts.withcabin.com/hello.js',
        defer: true,
        async: true
      }
    ]
  })
})

Nuxt 2 ​

  1. Edit your nuxt.config.js file
  2. Add the script to the head section:
    js
    export default {
  head: {
    script: [
      {
        src: 'https://scripts.withcabin.com/hello.js',
        defer: true,
        async: true,
        body: true
      }
    ]
  }
}

More details on Nuxt.js head management.

Svelte/SvelteKit ​

  1. Edit your src/app.html file
  2. Add the script before the closing </body> tag:
    html
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  </body>
</html>

More details on SvelteKit app.html.

Gatsby ​

  1. Install the Gatsby Script API:

    bash
    npm install gatsby-script

  2. Edit your layout component (typically in src/components/layout.js):

    jsx
    import React from "react"
import { Script } from "gatsby"

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://scripts.withcabin.com/hello.js"
        strategy="postHydrate"
        async
        defer
      />
    </>
  )
}

More details on Gatsby Script API.

Hugo ​

  1. Create or edit the file layouts/partials/footer.html in your Hugo project.
  2. Add the following code:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  3. Make sure this partial is included in your site's main layout.

Alternatively, you can add it directly to layouts/_default/baseof.html before the closing </body> tag.

More details on Hugo Templates.

Astro ​

  1. Edit your main layout file (typically in src/layouts/Layout.astro):
html
<html lang="en">
    <head>
    <!-- Your head content -->
    </head>
    <body>
    <slot />
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
    </body>
</html>

More details on Astro Layouts.

Framer ​

NOTE

This requires a paid Framer plan that allows custom code insertion.

  1. Open your Framer project.
  2. Click on the Settings icon in the left sidebar.
  3. Select the General tab.
  4. Scroll down to Custom Code.
  5. Paste the following code in the Before </body> tag section:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  6. Click Save.

Bubble ​

  1. Go to your Bubble app's dashboard.
  2. Click on Settings in the left sidebar.
  3. Navigate to the SEO/metatags tab.
  4. Scroll down to Advanced settings.
  5. Find the Script in the body section and paste the following code:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  6. Click Save.

More details on Bubble's SEO/metatags settings.

Carrd ​

NOTE

This requires a Carrd Pro Standard plan or higher.

  1. While editing your Carrd site, click on the + button (Add Element) in the top bar.
  2. Select Embed.
  3. Set Type to Code.
  4. Paste the following code:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  5. (Optional) Set Label to something descriptive like "Cabin Analytics".
  6. For Style, select Hidden and choose Body End for placement.
  7. Click Add.
  8. Click Publish to make your changes live.

More details on Carrd Custom Code Embedding.

Webnode ​

NOTE

This requires a Webnode Premium plan (for projects created after June 26, 2023).

  1. In your Webnode editor, position your mouse in a section where you want to add the code.
  2. Click the plus button to add new content.
  3. In the content bubble, click the circle for more options, then click on HTML.
  4. Paste the following code:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  5. Note that you will only be able to see the HTML added in the published version of your website, not directly in the editor.
  6. Click Publish to make your changes live.

More details on Webnode HTML code insertion.

Google Tag Manager ​

WARNING

While this method works, it's not recommended for privacy-focused analytics. Using Google Tag Manager sends data to Google servers before loading Cabin, which defeats some of Cabin's privacy benefits. Consider direct installation when possible.

  1. Log in to your Google Tag Manager account.
  2. Select your container.
  3. Click on Tags in the left sidebar.
  4. Click New to create a new tag.
  5. Click on Tag Configuration and select Custom HTML.
  6. Paste the following code:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  7. Click on Triggering and select a trigger (typically "All Pages").
  8. Name your tag (e.g., "Cabin Analytics") and click Save.
  9. Click Submit to publish your changes.

More details on Google Tag Manager.

If you need more help installing Cabin, please contact hello@withcabin.com.

Released under the MIT License.

Copyright © 2020-2025 Cabin