{"_id":"5637e17197666c0d008656a5","version":{"_id":"55d535cb988e130d000b3f5f","__v":12,"project":"55d535ca988e130d000b3f5c","hasDoc":true,"hasReference":false,"createdAt":"2015-08-20T02:04:59.052Z","releaseDate":"2015-08-20T02:04:59.052Z","categories":["55d535cc988e130d000b3f60","55d6b238d2a8eb1900109eef","55d6b4f3250d7d0d004274cd","55d7967960fc730d00fc2852","55da9804e835f20d009fc5d0","55e75b1de06f4b190080dbfd","55e75b39e06f4b190080dbfe","55e75b7ae06f4b190080dbff","564f5a4e33082f0d001bb709","570fb64aa38d470e0060cbff","586d0dd89a854123001acd65","586d0e3b9a854123001acd66"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"__v":14,"project":"55d535ca988e130d000b3f5c","category":{"_id":"55e75b39e06f4b190080dbfe","project":"55d535ca988e130d000b3f5c","__v":10,"pages":["56959043fe18811700c9c09e","569590bfcb14e11700f8a877","569590f7fcb1032d0089e033","5695917dfcb1032d0089e035","5695964a77ba0d2300cf3912","5695967edcaf0d1700cb8752","569618eccb14e11700f8a910","56961d937596a90d0014e571","5696ba13480534370022a37a","56dd002ee5c8570e00a79865"],"version":"55d535cb988e130d000b3f5f","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-02T20:25:29.622Z","from_sync":false,"order":3,"slug":"frame-for-business","title":"Frame for Business"},"parentDoc":null,"user":"55d535835082980d0009c965","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-11-02T22:19:29.898Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":13,"body":"With Frame Platform, you can easily create an embedded player similar to a YouTube player, which you can place on any page on your website. With the player, your users can click to launch the app directly from within your site. \n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note:\",\n  \"body\": \"To access this feature, you will need to have already published the application you are looking to embed.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1. Navigate to the \\\"Embed app\\\" page\"\n}\n[/block]\nGo to your Dashboard and click on the Production tab in the Apps panel. Find the app you want to embed, click the drop-down arrow at the bottom right corner of the app icon, and select \"Embed app.\" \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/7a598ef-Screen_Shot_2017-04-18_at_6.40.29_PM.png\",\n        \"Screen Shot 2017-04-18 at 6.40.29 PM.png\",\n        620,\n        452,\n        \"#4777aa\"\n      ],\n      \"border\": true\n    }\n  ]\n}\n[/block]\nIn the new window that opens, you will have access to the code you need to embed your app into your web page. From here, you can change the size of the embedded player, the type of instance it opens, and the privacy settings of the link. \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/0cf5fa6-Screen_Shot_2017-04-18_at_6.45.08_PM.png\",\n        \"Screen Shot 2017-04-18 at 6.45.08 PM.png\",\n        726,\n        729,\n        \"#465259\"\n      ],\n      \"border\": true\n    }\n  ]\n}\n[/block]\nThe \"Privacy\" setting toggles between allowing the player to be visible to anyone and to you only when your are logged in as an admin in a browser session.  \n\n\"Authorized domains\" sets the domains from where the player can be run (to prevent others from inspecting your web page and copying the embed code over to their own site). List the domains (comma separated) of the websites where you will insert the embed code (e.g., \"www.domain1.com, www.domain2.com\"). If your domain resolves without \"www,\" you should include this as well (e.g., \"www.domain.com, domain.com\"). Do not include \"http://.\" If left blank, your application could be embedded and run from any webpage on any domain.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2.  Copy the embed code and paste it into your website\"\n}\n[/block]\nOnce on the Embed app page, you'll see a preview option on the left and the embed code on the right. Click \"PREVIEW\" to see what the embedded player will look like on a sample page.  \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/LGiYHFSRySXnOhoxzXXQ_Screenshot%202016-01-13%2012.33.28.png\",\n        \"Screenshot 2016-01-13 12.33.28.png\",\n        \"1377\",\n        \"747\",\n        \"#3e4f82\",\n        \"\"\n      ],\n      \"border\": true\n    }\n  ]\n}\n[/block]\nThen, back on the Embed app page, highlight the embed code on the right and copy it. Paste it into the HTML code for your own web page, just like your would embed a YouTube video. Here's what the code looks like on the preview page:\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"https://live.fra.me/embed/mf2ea.js?hash=wtylYBfZ&amp;size=M&amp;poolId=12190\\\"></script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"title\": \"Get the right code!\",\n  \"body\": \"Make sure that when you get your embed code (or link to the preview page), you are on the \\\"PRODUCTION\\\" tab and not on the \\\"SANDBOX\\\" tab. The embed codes and preview links are different on both tabs. If you embed the Sandbox link, your web page will only connect to the Sandbox. So, only do this if you are testing things out and don't want to turn on any production instances for your tests.\"\n}\n[/block]","excerpt":"","slug":"embedding-the-frame-player-on-your-web-page","type":"basic","title":"Embed apps in your website"}

Embed apps in your website


With Frame Platform, you can easily create an embedded player similar to a YouTube player, which you can place on any page on your website. With the player, your users can click to launch the app directly from within your site. [block:callout] { "type": "info", "title": "Note:", "body": "To access this feature, you will need to have already published the application you are looking to embed." } [/block] [block:api-header] { "type": "basic", "title": "1. Navigate to the \"Embed app\" page" } [/block] Go to your Dashboard and click on the Production tab in the Apps panel. Find the app you want to embed, click the drop-down arrow at the bottom right corner of the app icon, and select "Embed app." [block:image] { "images": [ { "image": [ "https://files.readme.io/7a598ef-Screen_Shot_2017-04-18_at_6.40.29_PM.png", "Screen Shot 2017-04-18 at 6.40.29 PM.png", 620, 452, "#4777aa" ], "border": true } ] } [/block] In the new window that opens, you will have access to the code you need to embed your app into your web page. From here, you can change the size of the embedded player, the type of instance it opens, and the privacy settings of the link. [block:image] { "images": [ { "image": [ "https://files.readme.io/0cf5fa6-Screen_Shot_2017-04-18_at_6.45.08_PM.png", "Screen Shot 2017-04-18 at 6.45.08 PM.png", 726, 729, "#465259" ], "border": true } ] } [/block] The "Privacy" setting toggles between allowing the player to be visible to anyone and to you only when your are logged in as an admin in a browser session. "Authorized domains" sets the domains from where the player can be run (to prevent others from inspecting your web page and copying the embed code over to their own site). List the domains (comma separated) of the websites where you will insert the embed code (e.g., "www.domain1.com, www.domain2.com"). If your domain resolves without "www," you should include this as well (e.g., "www.domain.com, domain.com"). Do not include "http://." If left blank, your application could be embedded and run from any webpage on any domain. [block:api-header] { "type": "basic", "title": "2. Copy the embed code and paste it into your website" } [/block] Once on the Embed app page, you'll see a preview option on the left and the embed code on the right. Click "PREVIEW" to see what the embedded player will look like on a sample page. [block:image] { "images": [ { "image": [ "https://files.readme.io/LGiYHFSRySXnOhoxzXXQ_Screenshot%202016-01-13%2012.33.28.png", "Screenshot 2016-01-13 12.33.28.png", "1377", "747", "#3e4f82", "" ], "border": true } ] } [/block] Then, back on the Embed app page, highlight the embed code on the right and copy it. Paste it into the HTML code for your own web page, just like your would embed a YouTube video. Here's what the code looks like on the preview page: [block:code] { "codes": [ { "code": "<script src=\"https://live.fra.me/embed/mf2ea.js?hash=wtylYBfZ&amp;size=M&amp;poolId=12190\"></script>", "language": "javascript" } ] } [/block] [block:callout] { "type": "warning", "title": "Get the right code!", "body": "Make sure that when you get your embed code (or link to the preview page), you are on the \"PRODUCTION\" tab and not on the \"SANDBOX\" tab. The embed codes and preview links are different on both tabs. If you embed the Sandbox link, your web page will only connect to the Sandbox. So, only do this if you are testing things out and don't want to turn on any production instances for your tests." } [/block]