-
Notifications
You must be signed in to change notification settings - Fork 41
update docs and announce new Link branding improvements #1770
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
5c771ff
d36b2d4
3a5a75f
9c5dd43
b5e1b9e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| --- | ||
| title: "Enhanced company branding in Link" | ||
| date: "2026-02-18" | ||
| tags: ["Product", "Update", "Link"] | ||
| authors: pmckinney | ||
| --- | ||
|
|
||
| We've expanded Link's branding options, making it easier than ever to deliver a fully branded authorization experience that feels like a native part of your product. | ||
|
|
||
| <!--truncate--> | ||
|
|
||
| ## What's new? | ||
|
|
||
| We've added new branding settings that give you greater control over how [Link](/auth-flow/overview) looks and feels to your customers. These updates are designed to help you create a seamless, trusted connection experience that reinforces your brand at every step. | ||
|
|
||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| gap: "1rem", | ||
| justifyContent: "center", | ||
| flexWrap: "wrap", | ||
| }} | ||
| > | ||
| <div style={{ textAlign: "center", flex: "1", minWidth: "280px" }}> | ||
| <img | ||
| src="/img/auth-flow/unbranded-link.png" | ||
| alt="Link without any branding applied" | ||
| /> | ||
| <p> | ||
| <em>Without branding</em> | ||
| </p> | ||
| </div> | ||
| <div style={{ textAlign: "center", flex: "1", minWidth: "280px" }}> | ||
| <img | ||
| src="/img/auth-flow/branded-link.png" | ||
| alt="Link branded using company logo, color scheme and hero image" | ||
| /> | ||
| <p> | ||
| <em>With branding</em> | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| ### Company logo on landing page | ||
|
|
||
| You can now prominently display the logo from your existing [Branding](/auth-flow/customize/branding) settings on the first connection screen your customers see. | ||
|
|
||
| Navigate to **Settings > Auth flow > Link > Onboarding** in the [Codat Portal](https://app.codat.io/settings/link-settings/onboarding) and enable the _Company logo_ setting. You must also have the _Landing page_ toggle enabled. | ||
|
|
||
| ### Navigation bar | ||
|
|
||
| The new _Navigation bar_ setting adds a branded bar to the top of the Link flow using your secondary brand color, reinforcing your identity throughout the entire journey. | ||
|
|
||
| Navigate to **Settings > Auth flow > Link > Onboarding** in the [Codat Portal](https://app.codat.io/settings/link-settings/onboarding) to enable this setting. | ||
|
|
||
| ### Secondary color | ||
|
|
||
| You can now set a _Secondary color_, exercising finer control over the look and feel of the connection flow. This color is used by the new [Navigation bar](/updates/260218-link-branding-updates#navigation-bar) element of the Link flow. | ||
|
|
||
| Navigate to **Settings > Auth flow > Branding** in the [Codat Portal](https://app.codat.io/settings/branding) to configure this setting. | ||
|
|
||
| ### Hero image | ||
|
|
||
| Add a background to the main content area of Link using the _Hero image_ setting. This lets you set the visual tone of the authorization experience from the moment your customers land on the page. | ||
|
|
||
| Navigate to **Settings > Auth flow > Branding** in the [Codat Portal](https://app.codat.io/settings/branding) to configure this setting. | ||
|
|
||
| ### Why does this matter? | ||
|
|
||
| Customizing Link to further match your branding guidelines helps achieve the following outcomes: | ||
|
|
||
| - **Increased trust:** Your customers are more likely to connect their financial data when they see familiar branding from the first screen. | ||
| - **Improved conversion:** A cohesive branded interface reduces friction and hesitation during the onboarding flow, helping you convert more customers. | ||
| - **Seamless experience:** These settings work together to create a connection experience that feels like a native part of your product, not a third party tool. | ||
|
|
||
| ## Who is this relevant for? | ||
|
|
||
| This update is relevant for all clients using [Link](/auth-flow/overview) to connect their customers' financial data. It's especially valuable if you are looking to improve conversion rates and deliver a polished onboarding experience. | ||
|
|
||
| ## How to get started? | ||
|
|
||
| The new branding settings are already available in the [Codat Portal](https://app.codat.io): | ||
|
|
||
| 1. Navigate to **[Settings > Auth flow > Link > Onboarding](https://app.codat.io/settings/link-settings/onboarding)** to enable the _Company logo_ and _Navigation bar_ toggles. | ||
| 2. Set your _Company logo_, _Secondary color_, and _Hero image_ in **[Settings > Auth flow > Branding](https://app.codat.io/settings/branding)**. | ||
|
|
||
| For more details, see our documentation on [Branding settings](/auth-flow/customize/branding) and [Link settings](/auth-flow/customize/customize-link). |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,9 +7,35 @@ banner_image: "/img/banners/link.png" | |
|
|
||
| ## Overview | ||
|
|
||
| Link is a white-labelled solution that can be matched to your company's branding. Go to **[Settings > Auth flow > Branding](https://app.codat.io/settings/branding)** in the [Codat Portal](https://app.codat.io) to tailor Link for a fully custom-branded experience. | ||
|
|
||
| The branding settings page autosaves when changes are made. You can adjust the following UI elements: | ||
| Link is a white-labelled solution that can be matched to your company's branding. Go to **[Settings > Auth flow > Branding](https://app.codat.io/settings/branding)** in the [Codat Portal](https://app.codat.io) to tailor Link for a fully custom-branded experience. The branding settings page autosaves when changes are made. | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 📝 [vale] reported by reviewdog 🐶 |
||
|
|
||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| gap: "1rem", | ||
| justifyContent: "center", | ||
| flexWrap: "wrap", | ||
| }} | ||
| > | ||
| <div style={{ textAlign: "center", flex: "1", minWidth: "280px" }}> | ||
| <img | ||
| src="/img/auth-flow/unbranded-link.png" | ||
| alt="Link without any branding applied" | ||
| /> | ||
| <p> | ||
| <em>Without branding</em> | ||
| </p> | ||
| </div> | ||
| <div style={{ textAlign: "center", flex: "1", minWidth: "280px" }}> | ||
| <img | ||
| src="/img/auth-flow/branded-link.png" | ||
| alt="Link branded using company logo, color scheme and hero image" | ||
| /> | ||
| <p> | ||
| <em>With branding</em> | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| ### Company name | ||
|
|
||
|
|
@@ -35,14 +61,33 @@ Icon requirements: | |
| - Files should not exceed 500KB. | ||
| - Recommended dimensions: 32px x 32px. | ||
|
|
||
| ### Hero image | ||
|
|
||
| This image is displayed as a background in Link, appearing behind the main content area. | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 📝 [vale] reported by reviewdog 🐶 |
||
|
|
||
| Hero image requirements: | ||
|
|
||
| - Use PNG, JPG, or JPEG file formats. | ||
| - Files should not exceed 10MB. | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 📝 [vale] reported by reviewdog 🐶 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🚫 [vale] reported by reviewdog 🐶 |
||
| - Recommended dimensions: 1920px x 1080px. | ||
|
|
||
| ### Primary color | ||
|
|
||
| You can set your brand's primary color to define the color of buttons and other elements within the Link Flow. We recommend using a dark primary color, because light colors may cause accessibility issues. | ||
|
|
||
| <img | ||
| src="/img/old/1cef143-branding.PNG" | ||
| alt="Branding settings screen with company name, logo, icon, and color picker displayed" | ||
| /> | ||
| ### Secondary color | ||
|
|
||
| You can set your brand's secondary color, which is used for the navigation bar in Link. The navigation bar can be enabled in [Link settings](/auth-flow/customize/customize-link#navigation-bar). | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 📝 [vale] reported by reviewdog 🐶 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 📝 [vale] reported by reviewdog 🐶 |
||
|
|
||
| <div style={{ textAlign: "center" }}> | ||
| <img | ||
| src="/img/auth-flow/branding.png" | ||
| alt="Branding settings screen with company name, logo, icon, hero image and color picker displayed" | ||
| /> | ||
| <p> | ||
| <em>Branding settings in the Codat Portal</em> | ||
| </p> | ||
| </div> | ||
|
|
||
| --- | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -64,11 +64,9 @@ Let your users know that some integrations are not optimized or will not connect | |
|
|
||
| Toggle whether the _Secured by Codat_ logo is shown on your authorization flow. | ||
|
|
||
| #### Restart journey | ||
| #### Navigation bar | ||
|
|
||
| Allow your customers to restart the linking process for accounting software in case their first connection attempt fails. Enabling this setting will add a "Try again" button to the connection error page. | ||
|
|
||
| It's possible to restart the linking process for commerce and banking platforms by default and no additional settings are required. | ||
| Toggle whether a navigation bar is displayed at the top of the Link flow. The bar color uses the secondary brand color you set in [Branding settings](/auth-flow/customize/branding#secondary-color). | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 📝 [vale] reported by reviewdog 🐶 |
||
|
|
||
| #### Landing page | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
📝 [vale] reported by reviewdog 🐶
[Google.Passive] In general, use active voice instead of passive voice ('be matched').