Skip to main content

Embedded flow

The CDK provides an End-to-End widget that handles the complete Verifiable Parental Consent (VPC) flow within a single interface, covering age gate, VPC, data notices, permissions, and preferences all in one seamless experience.

What's the end-to-end widget?​

The End-to-End Widget is a comprehensive solution that handles the complete compliance flow in a single interface, covering age gate, VPC, data notices, permissions, and preferences all in one seamless experience. This widget can be used by parents either on the child's device or on their own device, providing maximum flexibility for the consent process.

Generating the widget URL​

Call the /widget/generate-e2e-url API to create an end-to-end widget URL that handles the complete VPC flow. This returns a unique URL for users to complete the age collection and parental consent process.

Example request​

POST /api/v1/widget/generate-e2e-url
Content-Type: application/json
Authorization: Bearer your-api-key

{
  "jurisdiction": "US-CA"
}

Configuration flags​

The optional flags parameter allows you to customize which parts of the flow to skip:

  • skipDataNotices: Skip data notices and consent collection
  • skipVerification: Skip verification step
  • skipPermissions: Skip permission management
  • skipPreferences: Skip preference settings

Example response​

{
  "id": "7854909b-9124-4bed-9282-24b44c4a3c97",
  "url": "https://family.k-id.com/widget?token=eyJhbGciOiJFUzM4NCIs..."
}

Embedding the widget​

Use the returned URL to create an iframe in your website or app. Users complete the age collection and trusted adult consent process through this interface, with available methods automatically adapting to jurisdictional requirements.

<div id="vpc-container">
  <iframe 
    id="vpc-widget"
    src="WIDGET_URL" 
    width="100%" 
    height="600"
    frameborder="0"
    allow="camera;payment;publickey-credentials-get;publickey-credentials-create">
  </iframe>
</div>

Handling events​

The widget emits JavaScript events that you can listen to:

For detailed information about the event structure, see Widget.AgeGate.Challenge.

window.addEventListener('message', (event) => {
  if (!event.origin.endsWith('.k-id.com')) {
    return;
  }
  
  const message = event.data;
  
  if (message.eventType === 'Widget.AgeGate.Challenge') {
    if (message.data.status === 'PASS') {
      // Parent approved consent - grant access
      console.log('Consent approved:', message.data.sessionId);
      grantAccess(message.data.sessionId);
    } else if (message.data.status === 'FAIL') {
      // Parent denied consent - restrict access
      console.log('Consent denied');
      restrictAccess();
    }
  }
});

What the widget handles​

The widget automatically handles:

  • Age Collection: Jurisdiction-appropriate age collection methods
  • Data Notices: Data notices to accept, depending on the product's configuration in the Compliance Studio
  • Permissions: Permissions to manage, depending on the product's configuration in the Compliance Studio
  • Parental Consent Challenge: If the user is determined to be a minor, a challenge is created for trusted adult approval

The specific flow depends on the jurisdiction and your product's configuration in the Compliance Studio.

For more information on implementing VPC, see the Quick Start Guide.