Frontend Integration

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

Load the Component

Browser script

Use this method when you do not want to add a package dependency. Load the UMD bundle once, then register the Web Component:

<script src="https://cdn.customdomainkit.com/customdomainkit-ui.umd.js"></script>
<script>
  CustomDomainKitUI.defineCustomDomainKitSetup();
</script>

The bundle exposes CustomDomainKitUI on window.

Package import

Install the package:

pnpm add @customdomainkit/ui

Then 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="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
  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.