EmbedKit
Technical Overview

How It Works

A technical deep-dive into how EmbedKit generates, deploys, and secures embeddable components for regulated industries.

Architecture

Built for enterprise security and scale

Generation Engine

LLM-powered generation with specialized prompts and templates for financial services. Components are tested before deployment.

  • • LLM-powered code generation
  • • Financial services prompt templates
  • • 50+ pre-built disclosure patterns
  • • Brand customization layer

Embed Runtime

Components run in isolated iframes with secure cross-origin communication. No access to your parent page DOM or data.

  • • Sandboxed iframe execution
  • • PostMessage API for communication
  • • CSP-compliant headers
  • • CDN-delivered assets

Data Layer

No financial account data or credentials stored. Open Banking connections are direct to your provider. Analytics are session-based and anonymized.

  • • No financial credentials stored
  • • Direct Open Banking connections
  • • Encrypted at rest and in transit
  • • Regional data residency options

Integration

Web, mobile, and API. Deploy anywhere your customers are.

Web Integration

Easiest

Script Tag

Drop a single script tag into any HTML page. Works with any CMS, static site, or legacy system.

<script src="https://embed.embedkit.ai/v1/widget.js"></script>
<div
  data-embedkit="mortgage-calc"
  data-theme="light"
></div>
React/Next.js

NPM Package

Full TypeScript support with React hooks for event handling and state management.

import { EmbedKit } from '@embedkit/react';

<EmbedKit
  component="mortgage-calc"
  onComplete={(data) => {
    // Handle form submission
  }}
/>
Full Control

REST API

Generate and manage components programmatically. Perfect for dynamic use cases or custom UIs.

POST /api/v1/components/generate
{
  "prompt": "Mortgage calculator",
  "brand": { "primary": "#000" },
  "compliance": ["psd2", "gdpr"]
}

Mobile SDKs

React Native

React Native

Same API as web. Share components between your web and mobile apps.

import { EmbedKit } from '@embedkit/react-native';

<EmbedKit
  component="mortgage-calc"
  style={{ flex: 1 }}
  onComplete={(data) => {
    navigation.navigate('Results', data);
  }}
/>
iOS

Swift SDK

Native Swift package with SwiftUI and UIKit support. Available via SPM.

import EmbedKit

let calculator = EmbedKitView(
  component: "mortgage-calc",
  theme: .light
)

calculator.onComplete = { data in
  // Handle completion
}
Android

Kotlin SDK

Native Android SDK with Jetpack Compose and View support. Available via Maven.

import ai.embedkit.sdk.EmbedKit

EmbedKitView(
  component = "mortgage-calc",
  theme = Theme.Light,
  onComplete = { data ->
    // Handle completion
  }
)

Event Handling

All integration methods support the same event callbacks for user interactions, form submissions, and analytics.

Available Events

  • onLoad - Component rendered
  • onInteraction - User engagement
  • onComplete - Form/flow completed
  • onError - Error handling
  • onAnalytics - Custom tracking

Data You Receive

  • • Form field values (user inputs)
  • • Calculation results
  • • Selected options/preferences
  • • Session and interaction metadata
  • • Compliance acknowledgments

Security & Compliance

Enterprise-grade security for regulated industries

Infrastructure Security

  • Hosted on SOC 2 Type II certified infrastructure (AWS)
  • AES-256 encryption at rest, TLS 1.3 in transit
  • 99.9% uptime target
  • EU, US, and APAC data residency options

Compliance Frameworks

  • PSD2 / Open Banking UK compliant patterns
  • GDPR data handling and consent flows
  • WCAG 2.1 AA accessibility standards
  • Custom compliance framework support

Audit Trail

Every action is logged for regulatory review. Export audit logs via API or dashboard.

{
  "event": "component.deployed",
  "timestamp": "2024-01-15T10:30:00Z",
  "actor": "user@bank.com",
  "component_id": "mortgage-calc-v2",
  "changes": ["disclosure_text_updated", "rate_source_changed"],
  "approval": {
    "approved_by": "compliance@bank.com",
    "approved_at": "2024-01-15T09:45:00Z"
  }
}
Open Banking

Direct provider connections

We don't proxy your Open Banking data. Components connect directly to your chosen provider using your credentials.

  • Bring your own Plaid, Yodlee, or TrueLayer keys
  • Data flows directly to your backend
  • We handle the UI, you handle the data
  • No EmbedKit data storage or processing

Data Flow

1
User initiates Open Banking flow
2
Component redirects to provider (your keys)
3
Provider returns token to your backend
4
Your backend fetches data, sends to component

Ready to integrate?

Try it free or request our security documentation