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, 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
Section titled “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
Section titled “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
Section titled “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:
- Go to AgentKit > Connections and open the connection.
- Open the Widgets tab.
- 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”
Section titled “Remove “Powered by Scalekit””Whether you can remove the badge depends on your plan; see 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
Section titled “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. 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
Section titled “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 for the connection.
Check it worked
Section titled “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.