ExpressConsent logoExpressConsent

Quickstart Guide

ExpressConsent captures visual snapshots of your website at the moment users provide consent, protecting your business from TCPA liability. This guide will get you up and running in minutes.

How It Works

  1. Capture: JavaScript module takes snapshots when users submit forms
  2. Store: Snapshots are grouped into "Lead Validations" per user session
  3. Collect: Designate which organization pays for and can access the snapshots
  4. Access: View and download snapshots via dashboard or API

No API keys required for the frontend script. All snapshots automatically link to your account using your organization ID.

Implementation

Add the Script

Include this script in your HTML <head>:

HTML

<script src="https://cdn.expressconsent.com/scripts/express-consent-script-1.1.3-build.39.js?cid=YOUR_ORGANIZATION_ID"></script>

Capture Snapshots on Form Submit

Call SnapshotTool.captureAndUpload() when users submit information (not when they just interact with fields):

document.getElementById('consentForm').addEventListener('submit', async function (event) {
  event.preventDefault()

  try {
    const result = await SnapshotTool.captureAndUpload({
      // Optional metadata for easier searching
      phoneNumber: document.getElementById('phone').value,
      formName: 'lead-generation',
    })

    // Store these IDs with your form data
    const snapshotId = result.transactionId
    const leadValidationId = result.packageData.leadValidationId

    console.log('Snapshot captured:', snapshotId)
    console.log('Lead Validation ID:', leadValidationId)

    // Continue with your form submission
    this.submit()
  } catch (error) {
    console.error('Snapshot error:', error)
    // Handle appropriately for your business logic
  }
})

Key Points:

  • Returns transactionId (individual snapshot ID) and leadValidationId (Lead Validation ID)
  • Lead Validation ID groups all snapshots from the same user session
  • Metadata makes snapshots searchable in your dashboard

Optional Enhancements

Highlight the Consent Control:

<button type="submit" data-expressconsent-highlight-label="signup-primary">Join Now</button>

form.addEventListener('submit', async function (e) {
  e.preventDefault()
  const token = 'signup-primary' // could also read from e.submitter
  await SnapshotTool.captureAndUpload({}, token)
  this.submit()
})

Mask Highly Sensitive Data:

<input type="text" name="ssn" data-expressconsent-mask />

To highlight the exact button a visitor clicked, add data-expressconsent-highlight-label with a unique value to each actionable element and pass that same value as the second argument (optional). The mask feature is optional and should be reserved for ultra-sensitive fields. For full details see the Advanced Usage guide.

Accessing Your Data

Collecting Snapshots

Snapshots must be "collected" before they're accessible. This designates which organization pays for them.

Options:

  • Auto-Collect: Enable in Settings if your organization both captures and uses leads
  • API Collection: Use sharing endpoints for lead-seller/lead-buyer workflows

Viewing Snapshots

Dashboard:

  • Go to ExpressConsent Dashboard
  • Select your domain in the sidebar
  • Each row in "Lead Validations" shows one visitor session
  • Click rows to review, download, or share snapshots

API:

  • All dashboard functionality available programmatically
  • See API Reference for details

Complete Example

Full Implementation

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lead Generation Form</title>
    <!-- Load the ExpressConsent JavaScript module -->
    <script src="https://cdn.expressconsent.com/scripts/express-consent-script-1.1.3-build.39.js?cid=YOUR_ORGANIZATION_ID"></script>
  </head>
  <body>
    <div class="form-container">
      <h1>Lead Generation Form</h1>
      <form id="leadForm">
        <div class="form-field">
          <label for="name">Full Name</label>
          <input type="text" id="name" name="name" required />
        </div>

        <div class="form-field">
          <label for="phone">Phone Number</label>
          <input type="tel" id="phone" name="phone" required />
        </div>

        <div class="form-field">
          <label for="email">Email Address</label>
          <input type="email" id="email" name="email" required />
        </div>

        <div class="consent-checkbox">
          <input id="tcpa" name="tcpa" type="checkbox" required />
          <label for="tcpa">
            I agree to receive marketing calls, texts & automated messages from Example Company at the number provided.
          </label>
        </div>

        <!-- Hidden fields to store ExpressConsent IDs -->
        <input type="hidden" id="transactionId" name="transactionId" />
        <input type="hidden" id="leadValidationId" name="leadValidationId" />

        <button type="submit" data-expressconsent-highlight>Submit</button>
      </form>
    </div>

    <div id="thankYouMessage" style="display: none;">
      <h2>Thank You!</h2>
      <p>Your information has been submitted successfully.</p>
    </div>

    <script>
      document.getElementById('leadForm').addEventListener('submit', async function (event) {
        event.preventDefault()

        const name = document.getElementById('name').value
        const phone = document.getElementById('phone').value
        const email = document.getElementById('email').value
        const consentCheckbox = document.getElementById('tcpa')

        if (!consentCheckbox.checked) {
          alert('Please agree to the terms to continue.')
          return
        }

        try {
          // Capture and upload the snapshot with metadata
          const result = await SnapshotTool.captureAndUpload({
            name: name,
            phoneNumber: phone,
            email: email,
            formType: 'lead-generation',
            consentType: 'marketing'
          })

          // Store both IDs with the form data
          const snapshotId = result.transactionId
          const leadValidationId = result.packageData.leadValidationId
          
          document.getElementById('transactionId').value = snapshotId
          document.getElementById('leadValidationId').value = leadValidationId
          
          console.log('Snapshot captured:', snapshotId)
          console.log('Lead Validation ID:', leadValidationId)

          // Show success message
          document.getElementById('leadForm').style.display = 'none'
          document.getElementById('thankYouMessage').style.display = 'block'

          // Submit form data to your backend (including both IDs)
          // Example: submitToBackend(formData)
          
        } catch (error) {
          console.error('Snapshot error:', error)
          alert('There was an error processing your request. Please try again.')
        }
      })
    </script>
  </body>
</html>

Next Steps

Was this page helpful?