Installation
How to set up Flows in your JavaScript application.
The Flows JS SDK is a lightweight library that allows you to integrate Flows into any application that runs JavaScript. Similar to our React SDK, this SDK includes a components package to simplify getting started with Flows in your application.
Check out our template projects for examples of how to implement Flows in your application.
Install the JavaScript SDK
You can install the Flows JavaScript SDK from npm:
npm i @flows/js @flows/js-componentsInitialize the SDK
Use the init function to initialize the SDK with your organization ID and environment key, which you can find in the Settings > General and Settings > Environments sections of the Flows dashboard.
import { init } from "@flows/js";
// Import the Basics V2 components and styles
import { setupJsComponents } from "@flows/js-components";
import * as components from "@flows/js-components/components";
import * as tourComponents from "@flows/js-components/tour-components";
// Import Basics V2 styles or copy them to your project and <link> them in your HTML
import "@flows/js-components/index.css";
init({
organizationId: "your-organization-id", // Found in Settings > General
environment: "production", // Default environment
userId: "your-user-id", // Identify the user
});
// Defines custom elements for `flows-floating-blocks`, `flows-slot` and all the passed UI components.
setupJsComponents({
components: { ...components },
tourComponents: { ...tourComponents },
});Add <flows-floating-blocks> custom element at the end of the <body> tag.
<body>
<!-- Your app content -->
<flows-floating-blocks></flows-floating-blocks>
</body>For a full list of supported properties, see the init function documentation.
Create your first workflow
That's it! You're now ready to create your first workflow. See our quickstart guide for more information.
Last updated on