> **Building with AI coding agents?** Install the authstack plugin with one command. This equips your agent with accurate Scalekit implementation patterns. > > **Recommended** (the `-y` flags skip prompts, so the command runs without an interactive terminal): > ```bash > npx -y @scalekit-inc/cli setup -y > ``` > > Global: > ```bash > npm install -g @scalekit-inc/cli > scalekit setup -y > ``` > > Supports Claude Code, Cursor, GitHub Copilot, Codex + skills for other Agent Skills-compatible agents in `~/.agents/skills`. > Skills: integrate-agentkit, implement-saaskit, add-mcp-oauth, implement-sso, implement-scim. > [Full setup guide](https://docs.scalekit.com/dev-kit/build-with-ai/) --- # Brand the connect experience Make the page your users see when they connect an account look like your product: name, logo, colors, font, connection text, domain and consent screen. When a user opens an [authorization link](/agentkit/tools/authorize/), they land on a Scalekit-hosted connect page, then go to the app's consent screen to grant access. This page covers everything you can change so that flow looks like your product, and where to change it. ## What your users see The connect page shows: - Your logo next to the app's icon, and a headline that names your application: "Acme wants to connect to your Gmail". - A short overview and a description of the app the user is connecting. - A **Connect** button, and links to your terms of service and privacy policy. - A "Powered by Scalekit" badge, which some plans let you remove. After the user clicks **Connect**, the app's own consent screen shows the name of the OAuth app that asks for access. The page's address is your environment's domain, or your custom domain if you set one up. | What you change | Where | Applies to | |---|---|---| | Name, logo, favicon, font, colors, corners, background and legal links | **Customize** > **Branding** | Every connection in the environment | | App name, overview and description on the connect page | **Connections** > your connection > **Widgets** | One connection | | "Powered by Scalekit" badge | **Customize** > **Branding** | Every connection in the environment | | The domain in authorization links | **Customize** > **Custom Domain** | The environment | | The app name on the consent screen | Your own OAuth app, set on the connection | One connection | ## Brand the connect page In the AgentKit dashboard, go to **Customize** > **Branding**. The preview on the right updates as you change a setting. Save to apply your changes to the connect page. | Setting | What it changes | Accepts | |---|---|---| | **Application Name** | Your name in the headline | Text. Without a name, the headline reads "Connect to your Gmail" | | **Logo** | The logo next to the app's icon | Upload a PNG or JPG, or enter a URL for any format, including SVG. At least 36 px high | | **Favicon** | The browser tab icon | Upload a PNG or JPG, or enter a URL for any format. Square images work best | | **Font** | The font on the page | Upload a WOFF2, WOFF or TTF file of up to 2 MB, or enter an `https://` URL that points directly at one. If the font can't load, the default font is used | | **Primary Button Background** and **Primary Button Text Color** | The **Connect** button | Colors | | **Border radius** | How rounded buttons and boxes are | **None**, **Small**, **Medium** or **Large** | | **Border color** | The border of the connect card | A color | | **Background Color** | The page background | A color | | **Background Style** | The page background, with an image or gradient | A CSS `background` shorthand value | | **Terms of Service URL** and **Privacy Policy URL** | The legal links under the button | URLs. The page shows only the links you set | Branding belongs to the environment, so set it in Development and in Production. If you also use SaaSKit in the same environment, its **Branding** page edits the same settings: the name, logo, colors and font you set here also apply to your login pages. ## Describe each connection The connect page describes the app with the connector's default name and description. To write your own, for example to say what your agent does with the user's account: 1. Go to **AgentKit** > **Connections** and open the connection. 2. Open the **Widgets** tab. 3. Set the **App name** (shown in the headline in place of the connector's name), a **Short Overview** and a **Description**, then save. ## Remove "Powered by Scalekit" Whether you can remove the badge depends on your plan; see [pricing](https://www.scalekit.com/pricing). If your plan includes it, turn on **Remove "Powered by Scalekit"** in **Customize** > **Branding**. You can remove it in Production environments only. ## Use your own domain Authorization links use your environment's domain, such as `yourapp.scalekit.com`. To use your own, such as `connect.yourapp.com`, [set up a custom domain](/agentkit/advanced/custom-domain/). Custom domains work in Production environments, and availability depends on your plan. Authorization links you create after the domain is verified use it. ## Show your app on the consent screen By default, OAuth connectors that offer Scalekit's credentials ask for consent in Scalekit's name. To show your app's name, logo and terms on the consent screen instead, [use your own OAuth app](/agentkit/advanced/bring-your-own-oauth/) for the connection. > note: Provider consent screen > > The consent screen belongs to the app the user connects, such as Google or Slack. You change what it shows in that app's developer console, not in Scalekit. ## Check it worked Create an authorization link for a test user and open it in a private browser window. The connect page shows your logo, name and colors, and the address bar shows your custom domain if you set one up. ## Next - [Set up a custom domain](/agentkit/advanced/custom-domain/): Serve authorization links from your own domain. - [Use your own OAuth app](/agentkit/advanced/bring-your-own-oauth/): Show your app's name on the provider's consent screen. --- ## More Scalekit documentation | Resource | What it contains | When to use it | |----------|-----------------|----------------| | [/llms.txt](/llms.txt) | Structured index with routing hints per product area | Start here — find which documentation set covers your topic before loading full content | | [/llms-full.txt](/llms-full.txt) | Complete documentation for all Scalekit products in one file | Use when you need exhaustive context across multiple products or when the topic spans several areas | | [sitemap-0.xml](https://docs.scalekit.com/sitemap-0.xml) | Full URL list of every documentation page | Use to discover specific page URLs you can fetch for targeted, page-level answers |