1. Introduction
This article explains about how to create solutions and associate them to plans in webmethods.io Embed.
2. Pre-Requisite
To use webMethods.io Embed you will need a webMethods.io Integration tenant account where embed is enabled.
In this article we are going to create a solution where if we create a board in Trello it will automatically create a list in wunderlist platform.
In order to achieve that in Trello site copy key,consumer secret by logging into https://trello.com/app-key
and create an application in wunderlist by logging into (https://www.wunderlist.com/), after creating the app you will get the ID, client secret as below.
3. Navigate to webmethods.io Embed admin portal
Once webMethods.io Embed is enabled for your tenant, you can see the ‘webMethods.io Embed’ option in the App Switcher panel.
When you click on it, you will be redirected to the webMethods.io Embed admin portal. From here, you can configure the settings to integrate webMethods.io Embed with your application.
4. Create Default Plan in Admin Portal
The Plans tab allows you to define how many transactions and connectors are available under a specific plan, which you can then assign to one or more users.
To get started with configuration settings, you would first need to create a default plan. To do so, navigate to ‘Embed > Embed Settings > Plans’ and click on ‘Add New’ button
A new window will appear, through which you can create the default plan for your tenant. In this case we have used default type as ‘true’ and as connectors.
Name: Provide a name for the default plan.
Plan Code: Provide a unique ID for the plan.
Plan Type: Select the ‘individual option and set the value for ‘Default Type’ field to ‘true’.
Transactions: Specify the transaction limit for this plan.
Connectors: Trello and wunderlist (used in this article)
Once this is done, click ‘Add’. This will create the default plan in your Embed Admin portal.
5. Adding a new OAuth
Create OAuth for Trello and Wunderlist accounts.
For Trello : (get the consumer key, secret details, client id from the app created in pre-requisite section)
For Wunderlist:
6. Creating Solutions
The solutions tab lets you view and manage the existing solutions of your Embed Admin account.
Solutions: Name of the solution
Instances: Number of times the solution has been instantiated by users
Published: Whether the solution has been published on the service website. You can use the toggle button to publish or unpublish the workflows.
Published on: The date on which the solution was published.
Actions: Contains action controls to manage solutions.
- Deploy to Production: Deploy the associated solution on to the production environment of your website/application.
- Edit Solution Schema: Edit the solution schema
- Delete Solution: Delete the associated solution from Embed Admin
Before creating a solution in webmethods.io Embed, you need to create a project and workflow.
Navigate to projects -> New project, name the project as ‘ Demo’
Under the project create a workflow and select the Trello trigger as first step
Click next in the select trigger select New Board and in Authorize Trello click on + icon , Default Authorization
Allow the application to access your Trello account in the next window. By allowing you will get the Trello account and say next and skip.
In the next step select the wunderlist connector from the connectors list.
Click on the gear icon and select the action ‘Create List’ from the dropdown, for Authorize wunderlist click on + button -> Default Authorization and in the next window say ‘Allow’.
Upon completion of the above steps, your workflow will look like below, name the workflow and save.
Navigate back to the projects tab and locate the card associated with the project you want to submit as a solution,and click on the vertical ellipsis icon (three tiny dots) in the top-right corner. From the list of options that appear, click on the ‘Create Solution’ option.
In this case, the project name is Demo.
Provide the solution name as ‘Demo Solution’ and then click on Create and Publish button you should see a message like solution got created successfully.
7. Download Demo Site Code
You can download the code for the demo application site developed by webMethods.io Embed. You can further tweak it as per your requirements or create your custom application site from scratch.
To download the demo site code, navigate to ‘Embed > Embed Settings > Developer Tools’ and locate the ‘Download Code for Demo Site’ field.
Copy the given link, paste it in a new browser tab, and hit enter. The demo site code will get downloaded on your machine.
8.Connect Admin Portal with Demo Application
Once this is done, you can connect the webMethods.io Embed Admin Portal with your demo application. To do so, first extract the zipped demo site code file and navigate to ‘demo_site > public > js’ folder. Open the ‘script.js’ file in the editor of your choice and search for the ‘init()’ function.
Now, switch to your webMethods.io Embed Admin portal and navigate to ‘Embed > Embed Settings > Settings’. Scroll down to the bottom of the page and locate the following fields:
- Source Verification Token
- Master Token
- Identifier
From here, copy the Identifier, Source Verification Token, and Master Token keys and replace them with the corresponding placeholder values in the init() function
Next, navigate to the ‘demo_site’ folder and open the ‘index.js’ file in the editor of your choice. Copy the ‘API Key’ and ‘Domain’ from the Admin Portal and replace them with the corresponding placeholder text value of the ‘var token’ and ‘domain’ respectively.
Now, switch-back to the Admin portal and set the ‘Runflow URL’ and ‘Custom OAuth URL’.
The Runflow URL is used to execute the workflows which run on webhooks. To set up the Runflow URL, enter your tenant URL in the ‘Runflow URL’ field and append ‘/runflow’ after it. So, for example, if your tenant URL is ‘https://demo.int-aws-us.webmethods.io’ then your ‘Runflow URL will be ‘https://demo.int-aws-us.webmethods.io/runflow’.
The Custom OAuth URL is used to display your users the custom OAuth screen based on your company branding while creating the authorization. To set up the Custom OAuth URL, enter your tenant in the ‘Custom OAuth URL’ field and append ‘/auth’ after it. So your ‘Custom OAuth URL’ will be ‘https://demo.int-aws-us.webmethods.io/auth.
Note: It is recommended that you proxy the runflow URL and Custom OAuth URL associated with your domain to our domain for a seamless user experience
9. Deploy demo site code to the local NodeJS server
Download NodeJS server from the URL: https://nodejs.org/en/download/
Navigate to the folder where demo site is copied on your local machine, open command prompt, (to check the version of npm type npm -v )
Once a version is deployed you can run the below command.
node index.js
Navigate to URL http://localhost:2000/ (use manage as password as specified in the index.js, same applies to username)
Once you successfully log in you will see the below page.
Click on Trello, click on Add next to DemoSolution.
Select the respective accounts for Trello and Wunderlist, click on save button.
Integration should be created successfully as below.
Now login to Trello and create a board , this will create a list in wunderlist.(with the name provided while creating the board)
10. Troubleshooting
If you are unable to Authorize Trello in section 9 , add the callback URL of Trello (copy from Oauth page of Embed) and update the URL in https://trello.com/app-key in the New Allowed Origin -> Paste the URL and say submit.
Make sure you should see the below key and identifiers in embed->settings page.
