diff --git a/docs/auth-flow/authorize-embedded-link.md b/docs/auth-flow/authorize-embedded-link.md
index ec259eb04..d9c8cf893 100644
--- a/docs/auth-flow/authorize-embedded-link.md
+++ b/docs/auth-flow/authorize-embedded-link.md
@@ -1,7 +1,7 @@
---
title: "Authorize with Embedded Link"
sidebar_label: Embedded Link
-description: "Embed our auth flow in your application with our low-code component"
+description: "Swiftly embed our auth flow in your application UI using our low-code component"
image: "/img/auth-flow/embedded-link-selection.png"
---
@@ -10,9 +10,9 @@ import TabItem from "@theme/TabItem";
-## Embedded Link overview
+## Overview
-Embedded Link is a pre-built JavaScript component that neatly sits in your front-end code, and can be deployed in a matter of minutes. Use it to benefit from our extensive experience in building authorization flows melded with best practices, while seamlessly embedding it into your webpage or front-end application.
+Embedded Link is a pre-built JavaScript component that neatly sits in your front-end code and can be deployed in a matter of minutes. Use it to benefit from our extensive experience in building authorization flows melded with best practices, while seamlessly embedding it into your webpage or front-end application.
The component works with all major JavaScript frameworks, including React, and also with vanilla JavaScript. You can choose to implement the component in TypeScript.
@@ -20,12 +20,11 @@ We built Embedded Link to be flexible so that you can integrate and initialize i
## Features
-* **Intuitive UI** based on our expertise and learned best practices, ensuring a high-converting auth flow
+* **Intuitive UI** based on our expertise and learned best practices ensures a high-converting auth flow
* **Authentication** in line with OAuth 2.0 standards
-* **[Customizable](/auth-flow/customize/customize-link) UI** that reflects your [company branding](/auth-flow/customize/branding)
-* **React and non-React** JavaScript compatible
-* **Fast implementation** with a pre-built code component
-* **Dynamic imports** meaning your auth flow will never fall behind our API
+* **Customizable UI** that reflects your [company branding](/auth-flow/customize/branding)
+* **React and non-React** JavaScript compatible pre-built component for fast implementation
+* **Dynamic imports** mean your auth flow will never fall behind our API
:::note Dynamic imports
@@ -42,11 +41,20 @@ We've provided a [repo with examples on GitHub](https://github.com/codatio/sdk-l
## Prerequisites
-- **Customized auth flow settings** - If you haven't already done so, customize Link on the **Link settings** page in the Codat Portal. For example, add UI copy, set file upload options, choose to make steps optional, or disable steps. The settings apply to both Embedded Link and Hosted Link.
-- **Your application** - You'll need a JavaScript application to render the component in (e.g. React, Angular). It should take care of creating companies programmatically and retrieving the `companyId` of any company you want to authorize.
+- **Customized auth flow settings**
+ If you haven't already done so, customize Link on the **Link settings** page in the Codat Portal. For example, add UI copy, set file upload options, choose to make steps optional, or disable steps. The settings apply to both Embedded Link and Hosted Link.
+- **Your application**
+ You'll need a JavaScript application to render the component in (e.g. React, Angular). It should take care of creating companies programmatically and retrieving the `companyId` of any company you want to authorize.
## Get started
+:::tip Install the npm package
+
+Take advantage of our [npm package](https://www.npmjs.com/package/@codat/sdk-link-types) so you don't have to manually import and maintain type definitions. You will benefit from it the most if you are using Typescript, so our examples are prepared with that assumption.
+
+`npm install @codat/sdk-link-types`
+:::
+
@@ -417,84 +425,106 @@ For an example of the component in action, [see our demo app](https://github.com
## Advanced options
-Most auth flow config is currently managed within the Codat Portal. If you haven't already done so, customize Link on the **Link settings** page in the Codat Portal. For example, add UI copy, set file upload options, choose to make steps optional, or disable steps. The settings apply to both Embedded Link and Hosted Link.
+Most of the configuration for the auth flow is currently managed in **Link settings** page in the Codat Portal.
-Where you need more control based on application-specific logic, or need to vary the UI conditionally, we offer programmatic control via a new `options` prop. These override any link settings set in the Portal.
+If you need more control over the UI based on application-specific logic or want to vary it conditionally, we offer programmatic control via a new `options` property that overrides the Link settings set in the Portal.
-:::warning Advanced functionality
+```
+
+```
+
+:::caution Advanced functionality
-As the options object overrides your link settings in the Portal, this can lead to internal confusion about the source of truth for what users are seeing. Ensure you document and communicate your use of the options prop internally.
+As the `options` object overrides the Link settings set in the Portal, this may result in confusion about the source of truth for what users are seeing. Ensure you document and communicate your use of the `options` prop internally.
:::
-The options prop is optional, and accepts an object containing the following optional properties:
+The `options` prop is optional and accepts an object containing the following optional properties:
-- `nonModal` - Set whether to style the UI as a modal (default true).
-- `showLandingPage` - Override whether to show the landing.
-- `showSandboxIntegrations` - Override whether sandbox integrations should be shown.
-- `theme` - Override the primary color..
-- `sourceTypes` - Override which of steps to show, including Accounting, Banking, Commerce, and Business Document.
-- `text` - Override custom text within the UI. Accepts markdown.
+| Property | Description |
+|---------------------------|------------------------------------------------------------------------------------------------------------------------------------|
+| `nonModal` | Determines whether Link is initialized with non-modal styling (no border and no close button). |
+| `showLandingPage` | Determines whether an extra landing page is displayed to the user at the start of Link. |
+| `showSandboxIntegrations` | Controls whether integrations that only connect Sandbox data are displayed for selection. |
+| `theme` | Contains options that control the visual appearance of the Link flow. |
+| `sourceTypes` | Controls the data source types (Accounting, Commerce, Banking, and Business Documents) the user can connect or upload files for. |
+| `text` | Contains options that control what text is displayed to the user. Markdown is supported. |
-The object is applied as the CodatLink component is mounted and it doesn't support reloading. Make sure to modify the options before mounting the component.
+The object is applied as the `CodatLink` component is mounted and doesn't support reloading. Make sure to modify the options before mounting the component.
### Non-modal styling
-As default, the component is designed to be presented in a modal. However, you can override this with a new `nonModal` options setting.
+By default, the Link component is designed to be presented in a modal. To override this, you can use the `nonModal` options setting. When set to `true`, it will:
-This visually:
-- Hides the close icon
-- Removes the modal-styled border and padding
+- Hide the close icon.
+- Remove the modal-styled border and padding.
-```
-
-```
+You can see an [example of this on GitHub](https://github.com/codatio/sdk-link/tree/main/examples/non-modal).
+
+### Landing page
+
+When `showLandingPage` property is set to `true`, an extra page is displayed to the user at the start of the Link flow. When set to `false`, the user is directed straigt to the navigation page.
+
+### Sandbox integrations
+
+The `showSandboxIntegrations` property controls whether Sanbox integrations are displayed for selection. This should be set to `true` for test environments and `false` for live environments.
+
+### Theme
+
+Use the `colors` property of the `theme` option to set the hex value for the `primary` color for buttons, links, and loading animations.
+
+### Source types
-You can see an [example on GitHub](https://github.com/codatio/sdk-link/tree/main/examples/non-modal).
+The `sourceTypes` option controls the source types the user can connect via the Link flow. Use the `accounting`, `banking`, `commerce`, and `businessDocuments` properties to indicate the desired source type. If you want a source type to be displayed, you must also provide its following properties:
+- `optional`: when set to `true`, the user can complete the flow without connecting an integration of the specified type or uploading relevant files.
+- `enableIntegrations`: when set to `true`, it enables the user to connect to an integration of the specified type.
+- `enableFileUpload`: when set to `true`, it allows the user to upload relevant documents. You must also enable the relevant file upload integrations in [Other integrations](https://app.codat.io/settings/integrations/other).
### Custom text
-The `text` property can be used to override text within the UI. It accepts markdown, meaning you can add links, lists, tables, and more.
-
-- `companyName` - Your company name that is displayed on the final page of the flow before connecting an integration.
-- `landing.title` - The title displayed on the first page the user sees. To use this, you must enable the landing page either by setting {@link CodatLinkOptions.showLandingPage} to true or configuring it at {@link https://app.codat.io/settings/link-settings/onboarding}.
-- `landing.subtitle` - The subtitle displayed on the first page the user sees. To use this, you must enable the landing page either by setting {@link CodatLinkOptions.showLandingPage} to true or configuring it at {@link https://app.codat.io/settings/link-settings/onboarding}.
-- `main.title` - The title displayed on the page where the user selects what source types to connect.
-- `main.subtitle` - The subtitle displayed on the page where the user selects what source types to connect.
-- `accounting.fileUpload.subtitle` - The subtitle displayed on the page where the user can upload accounting files. To use this, you must enable the accounting file upload either by setting {@link CodatLinkOptions.sourceTypes.accounting.enableFileUpload} to true or by configuring it at {@link https://app.codat.io/settings/integrations/other}
-- `banking.fileUpload.subtitle` - The subtitle displayed on the page where the user can upload banking files. To use this, you must enable the banking file upload either by setting {@link CodatLinkOptions.sourceTypes.banking.enableFileUpload} to true or by configuring it at {@link https://app.codat.io/settings/integrations/other}
-- `businessDocuments.fileUpload.subtitle` - The subtitle displayed on the page where the user can upload business documents. To use this, you must enable the business documents file upload either by setting {@link CodatLinkOptions.sourceTypes.businessDocuments.enableFileUpload} to true or by configuring it at {@link https://app.codat.io/settings/integrations/other}
-- `accounting.dataAccess.consent` - This text is displayed on the final page before connecting an accounting platform, underneath the list of data types. If you would like to display a terms and conditions link, add it here using markdown.
-- `banking.dataAccess.consent` - This text is displayed on the final page before connecting a bank account, underneath the list of data types. If you would like to display a terms and conditions link, add it here here using markdown.
-- `commerce.dataAccess.consent` - This text is displayed on the final page before connecting a commerce platform underneath the list of data types. If you would like to display a terms and conditions link, add it here using markdown.
-- `accounting.dataAccess.dataTypes` - This is the list of data types displayed on the final page before connecting an accounting platform.
-- `banking.dataAccess.dataTypes` - This is the list of data types displayed on the final page before connecting a bank account.
-- `commerce.dataAccess.dataTypes` - This is the list of data types displayed on the final page before connecting a commerce platform.
-
-One use of this is to detect which language the user speaks and set text according to their locale. You can see a [simple example of this on GitHub](https://github.com/codatio/sdk-link/tree/main/examples/locales).
+Use the `text` property to override text displayed within the Link UI. For example, you can detect the language the user speaks and set the displayed text according to their locale. You can see a [simple example of this on GitHub](https://github.com/codatio/sdk-link/tree/main/examples/locales).
+
+The property accepts Markdown, meaning you can add links, lists, tables, and more to your text. You can override the following text options:
+
+| Option | Description |
+|-----------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `companyName` | Your company name displayed on the final page of the flow before connecting an integration |
+| `landing.title` | Landing page title displayed on the first page the user sees.
To use this, enable the landing page by setting `CodatLinkOptions.showLandingPage` to `true` or configuring it in [Link settings](https://app.codat.io/settings/link-settings/onboarding). |
+| `landing.subtitle` | Landing page subtitle displayed on the first page the user sees.
To use this, enable the landing page by setting `CodatLinkOptions.showLandingPage` to `true` or configuring it in [Link settings](https://app.codat.io/settings/link-settings/onboarding). |
+| `main.title` | Title displayed on the page where the user selects what source types to connect |
+| `main.subtitle` | Subtitle displayed on the page where the user selects what source types to connect. |
+| `accounting.fileUpload.subtitle` | Subtitle displayed on the accounting file upload page.
To use this, enable the accounting file upload by setting the `sourceTypes.accounting.enableFileUpload` option to `true` or by configuring it in [Other integrations](https://app.codat.io/settings/integrations/other). |
+| `banking.fileUpload.subtitle` | Subtitle displayed on the banking file upload page.
To use this, enable the banking file upload by setting the `sourceTypes.banking.enableFileUpload` option to `true` or by configuring it in [Other integrations](https://app.codat.io/settings/integrations/other). |
+| `businessDocuments.fileUpload.subtitle` | Subtitle displayed on the business documents file upload page.
To use this, enable the business documents file upload by setting the `sourceTypes.businessDocuments.enableFileUpload` option to `true` or by configuring it in [Other integrations](https://app.codat.io/settings/integrations/other). |
+| `accounting.dataAccess.consent` | Text displayed on the final flow page before connecting an accounting platform, underneath the list of data types. If you want to display a terms and conditions link, add it here using Markdown. |
+| `banking.dataAccess.consent` | Text displayed on the final flow page before connecting a bank account, underneath the list of data types. If you want to display a terms and conditions link, add it here using Markdown. |
+| `commerce.dataAccess.consent` | Text displayed on the final flow page before connecting a commerce platform, underneath the list of data types. If you want to display a terms and conditions link, add it here using Markdown. |
+| `accounting.dataAccess.dataTypes` | List of requested data types displayed on the final flow page before connecting an accounting platform. |
+| `banking.dataAccess.dataTypes` | List of requested data types displayed on the final flow page before connecting a bank account. |
+| `commerce.dataAccess.dataTypes` | List of requested data types displayed on the final flow page before connecting a commerce platform. |
# Changelog
#### November 2023
-- **Options prop** - This new prop gives you programmatic control over link settings.
-- **Markdown support** - Text fields now accept markdown (embedded link only), giving you more control over styling and formatting.
-- **Released @codat/sdk-link-types package** - Our new [NPM package](https://www.npmjs.com/package/@codat/sdk-link-types) means you don't have to manually import and maintain the type definitions.
+- **Options property**: we introduced a new prop that gives you programmatic control over Link settings.
+- **Markdown support**: text fields now accept Markdown, giving you more control over styling and formatting. This is available via the `text` property for Embedded Link only.
+- **@codat/sdk-link-types package released**: our new [NPM package](https://www.npmjs.com/package/@codat/sdk-link-types) means you don't have to manually import and maintain the type definitions.
#### October 2023
-- **Support for non-modal views** - You can now [embed the component in non-modal views](/auth-flow/authorize-embedded-link#non-modal-styling) with our new `options` prop
-- **Reduced latency after auth** - We now poll every second to check whether the user has authed, meaning connection is confirmed faster.
+- **Support for non-modal views**: you can now [embed the component in non-modal views](/auth-flow/authorize-embedded-link#non-modal-styling) with our new `options` prop.
+- **Reduced latency after auth**: we now poll every second to check whether the user has authed, meaning connection is confirmed faster.
- **Bugs**:
+ Fixed an issue where 'Landing page' settings were not reflected.
#### June 2023
-- **Support for non-React JavaScript apps** - Without a dependency on React, you can use Embedded Link with all JavaScript frameworks or even vanilla JavaScript.
-- **Increased display control** - You now need to specify the dimensions of the Embedded Link component, which will expand to fit the given container size. Previously the component used a fixed width and height.
-- **Navigation improvements** - Source types (accounting, commerce, banking, and file upload) can now be connected in any order you choose.
-- **Performance improvements** - Link loads more quickly and can be loaded only when required.
-- **Connection status** - The connection status (success or error) is now shown during the Embedded Link flow. The SMB user can skip errors without interrupting the rest of the Link flow.
+- **Support for non-React JavaScript apps**: without a dependency on React, you can use Embedded Link with all JavaScript frameworks or even vanilla JavaScript.
+- **Increased display control**: you now need to specify the dimensions of the Embedded Link component, which will expand to fit the given container size. Previously the component used a fixed width and height.
+- **Navigation improvements**: source types (accounting, commerce, banking, and file upload) can now be connected in any order you choose.
+- **Performance improvements**: Link loads quicker and can be loaded only when required.
+- **Connection status**: the connection status (success or error) is now shown during the Embedded Link flow. The SMB user can skip errors without interrupting the rest of the Link flow.
diff --git a/docs/auth-flow/overview.md b/docs/auth-flow/overview.md
index b243cad79..dad481078 100644
--- a/docs/auth-flow/overview.md
+++ b/docs/auth-flow/overview.md
@@ -13,16 +13,6 @@ Link is a pre-built, conversion-optimized, and white-labelled authorization jour
You can fully embed our auth flow into your user journey and [use our Embedded Link component](/auth-flow/authorize-embedded-link) in your front-end code.
-```
-
-```
-
With our [rich examples](/auth-flow/authorize-embedded-link#get-started), you can have Link embedded in your application in minutes.
### Link's values