Cabin installeren

Voeg eerst je domein toe op de pagina Domains. Volg daarna de instructies hieronder om Cabin aan je site toe te voegen.

Het script is overal hetzelfde: één regel, 2 KB, geen configuratie. Zodra het live staat, verschijnen bezoeken binnen een paar seconden in je dashboard.

Het is ook open source. Je kunt precies nalezen wat er in de browsers van je bezoekers draait op github.com/withcabin/hello.js, en het gebouwde bestand in die repository is byte voor byte hetzelfde als wat het CDN serveert. Je hoeft dus niets op goed vertrouwen aan te nemen.

Basisinstallatie

Zet de volgende code vóór je afsluitende </body>-tag.

html

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

WordPress

Installeer de plug-in Insert Headers and Footers.
Ga naar het menu Settings > Insert Headers and Footers.

Plak de code hieronder in Footer scripts:

html

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

Klik op Save.

Shopify

NOTE

Hiervoor heb je toegang nodig tot de code van je Shopify-thema.

Ga in je Shopify-beheer naar Online Store > Themes.
Zoek het thema dat je wilt bewerken en klik op Actions > Edit code.
Klik in de map Layout op theme.liquid.

Zoek de afsluitende </body>-tag en plak de volgende code er direct vóór:

html

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

Klik op Save.

WooCommerce

Installeer en activeer de plug-in Code Snippets.
Ga naar Snippets > Add New.
Geef je snippet een titel, bijvoorbeeld "Cabin Analytics".

Plak de volgende 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');

Stel de snippet zo in dat hij alleen op de "Frontend" draait.
Klik op Save Changes and Activate.

Je kunt ook de WordPress-instructies hierboven volgen met de plug-in Insert Headers and Footers.

Squarespace

NOTE

Alleen beschikbaar op de abonnementen Business en Commerce van Squarespace.

Klik op Settings, dan op Advanced en dan op Code Injection

Voeg de volgende code toe aan de Footer:

html

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

Klik bovenaan de pagina op Save.

Meer informatie bij Squarespace

Wix

NOTE

Alleen beschikbaar met een betaald Wix-abonnement.

Klik op Settings in het dashboard van je site.
Klik op het tabblad Tracking & Analytics onder Advanced Settings.
Klik op + New Tool en kies Custom in het keuzemenu.

Plak de code hieronder:

html

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

Kies het juiste domein. Let op: deze optie verschijnt alleen als je meerdere domeinen hebt.
Geef je eigen code een naam, bijvoorbeeld Cabin Script
Add Code to Pages: kies All Pages en Load code once.
Place Code in: kies Body - end.
Klik op Apply.

Meer informatie bij Wix

Next.js

Maak het bestand app/layout.js (of app/layout.tsx) aan of bewerk het, en importeer het script in je 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>
  )
}

Meer informatie over de Script-component van Next.js.

Ghost

Ga naar je Ghost Admin settings.
Klik op Code Injection in het menu in de zijbalk.

Plak de trackingcode hieronder in het onderdeel Foot:

html

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

Klik op Save.

Meer informatie bij Ghost.

Webflow

NOTE

Alleen beschikbaar voor betaalde Webflow-accounts.

Ga naar je Project settings (tandwielicoon in de linkerzijbalk).
Kies Custom code in het tabbladmenu.

Plak de trackingcode hieronder in het onderdeel Footer Code:

html

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

Klik op Save Changes.
Klik op Publish om je wijzigingen live te zetten.

Meer informatie over eigen code in Webflow.

Nuxt

Bewerk je bestand nuxt.config.js

Voeg het script toe aan app.head:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://scripts.withcabin.com/hello.js',
          defer: true,
          async: true
        }
      ]
    }
  }
})

Meer informatie over head-beheer in Nuxt.

Svelte/SvelteKit

Bewerk je bestand src/app.html

Voeg het script toe vóór de afsluitende </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>

Meer informatie over app.html in SvelteKit.

Gatsby

Installeer de Gatsby Script API:
bash
```
npm install gatsby-script
```

Bewerk je layoutcomponent (meestal 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
      />
    </>
  )
}

Meer informatie over de Gatsby Script API.

Hugo

Maak het bestand layouts/partials/footer.html aan in je Hugo-project, of bewerk het.

Voeg de volgende code toe:

html

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

Zorg dat deze partial is opgenomen in de hoofdlayout van je site.

Je kunt het ook direct toevoegen aan layouts/_default/baseof.html, vóór de afsluitende </body>-tag.

