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.
Initialize 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.
For a full list of supported properties, see the init function documentation.
Add a listener for floating blocks
Here’s a high-level example of rendering floating blocks using a pseudo UI library. Since @flows/js
is designed to work with any JavaScript UI library/framework the example is in a generic code that illustrates how to use it with concepts that are common in most UI frameworks.
Add a listener for slot blocks
Rendering slot-specific blocks can be done by creating a reusable FlowsSlot
component. This component listens for changes to slot blocks in a specific slot ID and renders the blocks accordingly.
Optional: Use built-in components
To simplify implementation, you can use the @flows/js-components
package, which provides pre-built components and utilities for block rendering.
You can install the Flows JavaScript Components SDK from npm:
Then setup the slot components and render function for the floating blocks. Rendering of slot blocks will be handled by the flows-slot element.
You can then use custom <flows-slot>
HTML element with optional placeholder content anywhere in your HTML document to render slottable blocks.
Create your first workflow
That's it! You're now ready to create your first workflow. See our quickstart guide for more information.