Settings
Ghlconnect modal
The "Connect GoHighLevel" dialog for entering a GoHighLevel Private Integration API key, with a docs link and a Connect action gated on the field having content.
Available
Ports as-is
Examples
Rendered live from the maintained Storybook story. Lantern stores only the story id and embeds Storybook rather than duplicating the component or its demo.
Ghlconnect modal
Rendered live from Storybook
Storybook must be running for this to load — bun run start:storybook from the monorepo root, or set NEXT_PUBLIC_STORYBOOK_URL to a deployed instance.
Props
The component's public API, read from its TypeScript source. Descriptions come from TSDoc on the prop, so this table cannot drift from the component.
| Prop | Type | Default | Description |
|---|---|---|---|
open* | boolean | — | Undocumented — add TSDoc to the prop in the library. |
onOpenChange | (open: boolean) => void | — | Undocumented — add TSDoc to the prop in the library. |
onConnect | (apiKey: string) => void | — | Fired with the trimmed field contents when "Connect" is pressed. |
onHelp | () => void | — | Fired by the "How to find my API key?" link. The host owns the docs URL. |
initialApiKey | string | "" | Seeds the field so the filled state is a static story. |
title | string | "Connect GoHighLevel" | Undocumented — add TSDoc to the prop in the library. |
placeholder | string | "Private Integration API key" | Undocumented — add TSDoc to the prop in the library. |
Reference
Transcribed from the component audit. If this disagrees with the source, the source is right.
- Source
src/components/settings/ghl/GHLConnectModal.tsx- Portability
- Copies across unchanged — only the utils import path moves.
- Notes
- Use it as the initial connect step for a new GoHighLevel integration; the Connect button stays disabled until text is entered and trimmed of whitespace. It only passes the field's raw string to a callback and does not validate, store, or transmit the key itself.