Archives

Link Categories

Integrate Power Automate with Websites and Apps - Evolvous

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: 

Integrate Power Automate with Websites and Apps

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.

Leave a comment

Your email address will not be published. Required fields are marked *