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.
Using an AI coding assistant? Install the Flows install skill to let your agent set up Flows automatically.
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.
Check out our template projects for a complete examples.
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 * as surveyComponents from "@flows/js-components/survey-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 },
surveyComponents: { ...surveyComponents },
});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