Installation Guide

Install Segmently on your website in under 60 seconds. Choose your platform below.

Vanilla HTML/JavaScript

Add this single line to your HTML <head> tag:

<!-- Add to <head> -->
<script 
  src="https://cdn.segmently.com/segmently.js"
  data-api-key="YOUR_API_KEY"
  async>
</script>

Replace YOUR_API_KEY with your actual API key from the dashboard.

React / Next.js

Option 1: Using Script Tag (Recommended)

Add to your root layout or _app.tsx:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script 
          src="https://cdn.segmently.com/segmently.js"
          data-api-key="YOUR_API_KEY"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Option 2: Using NPM Package

npm install @segmently/react

// In your app:
import { SegmentlyProvider } from '@segmently/react'

function App() {
  return (
    <SegmentlyProvider apiKey="YOUR_API_KEY">
      <YourApp />
    </SegmentlyProvider>
  )
}

WordPress

Two installation methods:

Method 1: Using Header/Footer Plugin

  1. Install "Insert Headers and Footers" plugin
  2. Go to Settings → Insert Headers and Footers
  3. Paste the snippet in "Scripts in Header"
  4. Save changes

Method 2: Manual (theme's functions.php)

function add_segmently_script() {
  ?>
  <script 
    src="https://cdn.segmently.com/segmently.js"
    data-api-key="YOUR_API_KEY"
    async>
  </script>
  <?php
}
add_action('wp_head', 'add_segmently_script');

Shopify

  1. Go to your Shopify admin
  2. Click Online Store → Themes
  3. Click Actions → Edit code
  4. Find theme.liquid in Layout folder
  5. Add the snippet just before </head>
  6. Click Save
<!-- Add before </head> -->
<script 
  src="https://cdn.segmently.com/segmently.js"
  data-api-key="YOUR_API_KEY"
  async>
</script>
</head>

Webflow

  1. Open your Webflow project
  2. Go to Project Settings (gear icon)
  3. Click Custom Code
  4. Paste in "Head Code" section
  5. Publish your site

Wix

  1. Open your Wix site editor
  2. Click Settings in the top menu
  3. Click Advanced → Custom Code
  4. Click "+ Add Custom Code"
  5. Paste the snippet
  6. Select "Head" and "All pages"
  7. Click Apply

Squarespace

  1. Go to your Squarespace dashboard
  2. Click Settings → Advanced → Code Injection
  3. Paste in "Header" section
  4. Click Save

Vue.js

Add to your main index.html:

<!DOCTYPE html>
<html>
  <head>
    <script 
      src="https://cdn.segmently.com/segmently.js"
      data-api-key="YOUR_API_KEY"
      async>
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Angular

Add to your index.html in the src folder:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Your App</title>
  <script 
    src="https://cdn.segmently.com/segmently.js"
    data-api-key="YOUR_API_KEY"
    async>
  </script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Google Tag Manager

  1. Go to your GTM workspace
  2. Click Tags → New
  3. Choose "Custom HTML" tag type
  4. Paste the snippet
  5. Set trigger to "All Pages"
  6. Save and publish

Verifying Installation

After installing, verify it's working:

  1. Visit your website
  2. Open browser DevTools (F12)
  3. Go to Console tab
  4. Look for: ✅ Segmently loaded successfully

Or check your Segmently dashboard - you should see visitor data within 60 seconds.

Verify Installation

After adding the snippet to your website, verify it's working correctly:

  1. Open your website in a browser
  2. Press F12 to open Developer Tools
  3. Go to the Console tab
  4. Type: window.segmently and press Enter
  5. Success: If you see an object with properties like version, track, etc., the snippet is installed correctly ✓
  6. Error: If you see undefined, check that:
    • The snippet code was added correctly to your HTML
    • Your API key is correct
    • The page has fully loaded

Next Steps

Need Help?

Can't find your platform? Email us at support@segmently.com and we'll help you get set up.