Widget Integration Guide: Activation, Configuration, and Unified Connectors

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.

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:

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.

Unified Connectors

Adding Unified Connectors

Unified Connectors in Fastn enable you to connect multiple apps seamlessly. To incorporate Unified Connectors:

• Navigate to the Action section and select Multiconnector.

• Within the flow, you can add several connectors, specifying each with its unique Connector ID.

This functionality allows for efficient integration and management of multiple applications from a single platform.

Example: Adding HubSpot Flow Syncs

To add flow syncs with HubSpot using your organization's connector, proceed with these steps:

Navigate to the Action Section in your widget and select Multiconnector to enable multiple connection functionalities.

Adding Task Flows from HubSpot

You can add individual flows related to tasks between HubSpot and your organization within your widget. This will allow for task data synchronization, providing a seamless workflow experience across platforms.

• Sync Sales from HubSpot:

  • Enable: Accelerate revenue growth by allowing real-time sales data to flow between HubSpot and your organization.

• Sync Customers from HubSpot:

  • Disable: Ensure seamless customer engagement by maintaining up-to-date contact data across systems.

• Sync Products from HubSpot:

  • Configure: Achieve unified product data across all channels by syncing your HubSpot inventory with your organization.

These syncs will be displayed as buttons within your widgets. By adding each of these flows, you can execute any desired action from a single widget interface.