From 501c1e9ed5c41e9071264f76b57db637d19c86d9 Mon Sep 17 00:00:00 2001 From: Max Clayton Clowes Date: Mon, 18 Nov 2024 13:21:13 +0000 Subject: [PATCH] Added onconnectionstarted event, moved js examples out to a partial --- docs/auth-flow/_partial-auth-flow-examples.md | 473 +++++++++++++++++ docs/auth-flow/authorize-embedded-link.md | 477 +----------------- .../auth-flow/customize/sdk-customize-code.md | 1 + 3 files changed, 478 insertions(+), 473 deletions(-) create mode 100644 docs/auth-flow/_partial-auth-flow-examples.md 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'; ![](/img/auth-flow/embedded-link-selection.png) @@ -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`, `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