Configuring the Embedded Experience
Whether you're embedding a button to start a flow or integrating a widget that connects a third-party service (like Shopify), Fastn gives you the tools to build smooth, secure, and intuitive interacti
Last updated
Whether you're embedding a button to start a flow or integrating a widget that connects a third-party service (like Shopify), Fastn gives you the tools to build smooth, secure, and intuitive interacti
Last updated
The Embedded Experience in Fastn allows you to integrate your automated flows directly into your own product or platform. This lets your users interact with flows visually—without needing to visit Fastn or understand its backend logic. It’s ideal for creating a seamless, white-labeled automation experience inside your app.
Let customers trigger workflows from your app (e.g., sync product data or request reports).
Enable end-users to authenticate with third-party services without leaving your platform.
Visually present status or results from Fastn workflows using your own interface.
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.
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.
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.
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.
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.
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.
