Project-Based Recorder Test
Select a project and test the session recording functionality with domain validation.
2. Embed Code
Use this code to embed the recorder on any website:
3. Test Recording
Recording Status: Not Recording
',
''
].join('\n');
document.getElementById('embedCode').textContent = embedCode;
document.getElementById('embedSection').style.display = 'block';
document.getElementById('recorderSection').style.display = 'block';
}
function copyEmbedCode() {
const code = document.getElementById('embedCode').textContent;
navigator.clipboard.writeText(code).then(() => {
alert('Embed code copied to clipboard!');
}).catch(err => {
console.error('Failed to copy:', err);
});
}
async function startRecording() {
if (!selectedProject) {
alert('Please select a project first');
return;
}
try {
// Stop any existing recorder
if (recorder) {
recorder.stop();
}
// Create new recorder instance with manual control
recorder = new ValidiformRecorder({
apiUrl: baseUrl,
projectId: selectedProject.id,
apiKey: document.getElementById('apiKey').value,
debug: true,
trackMouseMovement: true,
trackSensitiveData: false,
bufferSize: 10,
flushInterval: 1000,
onSessionStart: (sessionKey) => {
console.log('Session started:', sessionKey);
document.getElementById('sessionKey').value = sessionKey;
updateStatus('recording', 'Recording (Session: ' + sessionKey + ')');
logEvent('Session started: ' + sessionKey);
},
onError: (error) => {
console.error('Recorder error:', error);
logEvent('ERROR: ' + error.message);
updateStatus('stopped', 'Error occurred');
}
});
// Add event logging
const originalAddEvent = recorder.addEvent.bind(recorder);
recorder.addEvent = function(eventData) {
logEvent('Event: ' + eventData.type + ' - ' + (eventData.path || 'N/A'));
return originalAddEvent(eventData);
};
// Start recording manually
await recorder.start();
document.getElementById('startButton').disabled = true;
document.getElementById('stopButton').disabled = false;
logEvent('Recording started successfully');
} catch (error) {
console.error('Failed to start recording:', error);
logEvent('Failed to start: ' + error.message);
alert('Failed to start recording: ' + error.message);
}
}
async function stopRecording() {
if (!recorder) return;
try {
await recorder.stop();
document.getElementById('startButton').disabled = false;
document.getElementById('stopButton').disabled = true;
updateStatus('stopped', 'Not Recording');
logEvent('Recording stopped');
} catch (error) {
console.error('Failed to stop recording:', error);
alert('Failed to stop recording: ' + error.message);
}
}
function updateStatus(className, text) {
const status = document.getElementById('status');
status.className = 'status ' + className;
document.getElementById('statusText').textContent = text;
}
function logEvent(message) {
const log = document.getElementById('eventsLog');
const timestamp = new Date().toLocaleTimeString();
eventCount++;
const entry = '[' + timestamp + '] ' + message + '\n';
if (log.textContent === 'No events captured yet') {
log.textContent = entry;
} else {
log.textContent += entry;
}
// Auto-scroll to bottom
log.scrollTop = log.scrollHeight;
}
function clearEvents() {
document.getElementById('eventsLog').textContent = 'No events captured yet';
eventCount = 0;
}
// Prevent form submission
document.getElementById('testForm').addEventListener('submit', (e) => {
e.preventDefault();
logEvent('Form submitted (prevented default)');
return false;
});