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 ​
- Install the the Insert Headers and Footers plugin.
- Go to Settings > Insert Headers and Footers menu.
- Paste the code below into the Footer scripts:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Click Save.
Shopify ​
NOTE
This requires access to your Shopify theme code.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit and click Actions > Edit code.
- In the Layout directory, click on
theme.liquid
. - 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>
- Click Save.
WooCommerce ​
- Install and activate the Code Snippets plugin.
- Go to Snippets > Add New.
- Give your snippet a title like "Cabin Analytics".
- 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');
- Set the snippet to run on the "Frontend" only.
- 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.
- Click Settings, click Advanced and then click Code Injection
- Add the following code to the Footer:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Click Save at the top of the page.
More details at Squarespace
Wix ​
NOTE
Only available for sites on a WIX paid plan.
- Click Settings in your site's dashboard.
- Click the Tracking & Analytics tab under Advanced Settings.
- Click + New Tool and select Custom from the dropdown.
- Paste in the code from below:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Select the relevant domain. Note: This option will appear only if you have multiple domains.
- Enter a name for your custom code. E.g. Cabin Script
- Add Code to Pages: Choose All Pages and Load code once.
- Place Code in: Choose Body - end.
- 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 ​
- Go to your Ghost Admin settings.
- Click on Code Injection in the sidebar menu.
- Paste the tracking code below into the Foot section:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Click Save.
More details on Ghost.
Webflow ​
NOTE
Only available for paid Webflow accounts.
- Go to your Project settings (gear icon in the left sidebar).
- Select Custom code in the tabs menu.
- Paste the tracking code below into the Footer Code section:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Click Save Changes.
- Click Publish to make your changes live.
More details on Webflow custom code.
Nuxt.js ​
Nuxt 3 ​
- Create or edit the
plugins
directory in your project - Create a new file
plugins/cabin.client.js
:jsexport default defineNuxtPlugin(() => { useHead({ script: [ { src: 'https://scripts.withcabin.com/hello.js', defer: true, async: true } ] }) })
Nuxt 2 ​
- Edit your
nuxt.config.js
file - 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 ​
- Edit your
src/app.html
file - 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 ​
Install the Gatsby Script API:
bashnpm install gatsby-script
Edit your layout component (typically in
src/components/layout.js
):jsximport 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 ​
- Create or edit the file
layouts/partials/footer.html
in your Hugo project. - Add the following code:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- 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 ​
- 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.
- Open your Framer project.
- Click on the Settings icon in the left sidebar.
- Select the General tab.
- Scroll down to Custom Code.
- Paste the following code in the Before
</body>
tag section:html<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Click Save.
Bubble ​
- Go to your Bubble app's dashboard.
- Click on Settings in the left sidebar.
- Navigate to the SEO/metatags tab.
- Scroll down to Advanced settings.
- Find the Script in the body section and paste the following code:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Click Save.
More details on Bubble's SEO/metatags settings.
Carrd ​
NOTE
This requires a Carrd Pro Standard plan or higher.
- While editing your Carrd site, click on the + button (Add Element) in the top bar.
- Select Embed.
- Set Type to Code.
- Paste the following code:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- (Optional) Set Label to something descriptive like "Cabin Analytics".
- For Style, select Hidden and choose Body End for placement.
- Click Add.
- 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).
- In your Webnode editor, position your mouse in a section where you want to add the code.
- Click the plus button to add new content.
- In the content bubble, click the circle for more options, then click on HTML.
- Paste the following code:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Note that you will only be able to see the HTML added in the published version of your website, not directly in the editor.
- 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.
- Log in to your Google Tag Manager account.
- Select your container.
- Click on Tags in the left sidebar.
- Click New to create a new tag.
- Click on Tag Configuration and select Custom HTML.
- Paste the following code:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Click on Triggering and select a trigger (typically "All Pages").
- Name your tag (e.g., "Cabin Analytics") and click Save.
- Click Submit to publish your changes.
More details on Google Tag Manager.
If you need more help installing Cabin, please contact hello@withcabin.com.