├── .npmrc ├── .tool-versions ├── .browserslistrc ├── postcss.config.js ├── public ├── favicon.ico ├── webfonts │ ├── fa-brands-400.eot │ ├── fa-brands-400.ttf │ ├── fa-solid-900.eot │ ├── fa-solid-900.ttf │ ├── fa-solid-900.woff │ ├── fa-brands-400.woff │ ├── fa-brands-400.woff2 │ ├── fa-regular-400.eot │ ├── fa-regular-400.ttf │ ├── fa-regular-400.woff │ ├── fa-regular-400.woff2 │ └── fa-solid-900.woff2 └── index.html ├── src ├── assets │ ├── logo.png │ ├── search.png │ ├── home_hover.png │ ├── home_page.png │ ├── menu_footer.png │ ├── header__aside.png │ ├── header__user.png │ ├── fonts │ │ └── Source_Sans_Pro │ │ │ ├── Bold.woff │ │ │ ├── Bold.woff2 │ │ │ ├── Light.woff │ │ │ ├── Light.woff2 │ │ │ ├── Regular.woff │ │ │ ├── Regular.woff2 │ │ │ ├── SemiBold.woff │ │ │ └── SemiBold.woff2 │ ├── assets_icon.svg │ ├── assets_icon_active.svg │ ├── home_icon.svg │ ├── home_icon_active.svg │ ├── requests_icon.svg │ ├── requests_icon_active.svg │ ├── content_icon.svg │ ├── campaigns_icon.svg │ ├── campaigns_icon_active.svg │ ├── content_icon_active.svg │ ├── analytics_icon.svg │ ├── analytics_icon_active.svg │ ├── integration_icon.svg │ └── integration_icon_active.svg ├── config.js ├── views │ ├── Home.vue │ ├── IntegrationLayout.vue │ └── Integration.vue ├── main.js ├── router.js ├── components │ ├── Search.vue │ ├── AppHeader.vue │ ├── MainMenuToggle.vue │ ├── UserMenu.vue │ ├── WorkatoLink.vue │ ├── Menu.vue │ ├── SidePanel.vue │ └── MainMenu.vue └── App.vue ├── babel.config.js ├── vue.config.js ├── .gitignore ├── docs ├── assets │ ├── navigation.js │ ├── custom.css │ ├── search.js │ └── highlight.css └── types │ ├── EmbeddingClient.MessageType.html │ ├── EmbeddingClient.VendorNavigationEvent.html │ ├── EmbeddingMessages.EmbeddingUnloadedMessage.html │ ├── EmbeddingMessages.EmbeddingClickMessage.html │ ├── EmbeddingMessages.EmbeddingVendorMessage.html │ ├── EmbeddingMessages.EmbeddingNavigationMessage.html │ ├── EmbeddingMessages.EmbeddingLoadedMessage.html │ ├── EmbeddingMessages.EmbeddingHeightChangeMessage.html │ └── EmbeddingMessages.EmbeddingNavigatedMessage.html ├── bin └── start-dev-server.js ├── .env ├── package.json ├── server └── index.js └── README.md /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | -------------------------------------------------------------------------------- /.tool-versions: -------------------------------------------------------------------------------- 1 | nodejs 16.20.0 2 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/src/assets/search.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/home_hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/src/assets/home_hover.png -------------------------------------------------------------------------------- /src/assets/home_page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/src/assets/home_page.png -------------------------------------------------------------------------------- /src/assets/menu_footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/src/assets/menu_footer.png -------------------------------------------------------------------------------- /src/assets/header__aside.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/src/assets/header__aside.png -------------------------------------------------------------------------------- /src/assets/header__user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/src/assets/header__user.png -------------------------------------------------------------------------------- /public/webfonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/public/webfonts/fa-brands-400.eot -------------------------------------------------------------------------------- /public/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/public/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /public/webfonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/public/webfonts/fa-solid-900.eot -------------------------------------------------------------------------------- /public/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/public/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /public/webfonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/public/webfonts/fa-solid-900.woff -------------------------------------------------------------------------------- /public/webfonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/public/webfonts/fa-brands-400.woff -------------------------------------------------------------------------------- /public/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/public/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /public/webfonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/public/webfonts/fa-regular-400.eot -------------------------------------------------------------------------------- /public/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/public/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /public/webfonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/public/webfonts/fa-regular-400.woff -------------------------------------------------------------------------------- /public/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/public/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /public/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/public/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /src/config.js: -------------------------------------------------------------------------------- 1 | export const config = { 2 | workatoOrigin: process.env.VUE_APP_WK_ORIGIN, 3 | workatoRoutesPrefix: '/integration', 4 | }; 5 | -------------------------------------------------------------------------------- /src/assets/fonts/Source_Sans_Pro/Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/src/assets/fonts/Source_Sans_Pro/Bold.woff -------------------------------------------------------------------------------- /src/assets/fonts/Source_Sans_Pro/Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/src/assets/fonts/Source_Sans_Pro/Bold.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Source_Sans_Pro/Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/src/assets/fonts/Source_Sans_Pro/Light.woff -------------------------------------------------------------------------------- /src/assets/fonts/Source_Sans_Pro/Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/src/assets/fonts/Source_Sans_Pro/Light.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Source_Sans_Pro/Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/src/assets/fonts/Source_Sans_Pro/Regular.woff -------------------------------------------------------------------------------- /src/assets/fonts/Source_Sans_Pro/Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/src/assets/fonts/Source_Sans_Pro/Regular.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Source_Sans_Pro/SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/src/assets/fonts/Source_Sans_Pro/SemiBold.woff -------------------------------------------------------------------------------- /src/assets/fonts/Source_Sans_Pro/SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/workato/full-embed-sample/HEAD/src/assets/fonts/Source_Sans_Pro/SemiBold.woff2 -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | crossorigin: 'anonymous', 3 | devServer: { 4 | allowedHosts: 'all' 5 | }, 6 | pluginOptions: { 7 | express: { 8 | shouldServeApp: true, 9 | serverDir: './server' 10 | } 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /src/assets/assets_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/assets_icon_active.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import 'whatwg-fetch' 2 | import Vue from 'vue' 3 | import App from './App.vue' 4 | import router from './router' 5 | import {config} from './config'; 6 | 7 | Vue.config.productionTip = false; 8 | 9 | Workato.configure({ 10 | embeddingUrlPrefix: config.workatoRoutesPrefix 11 | }); 12 | 13 | new Vue({ 14 | router, 15 | render: h => h(App) 16 | }).$mount('#app'); 17 | -------------------------------------------------------------------------------- /src/assets/home_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/home_icon_active.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/requests_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/requests_icon_active.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/assets/navigation.js: -------------------------------------------------------------------------------- 1 | window.navigationData = "data:application/octet-stream;base64,H4sIAAAAAAAAE52Uy26DMBBF/8Vr1DaR0gdbFIlF0lUfiygLF0/AwtiR7UaNqv57qaABHGNstjDnHjzDePeNNHxpFKN19QGEUJ4njALXKEJHrIv6RSXIJwN1axTcFLpidVVJOUHxMkJZQRmRwFG8mw7NGFbKEuqULJaPP9FYdiL4geadgXIN8oCzaUlDGudZ3fdUz/hEc6yp4AEWE3IJ3oATIVOqtJDnDlyfBk1zyFwB0+IN5eV8q4V2Kd+FLLEWc3x21CXbglI4hxRzwkB2En0+WvKH1Ubu3dPDYrW8zn6pozyD/0qnUpuejnbHnm+F7Ka9bYXa71OOrf8vCdv7lnJP9xJtPnFNtt+CrLzyGH26VvSxqZlcoLWUQoa7+pi3KwWaFzopMM8hXGmhvc0bgQmQcOeA87a1f+0coYmGOutNmS3tWG/rK2czO2uQ3sbmXgj3DThvW3s9h+uG4Ni9tf8F+TjXr60IAAA=" -------------------------------------------------------------------------------- /src/assets/content_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/campaigns_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/campaigns_icon_active.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/content_icon_active.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/analytics_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/analytics_icon_active.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /bin/start-dev-server.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const concurrently = require('concurrently'); 4 | 5 | const args = process.argv.slice(2).join(' '); 6 | 7 | concurrently([ 8 | { 9 | name: 'server', 10 | command: `vue-cli-service express:watch ${args}`, 11 | prefixColor: 'magenta' 12 | }, 13 | { 14 | name: 'client', 15 | // `sleep` is required because Express server should be started before the Vue client for the proxying 16 | // of XHR requests to work properly 17 | command: `sleep 3 && vue-cli-service serve ${args}`, 18 | prefixColor: 'white' 19 | } 20 | ], { 21 | raw: true, 22 | killOthers: ['failure', 'success'], 23 | successCondition: 'first' 24 | }).catch(() => { 25 | process.exit(1); 26 | }); 27 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | # Workato origin 2 | VUE_APP_WK_ORIGIN=https://app.workato.com 3 | 4 | # Url to Workato Embedding Client script 5 | VUE_APP_WK_OEM_CLIENT_URL=https://embedding.workato.com/r/embedding-client.js 6 | 7 | # Workato JWT authorization 8 | WK_JWT_PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----\nfoo\nbar\n-----END RSA PRIVATE KEY-----" 9 | WK_API_KEY= 10 | WK_CUSTOMER_ID= 11 | # Optional 12 | WK_USER_ID= 13 | # Optional. Specifies custom vendor origin that will be used. 14 | # It should be one of the origins specified either in user's profile or in the OEM Embedding Config. 15 | # If it's not specified the first origin either from user's profile or from OEM Embedding Config will be used. 16 | WK_CUSTOM_VENDOR_ORIGIN= 17 | 18 | # Basic HTTP auth 19 | USER_NAME= 20 | USER_PASSWORD= 21 | -------------------------------------------------------------------------------- /src/views/IntegrationLayout.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | 19 | 35 | -------------------------------------------------------------------------------- /docs/assets/custom.css: -------------------------------------------------------------------------------- 1 | h2 { 2 | margin: 1.3em 0 .9em; 3 | } 4 | 5 | .container-main { 6 | padding-bottom: 75px; 7 | } 8 | 9 | /* 10 | The code below is copy-pasted from older typedoc version (0.22) 11 | It returns nice table styles which were changed in 0.23 12 | */ 13 | .tsd-panel table { 14 | display: block; 15 | width: 100%; 16 | overflow: auto; 17 | margin-top: 10px; 18 | word-break: normal; 19 | word-break: keep-all; 20 | border-collapse: collapse; 21 | } 22 | 23 | .tsd-panel table th { 24 | font-weight: bold; 25 | } 26 | 27 | .tsd-panel table th, 28 | .tsd-panel table td { 29 | padding: 6px 13px; 30 | border: 1px solid var(--color-accent); 31 | } 32 | 33 | .tsd-panel table tr { 34 | background: var(--color-background); 35 | } 36 | 37 | .tsd-panel table tr:nth-child(even) { 38 | background: var(--color-background-secondary); 39 | } 40 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Home from './views/Home.vue' 4 | import Integration from './views/Integration.vue' 5 | import IntegrationLayout from './views/IntegrationLayout.vue' 6 | 7 | Vue.use(Router); 8 | 9 | export default new Router({ 10 | mode: 'history', 11 | base: process.env.BASE_URL, 12 | routes: [ 13 | { 14 | path: '/', 15 | name: 'home', 16 | component: Home 17 | }, 18 | { 19 | path: '/integration', 20 | redirect: '/integration/dashboard/main', 21 | pathToRegexpOptions: {strict: true}, 22 | }, 23 | { 24 | path: '/integration/', 25 | component: IntegrationLayout, 26 | pathToRegexpOptions: {strict: true}, 27 | children: [ 28 | { 29 | path: '*', 30 | component: Integration 31 | } 32 | ] 33 | } 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /src/components/Search.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "acme-embed-demo", 3 | "version": "0.1.1", 4 | "private": true, 5 | "scripts": { 6 | "serve": "node ./bin/start-dev-server.js --open", 7 | "build": "vue-cli-service build --modern", 8 | "start": "vue-cli-service express:run" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.37.1", 12 | "http-auth": "^4.1.2", 13 | "http-auth-connect": "^1.0.4", 14 | "jsonwebtoken": "^9.0.2", 15 | "nanoid": "^3.3.7", 16 | "vue": "^2.7.16", 17 | "vue-router": "^3.0.3", 18 | "whatwg-fetch": "^3.6.20" 19 | }, 20 | "devDependencies": { 21 | "@vue/cli-plugin-babel": "^5.0.8", 22 | "@vue/cli-service": "^5.0.8", 23 | "concurrently": "^5.3.0", 24 | "sass": "^1.77.8", 25 | "sass-loader": "^8.0.0", 26 | "vue-cli-plugin-express": "^1.0.2", 27 | "vue-template-compiler": "^2.7.16" 28 | }, 29 | "engines": { 30 | "node": "16", 31 | "npm": "8" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | 40 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <% if (NODE_ENV === 'production') { %> 8 | 13 | <% } %> 14 | 15 | 16 | 17 | ACME Embedding Demo 18 | 19 | 20 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /server/index.js: -------------------------------------------------------------------------------- 1 | import {nanoid} from 'nanoid'; 2 | import {sign} from 'jsonwebtoken'; 3 | import {basic as createBasicAuth} from 'http-auth'; 4 | import auth from 'http-auth-connect'; 5 | 6 | const basicAuth = createBasicAuth({realm: "Private Area"}, (username, password, callback) => { 7 | callback(username === process.env.USER_NAME && password === process.env.USER_PASSWORD); 8 | }); 9 | 10 | export default app => { 11 | if (process.env.USER_NAME && process.env.USER_PASSWORD) { 12 | app.use(auth(basicAuth)); 13 | } 14 | 15 | app.get('/workato-jwt', (req, res) => { 16 | const {WK_API_KEY, WK_CUSTOMER_ID, WK_USER_ID, WK_CUSTOM_VENDOR_ORIGIN} = process.env; 17 | const subParams = [WK_API_KEY, WK_CUSTOMER_ID]; 18 | 19 | if (WK_USER_ID) { 20 | subParams.push(WK_USER_ID); 21 | } 22 | 23 | const token = sign( 24 | { 25 | sub: subParams.join(':'), 26 | jti: nanoid(), 27 | origin: WK_CUSTOM_VENDOR_ORIGIN || undefined 28 | }, 29 | process.env.WK_JWT_PRIVATE_KEY, 30 | {algorithm: 'RS256'} 31 | ); 32 | 33 | res.json(token); 34 | }); 35 | } 36 | -------------------------------------------------------------------------------- /src/components/MainMenuToggle.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 19 | 20 | 60 | -------------------------------------------------------------------------------- /src/components/UserMenu.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 30 | 31 | 70 | -------------------------------------------------------------------------------- /src/components/WorkatoLink.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 64 | -------------------------------------------------------------------------------- /src/components/Menu.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 59 | 60 | 79 | -------------------------------------------------------------------------------- /src/components/SidePanel.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 39 | 40 | 87 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Embedding Guide 2 | 3 | 1. Create a mapping between Workato URLs and internal URLs and make this configuration available in both server- and client-side code: 4 | 5 | For example: 6 | 7 | | Workato URL | OEM Vendor URL | 8 | | ----------------| --------------------| 9 | | `/` | `/solutions` | 10 | | `/recipes/:id` | `/solutions/:id` | 11 | | `/recipes/new` | `/create-solution` | 12 | | ... | ... | 13 | 14 | 2. On request to one of `OEM Vendor URL`s find corresponding `Workato URL` and use it to construct IFrame's `src` attribute. 15 | 16 | For example user loads `/solutions/5` page. It corresponds to Workato's `/recipes/5` page so we generate an HTML page 17 | which renders ` 3 | 4 | 5 | 75 | 76 | 83 | -------------------------------------------------------------------------------- /docs/assets/search.js: -------------------------------------------------------------------------------- 1 | window.searchData = "data:application/octet-stream;base64,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"; -------------------------------------------------------------------------------- /docs/assets/highlight.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --light-hl-0: #800000; 3 | --dark-hl-0: #808080; 4 | --light-hl-1: #800000; 5 | --dark-hl-1: #569CD6; 6 | --light-hl-2: #000000FF; 7 | --dark-hl-2: #D4D4D4; 8 | --light-hl-3: #001080; 9 | --dark-hl-3: #9CDCFE; 10 | --light-hl-4: #795E26; 11 | --dark-hl-4: #DCDCAA; 12 | --light-hl-5: #008000; 13 | --dark-hl-5: #6A9955; 14 | --light-hl-6: #A31515; 15 | --dark-hl-6: #CE9178; 16 | --light-hl-7: #000000; 17 | --dark-hl-7: #D4D4D4; 18 | --light-hl-8: #0000FF; 19 | --dark-hl-8: #569CD6; 20 | --light-hl-9: #AF00DB; 21 | --dark-hl-9: #C586C0; 22 | --light-code-background: #FFFFFF; 23 | --dark-code-background: #1E1E1E; 24 | } 25 | 26 | @media (prefers-color-scheme: light) { :root { 27 | --hl-0: var(--light-hl-0); 28 | --hl-1: var(--light-hl-1); 29 | --hl-2: var(--light-hl-2); 30 | --hl-3: var(--light-hl-3); 31 | --hl-4: var(--light-hl-4); 32 | --hl-5: var(--light-hl-5); 33 | --hl-6: var(--light-hl-6); 34 | --hl-7: var(--light-hl-7); 35 | --hl-8: var(--light-hl-8); 36 | --hl-9: var(--light-hl-9); 37 | --code-background: var(--light-code-background); 38 | } } 39 | 40 | @media (prefers-color-scheme: dark) { :root { 41 | --hl-0: var(--dark-hl-0); 42 | --hl-1: var(--dark-hl-1); 43 | --hl-2: var(--dark-hl-2); 44 | --hl-3: var(--dark-hl-3); 45 | --hl-4: var(--dark-hl-4); 46 | --hl-5: var(--dark-hl-5); 47 | --hl-6: var(--dark-hl-6); 48 | --hl-7: var(--dark-hl-7); 49 | --hl-8: var(--dark-hl-8); 50 | --hl-9: var(--dark-hl-9); 51 | --code-background: var(--dark-code-background); 52 | } } 53 | 54 | :root[data-theme='light'] { 55 | --hl-0: var(--light-hl-0); 56 | --hl-1: var(--light-hl-1); 57 | --hl-2: var(--light-hl-2); 58 | --hl-3: var(--light-hl-3); 59 | --hl-4: var(--light-hl-4); 60 | --hl-5: var(--light-hl-5); 61 | --hl-6: var(--light-hl-6); 62 | --hl-7: var(--light-hl-7); 63 | --hl-8: var(--light-hl-8); 64 | --hl-9: var(--light-hl-9); 65 | --code-background: var(--light-code-background); 66 | } 67 | 68 | :root[data-theme='dark'] { 69 | --hl-0: var(--dark-hl-0); 70 | --hl-1: var(--dark-hl-1); 71 | --hl-2: var(--dark-hl-2); 72 | --hl-3: var(--dark-hl-3); 73 | --hl-4: var(--dark-hl-4); 74 | --hl-5: var(--dark-hl-5); 75 | --hl-6: var(--dark-hl-6); 76 | --hl-7: var(--dark-hl-7); 77 | --hl-8: var(--dark-hl-8); 78 | --hl-9: var(--dark-hl-9); 79 | --code-background: var(--dark-code-background); 80 | } 81 | 82 | .hl-0 { color: var(--hl-0); } 83 | .hl-1 { color: var(--hl-1); } 84 | .hl-2 { color: var(--hl-2); } 85 | .hl-3 { color: var(--hl-3); } 86 | .hl-4 { color: var(--hl-4); } 87 | .hl-5 { color: var(--hl-5); } 88 | .hl-6 { color: var(--hl-6); } 89 | .hl-7 { color: var(--hl-7); } 90 | .hl-8 { color: var(--hl-8); } 91 | .hl-9 { color: var(--hl-9); } 92 | pre, code { background: var(--code-background); } 93 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 20 | 21 | 42 | 43 | 131 | -------------------------------------------------------------------------------- /src/assets/integration_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/integration_icon_active.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/MainMenu.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 48 | 49 | 154 | -------------------------------------------------------------------------------- /docs/types/EmbeddingClient.MessageType.html: -------------------------------------------------------------------------------- 1 | MessageType | Workato embedded
2 |
3 | 10 |
11 |
12 |
13 |
14 |
    15 |

    Type alias MessageType

    16 |
    MessageType: EmbeddingWorkatoMessage["type"] | "*"
    17 |
    18 |
    19 |
    20 |
    24 |
    -------------------------------------------------------------------------------- /docs/types/EmbeddingClient.VendorNavigationEvent.html: -------------------------------------------------------------------------------- 1 | VendorNavigationEvent | Workato embedded
    2 |
    3 | 10 |
    11 |
    12 |
    13 |
    14 |
      15 |

      Type alias VendorNavigationEvent

      16 |
      VendorNavigationEvent: VendorLinkNavigationEvent | VendorHistoryNavigationEvent
      17 |
      18 |
      19 |
      20 |
      24 |
      -------------------------------------------------------------------------------- /docs/types/EmbeddingMessages.EmbeddingUnloadedMessage.html: -------------------------------------------------------------------------------- 1 | EmbeddingUnloadedMessage | Workato embedded
      2 |
      3 | 10 |
      11 |
      12 |
      13 |
      14 |
        15 |

        Type alias EmbeddingUnloadedMessage

        16 |
        EmbeddingUnloadedMessage: EmbeddingMessage<"unloaded">
        17 |

        Emitted by Workato app in window's beforeunload event handler.

        18 |
        19 |
        20 |
        21 |
        22 |
        23 |
        27 |
        -------------------------------------------------------------------------------- /docs/types/EmbeddingMessages.EmbeddingClickMessage.html: -------------------------------------------------------------------------------- 1 | EmbeddingClickMessage | Workato embedded
        2 |
        3 | 10 |
        11 |
        12 |
        13 |
        14 |
          15 |

          Type alias EmbeddingClickMessage

          16 |
          EmbeddingClickMessage: EmbeddingMessage<"click">
          17 |

          Emitted when user clicks somewhere inside an embedding iframe.

          18 |

          This message may be helpful in some situations because browsers don't emit click events for iframes.

          19 |
          20 |
          21 |
          22 |
          23 |
          24 |
          28 |
          -------------------------------------------------------------------------------- /docs/types/EmbeddingMessages.EmbeddingVendorMessage.html: -------------------------------------------------------------------------------- 1 | EmbeddingVendorMessage | Workato embedded
          2 |
          3 | 10 |
          11 |
          12 |
          13 |
          14 |
            15 |

            Type alias EmbeddingVendorMessage

            16 |
            EmbeddingVendorMessage: EmbeddingNavigationMessage
            17 |

            Messages that vendor's webapp may send to Workato via PostMessage API.

            18 |

            Note that if you don't use EmbeddingClient you'll need to JSON.stringify them by yourself before sending.

            19 |
            20 |
            21 |
            22 |
            23 |
            24 |
            28 |
            -------------------------------------------------------------------------------- /docs/types/EmbeddingMessages.EmbeddingNavigationMessage.html: -------------------------------------------------------------------------------- 1 | EmbeddingNavigationMessage | Workato embedded
            2 |
            3 | 10 |
            11 |
            12 |
            13 |
            14 |
              15 |

              Type alias EmbeddingNavigationMessage

              16 |
              EmbeddingNavigationMessage: EmbeddingMessage<"navigation", {
                  url: string;
              }>
              17 |

              Says to Workato that it needs to navigate to provided URL.

              18 |
              19 |
              20 |

              Type declaration

              21 |
                22 |
              • 23 |
                url: string
              24 |
              25 |
              26 |
              27 |
              28 |
              32 |
              -------------------------------------------------------------------------------- /docs/types/EmbeddingMessages.EmbeddingLoadedMessage.html: -------------------------------------------------------------------------------- 1 | EmbeddingLoadedMessage | Workato embedded
              2 |
              3 | 10 |
              11 |
              12 |
              13 |
              14 |
                15 |

                Type alias EmbeddingLoadedMessage

                16 |
                EmbeddingLoadedMessage: EmbeddingMessage<"loaded", {
                    url: string;
                }>
                17 |

                Emitted when Workato app is loaded i.e. is ready to receive messages from vendor app.

                18 |
                19 |
                20 |

                Type declaration

                21 |
                  22 |
                • 23 |
                  url: string
                24 |
                25 |
                26 |
                27 |
                28 |
                32 |
                -------------------------------------------------------------------------------- /docs/types/EmbeddingMessages.EmbeddingHeightChangeMessage.html: -------------------------------------------------------------------------------- 1 | EmbeddingHeightChangeMessage | Workato embedded
                2 |
                3 | 10 |
                11 |
                12 |
                13 |
                14 |
                  15 |

                  Type alias EmbeddingHeightChangeMessage

                  16 |
                  EmbeddingHeightChangeMessage: EmbeddingMessage<"heightChange", {
                      height: number;
                  }>
                  17 |

                  Emitted when content height of Workato app has changed.

                  18 |
                  19 |
                  20 |

                  Type declaration

                  21 |
                    22 |
                  • 23 |
                    height: number
                  24 |
                  25 |
                  26 |
                  27 |
                  28 |
                  32 |
                  -------------------------------------------------------------------------------- /docs/types/EmbeddingMessages.EmbeddingNavigatedMessage.html: -------------------------------------------------------------------------------- 1 | EmbeddingNavigatedMessage | Workato embedded
                  2 |
                  3 | 10 |
                  11 |
                  12 |
                  13 |
                  14 |
                    15 |

                    Type alias EmbeddingNavigatedMessage

                    16 |
                    EmbeddingNavigatedMessage: EmbeddingMessage<"navigated", {
                        replaced: boolean;
                        url: string;
                    }>
                    17 |

                    Emitted when Workato app is navigated to another page (Workato URL has changed).

                    18 |
                    19 |
                    20 |

                    Type declaration

                    21 |
                      22 |
                    • 23 |
                      replaced: boolean
                      • 24 |
                    • 25 |
                      url: string
                    26 |
                    27 |
                    28 |
                    29 |
                    30 |
                    34 |
                    --------------------------------------------------------------------------------