Integrate Power Automate with Websites and Apps
When you integrate Power Automate with websites and apps, you unlock a whole new way to automate crucial website tasks. Here in this article, we will discuss some of the ways in which you can integrate Power Automate with websites and apps.
Learn More About Power Automate
Power Automate is your low-code automation tool that lets you automate critical tasks without any complex coding. Evolvous helps you to evolve your processes by using the excellent RPA (Robotic Process Automation) capabilities of Power Automate. Visit our Power Platform page to know more about the platform and how we help you make the most of it.
Scenarios When You Can Integrate Power Automate with Websites and Apps
Integrating Power Automate with your website and apps can be beneficial in many scenarios. Here are a few examples,
-
Sending Automated Email Notifications
You can integrate Power Automate with websites and apps to set up automated email notifications. When a user signs up on your website, makes a purchase or makes any query on your website, you will instantly get notified on multiple emails and simultaneously correct entries will be made on CRM (Customer Relationship Management) platforms that you might be using.
-
Effortless Data Synchronization
Retrieving data from your website and application and making the correct entries on other databases takes time and they are prone to errors as well. With Power Automate, you can automate data entry as it can effortlessly retrieve the information from the website or application and make simultaneous, error-free entries on databases.
-
Automate Order Processing
If you have an eCommerce website, then you can automate the entire order processing workflow, reducing processing times and ensuring quicker deliveries.
These are only some of the scenarios in which Power Automate integration with website and apps can be of benefit. Contact us today and discover how Power Automate integration with website and apps can solve your specific challenges.
How to Integrate Power Automate with Website and Apps with Flow Widgets?
You can integrate Power Automate with websites and apps with the help of Flow Widgets. Flow Widgets. These widgets help you to integrate specific functionality of Power Automate into the third-party application.
Technically, flow widgets are iFrames which are located in a host document, which points to a page in the Power Automate designer.
How Does Flow Widgets Work?
The host website or application provides the access token required by the Power Automate widget. The JavaScript SDK (JS SDK) allows the host website/application to initialize and manage the widget (iFrame) functions and life cycle.
Now there are two different widget types: Authenticated and Unauthenticated widgets
How to Integrate Power Automate with Website and Apps with Authenticated Flow Widgets?
Authenticated flow widgets give you better control over the integration and can be customized according to the specific integration conditions.
Now, to integrate Power Automate with websites and apps with authenticated flow widgets you will need to use JavaScript Software Developer Kit (JS SDK) within Power Automate to embed the widgets and provide the required user access token.
The working of the flow widget could be better understood with the diagram below:
Here is the list of authenticated flow widgets that you can use
| Widget type | Supported feature |
| flows | Shows a list of flows in a tab for personal and shared flows. Edit an existing flow or create a new flow from a template or blank. |
| flowCreation | Creates a cloud flow from a template Id that the host application provides. |
| runtime | Triggers a manual or hybrid-trigger flow that the host application provides. |
| approvalCenter | Embeds approval requests and ‘sent’ approvals. |
| templates | Shows a list of templates. The user chooses one to create a new flow. |
What is JavaScript SDK (JS SDK) in Power Automate?
The JS SDK toolkit in Power Automate to facilitate integrating Flow widgets in third-party applications. It allows the host application to handle events from the widget and interact with the Power Automate flow by sending actions to the widget.
STEP 1: Initializing the Widget
The Flow JS SDK reference needs to be added to the host application before initializing the widget. To do that, you need to run the following code.
<script src="https://flow.microsoft.com/content/msflowsdk-1.1.js"></script
Next, you will need to create a JS SDK instance by passing optional ‘hostName’ and ‘locale’ values in a JSON object.
var sdk = new MsFlowSdk({
hostName:'https://make.powerautomate.com',
locale:'en-US'
});
Replace ‘https://make.powerautomate.com’ with the URL of your website or application where you want to integrate the Power Automate flow.
Use the client locale for the widget (defaults to en-US if not specified) for the ‘locale’
After the JS SDK instance is created, you will be able to initialize and embed a Power Automate widget in a parent element in the host application. To do that, you will need to add an HTML div:
<div id="flowDiv" class="flowContainer"></div>
Once all that is done, you can initialize the Power Automate widget by using the JS SDK renderWidget() method. Please note that you will need to provide the widget type and corresponding settings.
var widget =sdk.renderWidget('<widgettype>',{
container: "flowDiv',
templatesSettings:{},
approvalCentersettings: {},
widgetStyleSettings: {}
});
Here are the parameters for renderWidget():
| Parameter | Description |
| container | ID of a DIV element on the host page where the widget will be embedded. This is a required parameter. |
| environmentId | Widgets need an environment Id. If you do not provide an Id, a default environment is used. |
| flowsSettings | Power Automate settings object |
| templatesSettings | Template settings object |
| approvalCenterSettings | Approval settings object |
Here is a sample style for the container that you can use. You can modify the container to match with the host application’s dimensions.
<head>
<style>
.flowContainer iframe {
width: 400px;
height: 1000px;
border: none;
overflow: hidden;
}
</style>
</head>
STEP 2: Requesting Access Tokens
After the JS SDK renderWidget() runs, the JS SDK will initialize an iframe which points to the Power Automate widget URL. This URL will contain the settings in the query string parameters. The widget will raise a GET_ACCESS_TOKEN event to request an access token from the host. The host will need to handle the event and then pass the token to the widget:
widget.listen("GET_ACCESS_TOKEN", function(requestParam, widgetDoneCallback) { widgetDoneCallback(null, {
token: '<accesstokenFromHost>'
});
});
The host application will maintain the token and pass it with a valid expiry date to the widget when requested. If the widget is open for longer periods, the host will check if the token is expired and refresh the token if required, before passing it to the widget.
STEP 3: Detecting if the Widget is Ready
Now, when the widget is successfully initialized, it will raise an event to notify that the widget is ready. The host can listen to the WIDGET_READY event and execute additional host code, if there are any.
widget.listen("WIDGET_READY", function() {
console.log("The flow widget is now ready.");
// other host code on widget ready
});
STEP 4: Executing Widget Actions
The host website or application will use the widget actions to send a specific action or message to the widget. Widget JS SDK provides the notify () method to send a message or a JSON payload to the widget.
Here is the code required to execute the widget action:
wiget.notify('<WIDGET_ACTION>',parameterMatchingParameterInterface)
.then(result => console.log(result))
.catch(error => console.log(error))
How to Integrate Power Automate with Websites and Apps with Unauthenticated Flow Widgets?
Using unauthenticated flow widgets to integrate Power Automate with websites and apps makes things much simpler. You can embed it directly into the host application using an iframe. It is simpler as you do not need the JS SDK or an access token.
To start, you will need to add this code to show the Power Automate templates on your website:
<iframe src="https://make.powerautomate.com/{locale}/widgets/templates/?q=(search term} &pagesize={number of templates}&{destination}&category={category}"></iframe>
Here are the parameters to be added to the code:
| Parameter | Description |
| locale | The four-letter language and region code for the template view. For example, en-us represents US English. |
| search term | The search term for the templates that you want to show in the view. For example, search SharePoint to show templates for SharePoint. |
| number of templates | The number of templates that you want to show in the view. |
| destination | The page that opens when users select the template. Enter details to show the details about the template or enter new to open the Power Automate designer. |
| category | Filters to the given template category. |
| parameters.{name} | Additional context to pass into the flow. |
Get Complete Support to Do More with Power Automate
When you are looking to integrate Power Automate with websites or apps or execute any specific task, you can get complete assistance from our Microsoft certified consultants and simplify the process. Visit our Power Automate page to know more about our consulting services.
======
Plus read
What is Microsoft Power Platform?
How to use Power Platform to add AI Capabilities to your website