Meer informatie over Hugo-templates.

Astro

Bewerk je hoofdlayoutbestand (meestal in src/layouts/Layout.astro):

html

<html lang="en">
    <head>
    <!-- De inhoud van je head -->
    </head>
    <body>
    <slot />
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
    </body>
</html>

Meer informatie over layouts in Astro.

Framer

NOTE

Hiervoor heb je een betaald Framer-abonnement nodig waarmee je eigen code kunt invoegen.

Open je Framer-project.
Klik op het icoon Settings in de linkerzijbalk.
Kies het tabblad General.
Scrol omlaag naar Custom Code.

Plak de volgende code in het onderdeel Before </body> tag:

html

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

Klik op Save.

Bubble

Ga naar het dashboard van je Bubble-app.
Klik op Settings in de linkerzijbalk.
Ga naar het tabblad SEO/metatags.
Scrol omlaag naar Advanced settings.

Zoek het onderdeel Script in the body en plak de volgende code:

html

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

Klik op Save.

Meer informatie over de SEO/metatags-instellingen van Bubble.

Carrd

NOTE

Hiervoor heb je een Carrd Pro Standard-abonnement of hoger nodig.

Klik tijdens het bewerken van je Carrd-site op de knop + (Add Element) in de bovenbalk.
Kies Embed.
Zet Type op Code.

Plak de volgende code:

html

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

(Optioneel) Geef Label een duidelijke naam, bijvoorbeeld "Cabin Analytics".
Kies bij Style de optie Hidden en kies Body End als plaatsing.
Klik op Add.
Klik op Publish om je wijzigingen live te zetten.

Meer informatie over eigen code insluiten in Carrd.

Webnode

NOTE

Hiervoor heb je een Webnode Premium-abonnement nodig (voor projecten die na 26 juni 2023 zijn aangemaakt).

Zet in de Webnode-editor je muis in een sectie waar je de code wilt toevoegen.
Klik op de plusknop om nieuwe content toe te voegen.
Klik in de contentballon op het rondje voor meer opties en klik dan op HTML.

Plak de volgende code:

html

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

Let op: je ziet de toegevoegde HTML alleen in de gepubliceerde versie van je website, niet direct in de editor.
Klik op Publish om je wijzigingen live te zetten.

Meer informatie over HTML-code invoegen in Webnode.

Google Tag Manager

WARNING

Deze methode werkt, maar we raden hem niet aan voor privacyvriendelijke statistieken. Met Google Tag Manager gaan er gegevens naar de servers van Google voordat Cabin wordt geladen, en dat maakt een deel van de privacyvoordelen van Cabin ongedaan. Kies waar mogelijk voor directe installatie.

Log in op je account bij Google Tag Manager.
Kies je container.
Klik op Tags in de linkerzijbalk.
Klik op New om een nieuwe tag te maken.
Klik op Tag Configuration en kies Custom HTML.

Plak de volgende code:

html

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

Klik op Triggering en kies een trigger (meestal "All Pages").
Geef je tag een naam (bijv. "Cabin Analytics") en klik op Save.
Klik op Submit om je wijzigingen te publiceren.

Meer informatie bij Google Tag Manager.

Controleren of het werkt

Open je site en daarna je Cabin-dashboard: je eigen bezoek zou meteen moeten verschijnen. Zie je niets, controleer dan of de scripttag in de gepubliceerde versie van de pagina staat (bekijk de broncode en zoek naar hello.js) en of een adblocker hem niet tegenhoudt. Met een eigen domein los je dat voorgoed op.

Je kunt ook een AI-assistent vragen het voor je te controleren via MCP: "is Cabin goed geïnstalleerd op example.com?"

Heb je meer hulp nodig bij het installeren van Cabin, neem dan contact op via hello@withcabin.com.

Cabin installeren ​

Basisinstallatie ​

WordPress ​

Shopify ​

WooCommerce ​

Squarespace ​

Wix ​

Next.js ​

Ghost ​

Webflow ​

Nuxt ​

Svelte/SvelteKit ​

Gatsby ​

Hugo ​

Astro ​

Framer ​

Bubble ​

Carrd ​

Webnode ​

Google Tag Manager ​

Controleren of het werkt ​

Cabin installeren

Basisinstallatie

WordPress

Shopify

WooCommerce

Squarespace

Wix

Next.js

Ghost

Webflow

Nuxt

Svelte/SvelteKit

Gatsby

Hugo

Astro

Framer

Bubble

Carrd

Webnode

Google Tag Manager

Controleren of het werkt