Angular

Install the JavaScript SDK and components package

You can install the Flows JavaScript SDK from npm:

npm i @flows/js @flows/js-components

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.

Create a FlowsService to handle the initialization logic, and call the service in your root component. We'll also need to tell Angular that we'll be using custom elements in our root component by adding CUSTOM_ELEMENTS_SCHEMA to the component's schemas array. And finally, add the <flows-floating-blocks> custom element to your root component's template to render floating blocks.

import { Injectable } from "@angular/core";

import { init } from "@flows/js";
import { setupJsComponents } from "@flows/js-components";
import * as components from "@flows/js-components/components";
import * as tourComponents from "@flows/js-components/tour-components";

import "@flows/js-components/index.css";

@Injectable({ providedIn: "root" })
export class FlowsService {
  init() {
    init({
      organizationId: "YOUR_ORGANIZATION_ID", // Find this in Settings > General
      userId: "YOUR_USER_ID", // Identify the user
      environment: "production", // Default environment
    });
    setupJsComponents({
      components: { ...components },
      tourComponents: { ...tourComponents },
    });
  }
}

For a full list of supported properties, see the init function documentation. For an example of how to create a custom component, see the Angular template project.

Create your first workflow

That's it! You're now ready to create your first workflow. See our quickstart guide for more information.