Configuring the Embedded Experience

What is the Embedded Experience?

The Embedded Experience in Fastn allows you to bring your automated workflows directly into your product or platform. This gives your users a seamless, interactive way to trigger and manage workflows, without needing to log into Fastn or understand its backend logic.

It’s designed to create a white-labeled, native experience, helping you deliver integrations and automation as a built-in feature of your own app.

Where Embedding Is Useful

You can embed Fastn to:

• Let customers trigger workflows from within your app (e.g., sync product data, send alerts, or request reports).

• Allow users to authenticate with third-party services (like Shopify, Slack, or Jira) without leaving your platform.

• Display workflow status or results using your own UI components, keeping everything in one place.

Let’s walk through a real-world scenario of using Fastn’s embedded experience.

Example Use Case: Sync Shopify Products to Elasticsearch

Imagine you're building a platform for e-commerce merchants, and you want to offer product sync from Shopify to Elasticsearch—without building the integration yourself.

Here’s how you can do it using Fastn:

• Use a Prebuilt Template

  • Go to the Flows page in Fastn.

  • Click on Templates in the top-right corner.

  • Switch to the Community Templates tab and select the Shopify label.

  • Find the "Activate Shopify Export" template, click the three dots, and select Import.

• Activate with a Widget

  • Once the flow is imported, attach it to a Widget.

  • Embed the widget in your app using a simple <script> or <iframe>.

  • Your users can now click a button to authenticate with Shopify and instantly enable the sync—without any dev work on your side.

This embedded flow will keep Elasticsearch updated automatically whenever new products are added to Shopify.

• The Activate Shopify Export flow will perform multiple actions. It will prep the Elasticsearch database by handling index creation and import our required flows such as the exporting Shopify products, updating Shopify products and searching for Shopify products in Elasticsearch. Additionally, it will create the required webhooks in fastn and Shopify allowing product updates to be sent.

• Once the flow is imported, it will show up on the Flows page. Next we are going to open the flow and update the projectId in the Variables step to match the current project id which can found in the URL as shown in the images below.

• Next we are going to deploy the flow by clicking on the Deploy button on the top right.

• Once the flow is deployed we are now ready to create our widget to trigger it.

Setting up with Widget

• Go to the Connectors page, and find the Shopify connector under fastn connectors. Click on the three dots to see additional options and click on Publish.

• This will open the create a widget page with Shopify's info pre-filled. Next add the Activate Shopify Exports flow as an activate action as shown below and update the widget.

• After the update the widget will be published. The published widget can be viewed by going to the Widgets page.

• Click on the Integrate button, generate a key and click preview to open the preview page and see the created widget.

Activating the flow

• Clicking on the Activate button will trigger the authentication of Shopify connector. Which will ask for the store name and authenticate using oauth.

• Once the authentication is successful the activate flow will be triggered.

• This step will import the required flows, which can be seen deployed in the Flows page.

• A webhook with the desired configurations, will be created, that can be seen on the Webhooks page

The example above demonstrates how widgets can be used to trigger multiple flows against a particular use case.

The Shopify widget can be integrated into a user's application to allow client to export data into their own Shopify accounts by using Widget to trigger authentication and connecting to their specific accounts.

Integrating Widgets

• Widgets can be integrated as scripts or iframes.

• Their styling can also be customized to suit a user's requirements.

• Additional content can be added to widgets as part of pop-ups triggered when a client presses the action buttons.

Field-Level Validation in Configuration Flows

To enforce input validation at the field level within your configuration flows, follow these steps:

Steps to Enable Field Validation

1. Navigate to Your Configuration Flow Open the specific configuration flow where validation is needed.

2. Select the Target Step Click on the step you want to apply validation to.

3. Open Step Settings Click on the three-dot menu (⋮) associated with the step.

1. Click on Configure

1. Enable Submit Validation In the configuration pane, select the Validation tab and toggle Enable Submit Validation.

Validation Script: Empty Field and URL Format Check

Paste the following JavaScript function into the validator field:

jsCopyEditasync function validator(data = [
  {
    "Channel Name": "",
    "Webhook URL": ""
  }
]) {
  try {
    if (!data || (typeof data !== "object" && !Array.isArray(data))) {
      return { general: "Invalid data format" };
    }

    if (!Array.isArray(data)) {
      return {};
    }

    const errors = data.map((item) => {
      const entryErrors = {};

      const channelName = item["Channel Name"];
      const webhookUrl = item["Webhook URL"];

      if (!channelName || channelName.trim() === "") {
        entryErrors["Channel Name"] = "Channel Name is required";
      }

      if (!webhookUrl || webhookUrl.trim() === "") {
        entryErrors["Webhook URL"] = "Webhook URL is required";
      } else {
        try {
          new URL(webhookUrl); // throws if invalid
        } catch (_) {
          entryErrors["Webhook URL"] = "Invalid URL format";
        }
      }

      return Object.keys(entryErrors).length > 0 ? entryErrors : null;
    });

    return errors.filter((err) => err !== null).length > 0 ? errors : [];
  } catch (error) {
    return { general: "Failed to validate the data" };
  }
}

After You Add the Script

• Click Save.

• Redeploy your configuration flow.

What This Validator Does

• Ensures both "Channel Name" and "Webhook URL" are not empty.

• Validates that "Webhook URL" is in a correct URL format.

• If either field fails, the form will block submission and show appropriate error messages.