Embedding Guide

1. Create a mapping between Workato URLs and internal URLs and make this configuration available in both server- and client-side code:

   For example:

   Workato URL	OEM Vendor URL
   /	/solutions
   /recipes/:id	/solutions/:id
   /recipes/new	/create-solution
   ...	...

2. On request to one of OEM Vendor URLs find corresponding Workato URL and use it to construct IFrame's src attribute.

   For example user loads /solutions/5 page. It corresponds to Workato's /recipes/5 page so we generate an HTML page which renders <iframe src="https://workato.com/recipes/5">.

3. Inject a Workato Embedding Client script on every page that contain this IFrame: <script src="https://workato.com/embedding-client.js">.

   There are a few important things to note:

   • It should be injected before the <iframe> element.
   • It shouldn't contain neither async nor defer attributes as it must be loaded synchronously before an IFrame.

   It creates a global WorkatoApi object that allows to control embedded Workato web app.

4. Inject the following script after the "Workato Embedding Client" script:

   // Subscribing to `navigation` event which is fired by the embedded Workato app when user attempts to load// another page e.g. when he clicks on some link.WorkatoApi.on('navigation',function(navigation){// Finding corresponding URL using a mapping created on step 1.// Workato URL is stored in `navigation.url` property.// `findInternalUrl` function should be implemented by OEM vendor.varurl=findInternalUrl(navigation.url);// Loading a new page if we've found a mapping and this is not the current page.// `isCurrentUrl` function should be implemented by OEM vendor.// For example, it may look like this: `return url === location.pathname`.if(url&&!isCurrentUrl(url)){location.href=url;}});

5. Use normal links to perform navigations between pages e.g. <a href="/solutions/5"> will load a page containing <iframe src="https://workato.com/recipes/5">.