Skip to main content

Widgets

Overview​

In the fastn platform, Widgets are customizable UI elements used to interact with fastn flows that can be easily embedded into user apps.

Common applications of widgets are to authenticate users with third-party APIs such as Shopify and trigger related flows without requiring a fastn login.

Thus users of fastn can integrate widgets into their custom UI and serve them to their customers as visual tools to interact with flows built in fastn.

And with fastn's wide variety of community connectors, integrations of user apps with third-party APIs can be done in minutes.

Fastn-widget

Example Use Case​

We can understand widgets better through an example use case.

As a fastn user you can create flows to export Shopify products to Elasticsearch and keep the database updated with each new product addition.

With the use of a Widget, a user can automatically enable those flows at the click of a single button.

Importing the activate flow​

  • On the Flows page click on Templates on the top right. Select the Community Templates tab and click on the Shopify label. Click on the three dots next to the Activate Shopify Export template and import it.

template-1

  • 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.

var-1

var-1

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

deploy-1

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

Setting up the 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.

shopify-1

  • 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.

shopify-1

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

shopify-1

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

widget-1

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.

flow-1

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

webhook-1

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.

widget-1

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

widget-1

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

widget-1