Building and Configuring Widgets in Fastn

Learn how to build and configure interactive widgets in Fastn to connect apps, control actions, and deploy them seamlessly for end-users.

1. Add a New Widget

• Click on the Add Widget button located at the top-right corner.

• Choose whether to publish the widget with or without a connector.

• Search and select a connector the widget should handle.

You can pick from Fastn’s built-in connectors or connectors from your own workspace.

2. Configure Widget Settings

Inside the widget editor:

a. Tenant Visibility

• Toggle “Enable for specific tenants” if the widget should only appear for selected tenants.

• Click Add tenants to specify which tenants can access it.

b. Widget Availability

• Use the Disable toggle if you want to temporarily hide the widget from users and select your preferred Data flow Label for that.

Set Dependency Connectors

If your widget relies on one or more connectors, specify them under Dependency Connectors:

• Add required connectors (e.g., Slack).

• Mark Primary connectors if needed.

• Provide connector image and details such as:

  • Name: Slack

  • Image URL

  • Description: Enables real-time communication and automation by integrating with Slack channels and messages.

• For setting up authentication in your connector, utilize the Auth Attributes option to select your preferred authentication method. You can customize the details which will be merged with the default OAuth settings to enable users to switch methods. Choose from the following options:

i. OAuth (default)

ii. Custom Input

iii. API Key

iv. Bearer Token

v. Basic Auth

3. Add Actions to the Widget

Widgets allow you to define flow-based actions that can be triggered through UI interactions.

Click "Add" under Actions and configure the following:

Field	Description
Name	Action name (e.g., Activate, Deactivate, Configure)
Flow	Select the associated Fastn Flow
Visibility	Set visibility conditions (e.g., Always)
Action	Define the action type: Activation, Deactivation, or Configuration

In each action item, you can add the built-in Activate, Deactivate, or Configure flows. These allow you to control the state of your connected app, for example, Slack; directly from your widget. Once added, each of these flows will appear as a button in the widget interface, enabling users to trigger them as needed.

You can get the pre-built activate, deactivate and configure flows from the flows section by clicking on Templates.

Activate Flow

This flow is used to activate your connected app (e.g., Slack). Once triggered, it transitions the integration into an active state.

Deactivate Flow

This flow deactivates the app, disconnecting or disabling it as defined in your deactivation logic.

Configure Flow

Use this flow to allow users to configure settings for the connected app. It can open a form or input model based on what you've defined in the configuration flow.

4. Deploy to Live

Once all actions and configurations are complete:

• Deploy the widget to your selected environment by clicking on the "Deploy to LIVE" button at the buttom. This will deploy all your connected flows to your live environment to make it available to end-users.

• You can go to Preview from Integrate section on the Widgets page to see how the widget will appear to the end-users.