{"id":13800207,"url":"https://github.com/workato/full-embed-sample","last_synced_at":"2025-05-13T09:31:25.691Z","repository":{"id":40800397,"uuid":"218348560","full_name":"workato/full-embed-sample","owner":"workato","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-25T11:03:59.000Z","size":4687,"stargazers_count":8,"open_issues_count":28,"forks_count":6,"subscribers_count":47,"default_branch":"master","last_synced_at":"2024-11-18T15:51:11.933Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/workato.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-29T17:48:54.000Z","updated_at":"2024-09-17T06:29:12.000Z","dependencies_parsed_at":"2023-02-06T12:31:43.520Z","dependency_job_id":"9be880fb-e410-4464-83ee-f20e2e964946","html_url":"https://github.com/workato/full-embed-sample","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workato%2Ffull-embed-sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workato%2Ffull-embed-sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workato%2Ffull-embed-sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/workato%2Ffull-embed-sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/workato","download_url":"https://codeload.github.com/workato/full-embed-sample/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253913071,"owners_count":21983249,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T00:01:10.479Z","updated_at":"2025-05-13T09:31:24.175Z","avatar_url":"https://github.com/workato.png","language":"Vue","funding_links":[],"categories":["Learning Resources"],"sub_categories":["Workato"],"readme":"# Embedding Guide\n\n1. Create a mapping between Workato URLs and internal URLs and make this configuration available in both server- and client-side code:  \n    \n    For example:\n\n    | Workato URL     | OEM Vendor URL      |\n    | ----------------| --------------------|\n    | `/`             |  `/solutions`       |\n    | `/recipes/:id`  |  `/solutions/:id`   |\n    | `/recipes/new`  |  `/create-solution` |\n    | ...             |\t...                 |\n\n2. On request to one of `OEM Vendor URL`s find corresponding `Workato URL` and use it to construct IFrame's `src` attribute.  \n\n    For example user loads `/solutions/5` page. It corresponds to Workato's `/recipes/5` page so we generate an HTML page\n    which renders `\u003ciframe src=\"https://workato.com/recipes/5\"\u003e`.\n\n3. Inject a `Workato Embedding Client` script on every page that contain this IFrame: `\u003cscript src=\"https://workato.com/embedding-client.js\"\u003e`.\n  \n    There are a few important things to note:\n    - It should be injected **before** the `\u003ciframe\u003e` element.\n    - It shouldn't contain neither `async` nor `defer` attributes as it must be loaded synchronously before an IFrame.\n    \n    It creates a global `WorkatoApi` object that allows to control embedded Workato web app.\n    \n4. Inject the following script **after** the \"Workato Embedding Client\" script:\n    ```js\n    // Subscribing to `navigation` event which is fired by the embedded Workato app when user attempts to load\n    // another page e.g. when he clicks on some link.\n    WorkatoApi.on('navigation', function (navigation) {\n      // Finding corresponding URL using a mapping created on step 1.\n      // Workato URL is stored in `navigation.url` property.\n      // `findInternalUrl` function should be implemented by OEM vendor.\n      var url = findInternalUrl(navigation.url);\n      \n      // Loading a new page if we've found a mapping and this is not the current page.\n      // `isCurrentUrl` function should be implemented by OEM vendor.\n      // For example, it may look like this: `return url === location.pathname`.\n      if (url \u0026\u0026 !isCurrentUrl(url)) {\n        location.href = url;\n      }\n    });\n    ```\n\n5. Use normal links to perform navigations between pages e.g. `\u003ca href=\"/solutions/5\"\u003e` will load a page containing\n    `\u003ciframe src=\"https://workato.com/recipes/5\"\u003e`.\n   \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkato%2Ffull-embed-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fworkato%2Ffull-embed-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworkato%2Ffull-embed-sample/lists"}