diff --git a/docs/auth-flow/_partial-auth-flow-examples.md b/docs/auth-flow/_partial-auth-flow-examples.md
new file mode 100644
index 000000000..cc3c67e8b
--- /dev/null
+++ b/docs/auth-flow/_partial-auth-flow-examples.md
@@ -0,0 +1,473 @@
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+
+
+
+#### Get started with React
+
+For an example of the component in action, [see our demo app](https://github.com/codatio/sdk-link/tree/main/examples/languages/react/).
+
+1. **Create a component that mounts the SDK**
+
+ You can copy and paste the example `CodatLink.tsx` file to an appropriate location in your app. We recommend setting the component to `width: 460px; height: 840px` because it's optimized to look best with these parameters.
+
+2. **Use the component to mount the SDK**
+
+ We suggest wrapping the `CodatLink` component in a modal to [adjust its positioning](https://github.com/codatio/sdk-link/blob/main/examples/languages/react/src/App.css). Your component can also manage when to [display the Link component](https://github.com/codatio/sdk-link/blob/main/examples/languages/react/src/App.tsx), passing the relevant company ID and callbacks.
+
+
+```js
+// AuthFlow.tsx
+
+import {
+ ConnectionCallbackArgs,
+ ErrorCallbackArgs,
+} from "@codat/sdk-link-types"
+import { useState } from "react";
+import { CodatLink } from "./components/CodatLink";
+
+function App() {
+ const [companyId, setCompanyId] = useState("");
+ const [modalOpen, setModalOpen] = useState(false);
+ const [isFinished, setIsFinished] = useState(false);
+
+ const onConnection = (connection: ConnectionCallbackArgs) => {
+ // Perform any logic here that should happen when a connection is linked
+ console.log(`New connection linked with ID: ${connection.connectionId}`);
+ }
+ const onClose = () => setModalOpen(false);
+ const onFinish = () => {
+ onClose();
+ setIsFinished(true);
+ }
+ const onError = (error: ErrorCallbackArgs) => {
+ // this error should be logged in your error tracking service
+ console.error(`Codat Link SDK error`, error);
+ if (!error.userRecoverable) {
+ onClose();
+ }
+ }
+
+ return (
+
+
Some content
+
+
+
+ {modalOpen && (
+
+
+
+ )};
+
+ );
+};
+ ```
+
+3. **Conditional steps**
+
+ - **If you're using TypeScript**, extend your type declarations with our types by installing the types package using `npm install --save-dev @codat/sdk-link-types`. Otherwise, delete the type-related code in the snippets.
+
+ - **If you're using content security policy (CSP) headers**, edit these headers:
+
+ * Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src`, `style-src`, `font-src`, `connect-src`, `img-src`).
+ * Add `unsafe-inline` to `style-src`. Do *not* use a hash because this can change at any time without warning.
+
+
+
+
+
+#### Get started with NextJS
+
+For an example of the component in action, [see our demo app](https://github.com/codatio/sdk-link/tree/main/examples/languages/next/).
+
+:::note NextJS and urlImports
+
+NextJS is opinionated about the import strategy we're suggesting, and has an experimental feature called [urlImports](https://nextjs.org/docs/app/api-reference/next-config-js/urlImports). If you follow our NextJS example, you'll be warned you need to use the urlImports feature.
+
+Link SDK and urlImports are not compatible, because NextJS assumes the resources are static and caches the SDK, causing various issues.
+
+In the example below, you'll see that we use webpack's [magic comments](https://webpack.js.org/api/module-methods/#magic-comments) feature to avoid NextJS's caching and use normal [import()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) behavior.
+:::
+
+1. **Create a component that mounts the SDK**
+
+ You can copy and paste the example `CodatLink.tsx` file to an appropriate location in your app. We recommend setting the component to `width: 460px; height: 840px` because it's optimized to look best with these parameters.
+
+ We use [`"use client"`](https://react.dev/reference/rsc/use-client) in the script to define this as client-side code, and the import is ignored in webpack to avoid NextJS caching (as above).
+
+2. **Use the component to mount the SDK**
+
+ We suggest wrapping the `CodatLink` component in a modal to [adjust its positioning](https://github.com/codatio/sdk-link/blob/main/examples/languages/next/src/app/page.module.css). Your component can also manage when to [display the Link component](https://github.com/codatio/sdk-link/blob/main/examples/languages/next/src/app/page.tsx), passing the relevant company ID and callbacks.
+
+```js
+ // page.tsx
+
+ "use client";
+
+import {CodatLink} from "./components/CodatLink";
+import Image from "next/image";
+import styles from "./page.module.css";
+import {useState} from "react";
+import {
+ ConnectionCallbackArgs,
+ ErrorCallbackArgs,
+} from "@codat/sdk-link-types";
+
+export default function Home() {
+ const [companyId, setCompanyId] = useState("");
+ const [modalOpen, setModalOpen] = useState(false);
+ const [isFinished, setIsFinished] = useState(false);
+
+ const onConnection = (connection: ConnectionCallbackArgs) => {
+ // Perform any logic here that should happen when a connection is linked
+ console.log(`New connection linked with ID: ${connection.connectionId}`);
+ }
+ const onClose = () => setModalOpen(false);
+ const onFinish = () => {
+ onClose();
+ setIsFinished(true);
+ }
+ const onError = (error: ErrorCallbackArgs) => {
+ // this error should be logged in your error tracking service
+ console.error(`Codat Link SDK error`, error);
+ if (!error.userRecoverable) {
+ onClose();
+ }
+ }
+
+ return (
+
+ // ... some other components
+ {modalOpen && (
+
+
+
+ )}
+
+ );
+ };
+```
+
+3. **Conditional steps**
+
+ - **If you're using TypeScript**, extend your type declarations with our types by installing the types package using `npm install --save-dev @codat/sdk-link-types`. Otherwise, delete the type related code in the snippets.
+
+ - **If you're using content security policy (CSP) headers**, edit these headers:
+
+ * Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src`, `style-src`, `font-src`, `connect-src`, `img-src`).
+ * Add `unsafe-inline` to `style-src`. Do *not* use a hash because this can change at any time without warning.
+
+
+
+
+
+#### Get started with JavaScript
+
+For an example of the component in action, [see our demo app](https://github.com/codatio/sdk-link/tree/main/examples/languages/javascript).
+
+1. **Create a target `div` for the `CodatLink` component**
+
+ It should have an `id` of `codat-link-container`.
+
+ The `CodatLink` component will be mounted within this div. We recommend setting `width: 460px; height: 840px` for this element and styling it as a modal by nesting it within a modal wrapper (e.g. `position: fixed; inset: 0`). The component is optimized to look best with these parameters.
+
+ The created `CodatLink` component expands to fit 100% of the specified dimensions.
+
+2. **Import the Link SDK component**
+
+ If you're using the component inside a `script` tag, the tag must have `type="module"` set.
+
+```bash
+ import { CodatLink } from "https://link-sdk.codat.io";
+```
+
+3. **Define callbacks**
+
+```js
+ const closeCallback = () => {
+ linkSdkTarget.style.pointerEvents = "none";
+ linkSdkTarget.removeChild(linkSdkTarget.children[0]);
+ };
+
+ const onClose = () => closeCallback();
+
+ const onConnection = (connection) => {
+ // Perform any logic here that should happen when a connection is linked
+ console.log(`New connection linked with ID: ${connection.connectionId}`);
+ };
+
+ const onFinish = () => {
+ onClose();
+ toggleLinkCompletedDiv(true);
+ };
+
+ const onError = (error) => (error) => {
+ // this error should be logged in your error tracking service
+ console.error(`Codat Link SDK error`, error);
+ if (!error.userRecoverable) {
+ onClose();
+ }
+ };
+```
+
+4. **Initialize the Link SDK component in your app**
+
+ Supply the `companyId` of the company you want to authorize:
+
+```js
+ const target = document.querySelector("#codat-link-container");
+
+ const openModal = () => {
+ linkSdkTarget.style.pointerEvents = "initial";
+ new CodatLink({
+ target: linkSdkTarget,
+ props: {
+ companyId,
+ onConnection,
+ onClose,
+ onFinish,
+ onError,
+ },
+ });
+ };
+```
+
+5. **Conditional steps**
+
+ - **If you're using TypeScript**, extend your type declarations with our types. Download the `types.d.ts` file, then copy and paste its contents into a new or existing `.d.ts` file.
+ - **If you're using content security policy (CSP) headers**, edit these headers:
+ * Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src`, `style-src`, `font-src`, `connect-src`, `img-src`).
+ * Add `unsafe-inline` to `style-src`. Do *not* use a hash because this can change at any time without warning.
+
+
+
+
+
+#### Get started with Angular
+
+For an example of the component in action, [see our demo app](https://github.com/codatio/sdk-link/tree/main/examples/languages/angular).
+
+:::note Angular and urlImports
+
+In the example below, we use webpack's [magic comments](https://webpack.js.org/api/module-methods/#magic-comments) feature to avoid Angular's caching and use normal [import()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) behavior.
+:::
+
+1. **Create a component that mounts the SDK**
+
+ See the `codat-link folder` for an example module.
+
+2. **Define company ID and callbacks**
+
+```js
+//app.component.ts
+
+ openLink() {
+ if (this.companyId) {
+ this.linkOpen = true;
+ }
+ }
+
+ closeLink() {
+ this.linkOpen = false;
+ }
+
+ onConnection(connection: ConnectionCallbackArgs) {
+ // Perform any logic here that should happen when a connection is linked
+ console.log(`New connection linked with ID: ${connection.connectionId}`);
+ }
+
+ onError(error: ErrorCallbackArgs) {
+ // this error should be logged in your error tracking service
+ console.error(`Codat Link SDK error`, error);
+ if (!error.userRecoverable) {
+ this.closeLink();
+ }
+ }
+
+ onFinish() {
+ this.closeLink();
+ this.linkFinished = true;
+ }
+
+ reset() {
+ this.linkFinished = false;
+ }
+ }
+
+```
+
+3. **Use the component to mount the SDK**
+
+```html
+
+
+
+
+```
+4. **Conditional steps**
+
+ - **If you're using TypeScript**, extend your type declarations with our types. Download the `types.d.ts` file, then copy and paste its contents into a new or existing `.d.ts` file.
+ - **If you're using content security policy (CSP) headers**, edit these headers:
+ * Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src`, `style-src`, `font-src`, `connect-src`, `img-src`).
+ * Add `unsafe-inline` to `style-src`. Do *not* use a hash because this can change at any time without warning.
+
+
+
+
+
+#### Get started with Vue
+
+For an example of the component in action, [see our demo app](https://github.com/codatio/sdk-link/tree/main/examples/languages/vue).
+
+1. **Create a component that mounts the SDK**
+
+ You can copy and paste the example `CodatLink.vue` file to an appropriate location in your app. We recommend setting `width: 460px; height: 840px` for this component because it's optimized to look best with these parameters.
+
+2. **Use this component to mount the SDK**
+
+ We suggest wrapping the `CodatLink` component in a modal to [adjust its positioning](https://github.com/codatio/sdk-link/blob/main/examples/languages/vue/src/App.vue). The component can also manage when to [display the Link component](https://github.com/codatio/sdk-link/blob/main/examples/languages/vue/src/App.vue), passing the relevant company ID and callbacks.
+
+ ```js
+ // App.vue
+
+
+
+
+
+
+
+
+
+
+ ```
+
+4. **Conditional steps**
+
+ - **If you're using TypeScript**, extend your type declarations with our types. Download the `types.d.ts` file, then copy and paste its contents into a new or existing `.d.ts` file.
+ - **If you're using content security policy (CSP) headers**, edit these headers:
+ * Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src`, `style-src`, `font-src`, `connect-src`, `img-src`).
+ * Add `unsafe-inline` to `style-src`. Do *not* use a hash because this can change at any time without warning.
+
+
+
+
+
+#### Get started with Svelte
+
+For an example of the component in action, [see our demo app](https://github.com/codatio/sdk-link/tree/main/examples/languages/svelte).
+
+1. **Create a component that mounts the SDK**
+
+ You can copy and paste the example `CodatLink.svelte` file to an appropriate location in your Svelte app. We recommend setting `width: 460px; height: 840px` for this component because it's optimized to look best with these parameters.
+
+2. **Use the component to mount the SDK**
+
+ We suggest wrapping the `CodatLink` component in a modal to [adjust its positioning](https://github.com/codatio/sdk-link/blob/main/examples/languages/svelte/src/App.svelte). The component can also manage when to [display the Link component](https://github.com/codatio/sdk-link/blob/main/examples/languages/svelte/src/App.svelte), passing the relevant company ID and callbacks.
+
+ ```js
+ // App.svelte
+
+
+
+
+
+ {#if modalOpen}
+
+
+
+ {/if}
+
+
+
+ ```
+
+4. **Conditional steps**
+
+ - **If you're using TypeScript**, extend your type declarations with our types. Download the `types.d.ts` file, then copy and paste its contents into a new or existing `.d.ts` file.
+ - **If you're using content security policy (CSP) headers**, edit these headers:
+ * Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src`, `style-src`, `font-src`, `connect-src`, `img-src`).
+ * Add `unsafe-inline` to `style-src`. Do *not* use a hash because this can change at any time without warning.
+
+
+
+
\ No newline at end of file
diff --git a/docs/auth-flow/authorize-embedded-link.md b/docs/auth-flow/authorize-embedded-link.md
index 5a6a4d937..70c2450f8 100644
--- a/docs/auth-flow/authorize-embedded-link.md
+++ b/docs/auth-flow/authorize-embedded-link.md
@@ -5,9 +5,8 @@ description: "Embed our auth flow in your application UI using our low-code comp
banner_image: "/img/banners/link.png"
---
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
import ReadNext from "@components/ReadNext";
+import CodeExamples from './_partial-auth-flow-examples.md';
@@ -69,476 +68,7 @@ Take advantage of our [npm package](https://www.npmjs.com/package/@codat/sdk-lin
:::
-
-
-
-#### Get started with React
-
-For an example of the component in action, [see our demo app](https://github.com/codatio/sdk-link/tree/main/examples/languages/react/).
-
-1. **Create a component that mounts the SDK**
-
- You can copy and paste the example `CodatLink.tsx` file to an appropriate location in your app. We recommend setting the component to `width: 460px; height: 840px` because it's optimized to look best with these parameters.
-
-2. **Use the component to mount the SDK**
-
- We suggest wrapping the `CodatLink` component in a modal to [adjust its positioning](https://github.com/codatio/sdk-link/blob/main/examples/languages/react/src/App.css). Your component can also manage when to [display the Link component](https://github.com/codatio/sdk-link/blob/main/examples/languages/react/src/App.tsx), passing the relevant company ID and callbacks.
-
-
-```js
-// AuthFlow.tsx
-
-import {
- ConnectionCallbackArgs,
- ErrorCallbackArgs,
-} from "@codat/sdk-link-types"
-import { useState } from "react";
-import { CodatLink } from "./components/CodatLink";
-
-function App() {
- const [companyId, setCompanyId] = useState("");
- const [modalOpen, setModalOpen] = useState(false);
- const [isFinished, setIsFinished] = useState(false);
-
- const onConnection = (connection: ConnectionCallbackArgs) => {
- // Perform any logic here that should happen when a connection is linked
- console.log(`New connection linked with ID: ${connection.connectionId}`);
- }
- const onClose = () => setModalOpen(false);
- const onFinish = () => {
- onClose();
- setIsFinished(true);
- }
- const onError = (error: ErrorCallbackArgs) => {
- // this error should be logged in your error tracking service
- console.error(`Codat Link SDK error`, error);
- if (!error.userRecoverable) {
- onClose();
- }
- }
-
- return (
-
-
Some content
-
-
-
- {modalOpen && (
-
-
-
- )};
-
- );
-};
- ```
-
-3. **Conditional steps**
-
- - **If you're using TypeScript**, extend your type declarations with our types by installing the types package using `npm install --save-dev @codat/sdk-link-types`. Otherwise, delete the type-related code in the snippets.
-
- - **If you're using content security policy (CSP) headers**, edit these headers:
-
- * Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src`, `style-src`, `font-src`, `connect-src`, `img-src`).
- * Add `unsafe-inline` to `style-src`. Do *not* use a hash because this can change at any time without warning.
-
-
-
-
-
-#### Get started with NextJS
-
-For an example of the component in action, [see our demo app](https://github.com/codatio/sdk-link/tree/main/examples/languages/next/).
-
-:::note NextJS and urlImports
-
-NextJS is opinionated about the import strategy we're suggesting, and has an experimental feature called [urlImports](https://nextjs.org/docs/app/api-reference/next-config-js/urlImports). If you follow our NextJS example, you'll be warned you need to use the urlImports feature.
-
-Link SDK and urlImports are not compatible, because NextJS assumes the resources are static and caches the SDK, causing various issues.
-
-In the example below, you'll see that we use webpack's [magic comments](https://webpack.js.org/api/module-methods/#magic-comments) feature to avoid NextJS's caching and use normal [import()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) behavior.
-:::
-
-1. **Create a component that mounts the SDK**
-
- You can copy and paste the example `CodatLink.tsx` file to an appropriate location in your app. We recommend setting the component to `width: 460px; height: 840px` because it's optimized to look best with these parameters.
-
- We use [`"use client"`](https://react.dev/reference/rsc/use-client) in the script to define this as client-side code, and the import is ignored in webpack to avoid NextJS caching (as above).
-
-2. **Use the component to mount the SDK**
-
- We suggest wrapping the `CodatLink` component in a modal to [adjust its positioning](https://github.com/codatio/sdk-link/blob/main/examples/languages/next/src/app/page.module.css). Your component can also manage when to [display the Link component](https://github.com/codatio/sdk-link/blob/main/examples/languages/next/src/app/page.tsx), passing the relevant company ID and callbacks.
-
-```js
- // page.tsx
-
- "use client";
-
-import {CodatLink} from "./components/CodatLink";
-import Image from "next/image";
-import styles from "./page.module.css";
-import {useState} from "react";
-import {
- ConnectionCallbackArgs,
- ErrorCallbackArgs,
-} from "@codat/sdk-link-types";
-
-export default function Home() {
- const [companyId, setCompanyId] = useState("");
- const [modalOpen, setModalOpen] = useState(false);
- const [isFinished, setIsFinished] = useState(false);
-
- const onConnection = (connection: ConnectionCallbackArgs) => {
- // Perform any logic here that should happen when a connection is linked
- console.log(`New connection linked with ID: ${connection.connectionId}`);
- }
- const onClose = () => setModalOpen(false);
- const onFinish = () => {
- onClose();
- setIsFinished(true);
- }
- const onError = (error: ErrorCallbackArgs) => {
- // this error should be logged in your error tracking service
- console.error(`Codat Link SDK error`, error);
- if (!error.userRecoverable) {
- onClose();
- }
- }
-
- return (
-
- // ... some other components
- {modalOpen && (
-
-
-
- )}
-
- );
- };
-```
-
-3. **Conditional steps**
-
- - **If you're using TypeScript**, extend your type declarations with our types by installing the types package using `npm install --save-dev @codat/sdk-link-types`. Otherwise, delete the type related code in the snippets.
-
- - **If you're using content security policy (CSP) headers**, edit these headers:
-
- * Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src`, `style-src`, `font-src`, `connect-src`, `img-src`).
- * Add `unsafe-inline` to `style-src`. Do *not* use a hash because this can change at any time without warning.
-
-
-
-
-
-#### Get started with JavaScript
-
-For an example of the component in action, [see our demo app](https://github.com/codatio/sdk-link/tree/main/examples/languages/javascript).
-
-1. **Create a target `div` for the `CodatLink` component**
-
- It should have an `id` of `codat-link-container`.
-
- The `CodatLink` component will be mounted within this div. We recommend setting `width: 460px; height: 840px` for this element and styling it as a modal by nesting it within a modal wrapper (e.g. `position: fixed; inset: 0`). The component is optimized to look best with these parameters.
-
- The created `CodatLink` component expands to fit 100% of the specified dimensions.
-
-2. **Import the Link SDK component**
-
- If you're using the component inside a `script` tag, the tag must have `type="module"` set.
-
-```bash
- import { CodatLink } from "https://link-sdk.codat.io";
-```
-
-3. **Define callbacks**
-
-```js
- const closeCallback = () => {
- linkSdkTarget.style.pointerEvents = "none";
- linkSdkTarget.removeChild(linkSdkTarget.children[0]);
- };
-
- const onClose = () => closeCallback();
-
- const onConnection = (connection) => {
- // Perform any logic here that should happen when a connection is linked
- console.log(`New connection linked with ID: ${connection.connectionId}`);
- };
-
- const onFinish = () => {
- onClose();
- toggleLinkCompletedDiv(true);
- };
-
- const onError = (error) => (error) => {
- // this error should be logged in your error tracking service
- console.error(`Codat Link SDK error`, error);
- if (!error.userRecoverable) {
- onClose();
- }
- };
-```
-
-4. **Initialize the Link SDK component in your app**
-
- Supply the `companyId` of the company you want to authorize:
-
-```js
- const target = document.querySelector("#codat-link-container");
-
- const openModal = () => {
- linkSdkTarget.style.pointerEvents = "initial";
- new CodatLink({
- target: linkSdkTarget,
- props: {
- companyId,
- onConnection,
- onClose,
- onFinish,
- onError,
- },
- });
- };
-```
-
-5. **Conditional steps**
-
- - **If you're using TypeScript**, extend your type declarations with our types. Download the `types.d.ts` file, then copy and paste its contents into a new or existing `.d.ts` file.
- - **If you're using content security policy (CSP) headers**, edit these headers:
- * Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src`, `style-src`, `font-src`, `connect-src`, `img-src`).
- * Add `unsafe-inline` to `style-src`. Do *not* use a hash because this can change at any time without warning.
-
-
-
-
-
-#### Get started with Angular
-
-For an example of the component in action, [see our demo app](https://github.com/codatio/sdk-link/tree/main/examples/languages/angular).
-
-:::note Angular and urlImports
-
-In the example below, we use webpack's [magic comments](https://webpack.js.org/api/module-methods/#magic-comments) feature to avoid Angular's caching and use normal [import()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) behavior.
-:::
-
-1. **Create a component that mounts the SDK**
-
- See the `codat-link folder` for an example module.
-
-2. **Define company ID and callbacks**
-
-```js
-//app.component.ts
-
- openLink() {
- if (this.companyId) {
- this.linkOpen = true;
- }
- }
-
- closeLink() {
- this.linkOpen = false;
- }
-
- onConnection(connection: ConnectionCallbackArgs) {
- // Perform any logic here that should happen when a connection is linked
- console.log(`New connection linked with ID: ${connection.connectionId}`);
- }
-
- onError(error: ErrorCallbackArgs) {
- // this error should be logged in your error tracking service
- console.error(`Codat Link SDK error`, error);
- if (!error.userRecoverable) {
- this.closeLink();
- }
- }
-
- onFinish() {
- this.closeLink();
- this.linkFinished = true;
- }
-
- reset() {
- this.linkFinished = false;
- }
- }
-
-```
-
-3. **Use the component to mount the SDK**
-
-```html
-
-
-
-
-```
-4. **Conditional steps**
-
- - **If you're using TypeScript**, extend your type declarations with our types. Download the `types.d.ts` file, then copy and paste its contents into a new or existing `.d.ts` file.
- - **If you're using content security policy (CSP) headers**, edit these headers:
- * Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src`, `style-src`, `font-src`, `connect-src`, `img-src`).
- * Add `unsafe-inline` to `style-src`. Do *not* use a hash because this can change at any time without warning.
-
-
-
-
-
-#### Get started with Vue
-
-For an example of the component in action, [see our demo app](https://github.com/codatio/sdk-link/tree/main/examples/languages/vue).
-
-1. **Create a component that mounts the SDK**
-
- You can copy and paste the example `CodatLink.vue` file to an appropriate location in your app. We recommend setting `width: 460px; height: 840px` for this component because it's optimized to look best with these parameters.
-
-2. **Use this component to mount the SDK**
-
- We suggest wrapping the `CodatLink` component in a modal to [adjust its positioning](https://github.com/codatio/sdk-link/blob/main/examples/languages/vue/src/App.vue). The component can also manage when to [display the Link component](https://github.com/codatio/sdk-link/blob/main/examples/languages/vue/src/App.vue), passing the relevant company ID and callbacks.
-
- ```js
- // App.vue
-
-
-
-
-
-
-
-
-
-
- ```
-
-4. **Conditional steps**
-
- - **If you're using TypeScript**, extend your type declarations with our types. Download the `types.d.ts` file, then copy and paste its contents into a new or existing `.d.ts` file.
- - **If you're using content security policy (CSP) headers**, edit these headers:
- * Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src`, `style-src`, `font-src`, `connect-src`, `img-src`).
- * Add `unsafe-inline` to `style-src`. Do *not* use a hash because this can change at any time without warning.
-
-
-
-
-
-#### Get started with Svelte
-
-For an example of the component in action, [see our demo app](https://github.com/codatio/sdk-link/tree/main/examples/languages/svelte).
-
-1. **Create a component that mounts the SDK**
-
- You can copy and paste the example `CodatLink.svelte` file to an appropriate location in your Svelte app. We recommend setting `width: 460px; height: 840px` for this component because it's optimized to look best with these parameters.
-
-2. **Use the component to mount the SDK**
-
- We suggest wrapping the `CodatLink` component in a modal to [adjust its positioning](https://github.com/codatio/sdk-link/blob/main/examples/languages/svelte/src/App.svelte). The component can also manage when to [display the Link component](https://github.com/codatio/sdk-link/blob/main/examples/languages/svelte/src/App.svelte), passing the relevant company ID and callbacks.
-
- ```js
- // App.svelte
-
-
-
-
-
- {#if modalOpen}
-
-
-
- {/if}
-
-
-
- ```
-
-4. **Conditional steps**
-
- - **If you're using TypeScript**, extend your type declarations with our types. Download the `types.d.ts` file, then copy and paste its contents into a new or existing `.d.ts` file.
- - **If you're using content security policy (CSP) headers**, edit these headers:
- * Allowlist Codat by adding `*.codat.io` to `default-src` (or each of `script-src`, `style-src`, `font-src`, `connect-src`, `img-src`).
- * Add `unsafe-inline` to `style-src`. Do *not* use a hash because this can change at any time without warning.
-
-
-
-
+
:::note Dynamic imports
@@ -552,7 +82,8 @@ You can add custom logic into our SDK by using callback functions to complete an
| Property | Description | Arguments |
|----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `onConnection` | Called when a connection is successfully authorized and moved out of a `pending` state or files are uploaded. | A `connection` object containing the following properties: `connectionId` - unique identifier of the connection. |
+| `onConnectionStarted` | Called when the user selects their integration. A connection is successfully created in a `pending` state. | A `connection` object containing the following properties: `connectionId` - unique identifier of the connection. |
+| `onConnection` | Called when a connection is successfully authorized and moved out of a `pending` state or files are uploaded. | A `connection` object containing the following properties: `connectionId` - unique identifier of the connection. |
| `onFinish` | Called when the user completes all required steps of the connection flow and clicks the "Complete" button. We recommend unmounting the `CodatLink` component in this callback. In the React example above, we call `setModalOpen(false)` to do this. | |
| `onClose` | Called when the user clicks the "X" ("Close") button of the connection flow. We recommend removing the `CodatLink` component in this callback. In the React example above, we call `setModalOpen(false)` to do this. | |
| `onError` | Called when an error occurs in the connection flow, returning the error information.
**Log these errors.** We also recommend unmounting the `CodatLink` component in production if the `userRecoverable` parameter is `false`. | An `error` object containing the following properties:
`correlationId` - internal identifier used to track errors within Codat
`message` - descriptive error response
`errorCode` - numerical code of the error
`userRecoverable` - boolean value indicating whether the error can be resolved by the user.
`correlationId`, `message`, and `errorCode` are optional and may not be available in all errors. |
diff --git a/docs/auth-flow/customize/sdk-customize-code.md b/docs/auth-flow/customize/sdk-customize-code.md
index 618509d3d..9b993bde1 100644
--- a/docs/auth-flow/customize/sdk-customize-code.md
+++ b/docs/auth-flow/customize/sdk-customize-code.md
@@ -49,6 +49,7 @@ As the `options` object overrides the Link settings set in the Portal, this may
```js