Frontend Integration

Embed the Custom Domain Kit setup UI on the page where customers manage custom domains.

Register the Component

Register the Web Component once in your browser bundle:

import { defineCustomDomainKitSetup } from "@customdomainkit/ui";

defineCustomDomainKitSetup();

Load a Setup Session

Call your own server endpoint before rendering the setup UI:

const response = await fetch("/api/custom-domain/setup-session?tenantId=tenant_456&actorId=user_789", {
  cache: "no-store",
  headers: { Accept: "application/json" }
});
const setupSession = await response.json();

Render the Element

<custom-domainkit-setup
  app-id="app_123"
  tenant-id="tenant_456"
  actor-id="user_789"
  setup-token="cdk_st_..."
  setup-token-refresh-url="/api/custom-domain/setup-session?tenantId=tenant_456&actorId=user_789"
  api-base-url="https://cdk.example.com"
></custom-domainkit-setup>

Browser-safe Values

These values can be present in browser code:

• apiBaseUrl
• appId
• tenantId
• actorId
• setupToken
• setupTokenRefreshUrl

Never expose the app secret or webhook signing secret.

User Flow

The component lets the customer:

1. See the current custom-domain state for the tenant.
2. Add a hostname.
3. Copy DNS records.
4. Check status.
5. Delete a domain if needed.