Validiform Recorder - Embed Example

Embed Code

To use Validiform on your own site, include this code:

<!-- Validiform Recorder -->
<script src="https://api.validiform.com/dist/browser/validiform-recorder.min.js"></script>
<script>
    // Initialize the recorder
    ValidiformRecorder.init({
        apiUrl: window.location.origin,
        projectId: 'demo-project',
        apiKey: 'your-api-key', // Optional: Add if using API key auth
        debug: true,
        onSessionStart: function(sessionKey) {
            console.log('Recording started:', sessionKey);
        }
    });
</script>

What Gets Tracked

The Validiform recorder automatically tracks:

• Visitor Identification: Persistent visitor key stored in localStorage
• Session Data: Page URL, title, HTML snapshot, viewport size
• User Events: Clicks, scrolls, mouse movements, form interactions
• Form Inputs: Field values as users type (respects trackSensitiveData setting)
• Form Submissions: Automatically detected and tracked via submit events
• DOM Changes: Dynamic content updates, attribute changes

Configuration Options

{
    apiUrl: window.location.origin,      // Required: Your Validiform API URL
    projectId: 'your-project-id',         // Required: Your project ID
    apiKey: 'your-api-key',               // Optional: API key for authentication
    bufferSize: 10,                       // Optional: Events to buffer (default: 10)
    flushInterval: 2000,                  // Optional: ms between flushes (default: 1000)
    trackSensitiveData: false,            // Optional: Track password fields (default: false)
    trackMouseMovement: true,             // Optional: Track mouse moves (default: true)
    debug: false,                         // Optional: Console logging (default: false)
    onSessionStart: function(key) {},     // Optional: Callback when recording starts
    onSessionEnd: function() {},          // Optional: Callback when recording ends
    onError: function(error) {}           // Optional: Error handler
}