SDK Configuration

Complete reference for configuring the Claymore JavaScript SDK. Control privacy, performance, and behavior to match your needs.

Basic Installation

Add the Claymore SDK to your page with a single script tag:

<script
  src="https://sdk.claymore.one/loader.js"
  data-src="https://sdk.claymore.one/claymore.js"
  data-project-id="YOUR_PROJECT_ID"
  async
></script>

Configuration Options

Configure the SDK using data-* attributes on the script tag:

data-project-id (required)

Your unique project identifier from the Claymore dashboard.

data-project-id="proj_abc123xyz"

data-privacy-level

Control how aggressively the SDK masks sensitive content. Options:

light — Mask passwords and credit card fields only
standard — Mask all input fields (default)
strict — Mask all text content, including static text

data-privacy-level="standard"

data-capture-console

Enable or disable console log capture. Set to false to disable.

data-capture-console="true"  // default
data-capture-console="false" // disable console capture

data-capture-network

Capture XHR/Fetch network requests (timing, status, URLs).

data-capture-network="true"  // default
data-capture-network="false" // disable network capture

data-flush-interval

How often (in milliseconds) to send recorded data to Claymore servers. Lower values = more real-time, higher values = better batching.

data-flush-interval="5000"  // default: 5 seconds
data-flush-interval="1000"  // 1 second (more real-time)
data-flush-interval="10000" // 10 seconds (more batching)

data-sample-rate

Percentage of sessions to record (0-100). Use for high-traffic sites where you don't need 100% of sessions.

data-sample-rate="100" // default: record all sessions
data-sample-rate="50"  // record 50% of sessions
data-sample-rate="10"  // record 10% of sessions

Full Example

Here's a script tag with multiple configuration options:

<script
  src="https://sdk.claymore.one/loader.js"
  data-src="https://sdk.claymore.one/claymore.js"
  data-project-id="proj_abc123xyz"
  data-privacy-level="standard"
  data-capture-console="true"
  data-capture-network="true"
  data-flush-interval="5000"
  data-sample-rate="100"
  async
></script>

JavaScript API

The SDK exposes a global Claymore object for programmatic interaction.

Identify Users

Connect sessions to a user ID from your system:

// Safe to call before SDK loads
window.Claymore = window.Claymore || { 
  push: function(m, a) { (this.q = this.q || []).push([m, a]) } 
};

// After user logs in
Claymore.push('identify', ['user_123']);

// With additional properties (optional)
Claymore.push('identify', ['user_123', {
  email: 'user@example.com',  // masked by default
  plan: 'premium'
}]);

Track Events

Record custom events for analytics and searchability:

// Simple event
Claymore.push('event', ['button_click']);

// Event with properties
Claymore.push('event', ['purchase', {
  amount: 99.99,
  currency: 'USD',
  productId: 'prod_123'
}]);

// Conversion event
Claymore.push('event', ['signup_completed', {
  source: 'landing_page',
  plan: 'growth'
}]);

Exclude Elements

Prevent specific elements from being recorded:

<!-- Add data-claymore-ignore to exclude an element -->
<div data-claymore-ignore>
  This content will not appear in replays
</div>

<!-- Mask specific input fields -->
<input type="text" data-claymore-mask />

<!-- Exclude entire sections -->
<section data-claymore-ignore>
  <form>
    Sensitive form content here
  </form>
</section>

Pause/Resume Recording

Temporarily pause recording (useful for sensitive workflows):

// Pause recording
Claymore.push('pause', []);

// Resume recording
Claymore.push('resume', []);

// Example: Pause during sensitive modal
function showSensitiveModal() {
  Claymore.push('pause', []);
  openModal();
}

function closeSensitiveModal() {
  closeModal();
  Claymore.push('resume', []);
}

Framework Integration

React / Next.js

Add the script in your layout or _document file:

// Next.js (app/layout.tsx)
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://sdk.claymore.one/loader.js"
          data-src="https://sdk.claymore.one/claymore.js"
          data-project-id="YOUR_PROJECT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Vue.js / Nuxt

// nuxt.config.js
export default {
  head: {
    script: [
      {
        src: 'https://sdk.claymore.one/loader.js',
        'data-src': 'https://sdk.claymore.one/claymore.js',
        'data-project-id': 'YOUR_PROJECT_ID',
        async: true
      }
    ]
  }
}

Troubleshooting

Sessions not appearing

Check the browser console for errors. Common issues:

Invalid project ID
Ad blocker blocking the SDK
Content Security Policy blocking scripts

SDK not loading

Add the SDK domain to your CSP if you have one:

Content-Security-Policy: script-src 'self' https://sdk.claymore.one;