{"_id":"576c5f67a39bbf0e00db4ce6","githubsync":"","parentDoc":null,"project":"56439dfe9eebf70d00490d54","user":"5738f0646f67490e00d04b39","category":{"_id":"576c5eaf5738570e00ff070f","project":"56439dfe9eebf70d00490d54","version":"56439dff9eebf70d00490d57","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-06-23T22:11:59.399Z","from_sync":false,"order":19,"slug":"player-widget","title":"New Player Widget"},"version":{"_id":"56439dff9eebf70d00490d57","project":"56439dfe9eebf70d00490d54","__v":26,"createdAt":"2015-11-11T19:58:55.144Z","releaseDate":"2015-11-11T19:58:55.144Z","categories":["56439dff9eebf70d00490d58","56439e17c92c470d002dec71","564ce88e802cd02100444274","564d07ff3657c43500bf1d33","564d0a312da1982d00b19b64","564d2aa92da1982d00b19b8c","564d30a8b88a37210082253e","564d362c2da1982d00b19ba0","569d664371e3650d00acf018","569d7eacec29360d00f667c9","569d8006ec29360d00f667cb","569d855e0306a10d00ce99b9","569d91d571e3650d00acf04c","569d91eeceb7510d00f2a6a3","569e8c262d320817003b806d","569e8f802d320817003b8072","56b038c914dfea0d0007cf05","5717b4f0681bb41900fc575a","5718e0a4cd483219007c2c9a","571924c8e967cb1700d078e9","571e2648edc4a92b00a4cc65","576a677a6f15260e001f899b","576c5eaf5738570e00ff070f","578d127ed9c55c2000d4f213","579f90927ebe9b0e00059c50","582c0af888708a0f00570a69"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":false,"codename":"","version_clean":"1.0.0","version":"1"},"__v":17,"updates":["57bf6422efe0050e00d50be2"],"next":{"pages":[],"description":""},"createdAt":"2016-06-23T22:15:03.947Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"To get started, add the following code to the end of the `head` section of the page where you want to embed the Gooru Player Widget:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- Wiget loader JS  -->\\n<script src=\\\"https://playerwidget.gooru.org/player-widget.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nThen, you must include a container element where player widget will load:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div id=\\\"gooru-player\\\"\\n     data-role=\\\"gooru-player\\\"\\n     data-collection-id=\\\"7548b798-7fac-4352-91a8-991a50ba4f35\\\"\\n     data-show-reactions=\\\"false\\\"\\n     data-show-questions=\\\"false\\\"\\n     data-show-report=\\\"false\\\">\\n</div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nThis are the configuration options available as html attributes:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"h-1\": \"Values\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"data-role\",\n    \"0-1\": \"\\\"gooru-player\\\"\",\n    \"0-2\": \"Required. \\nUsed to identify the container \\nand embed the player into it.\",\n    \"1-0\": \"data-collection-id\",\n    \"1-1\": \"Any collection or assessment ID\",\n    \"1-2\": \"Optional. \\nThis is the ID of the\\ncollection or assessment to play.\",\n    \"2-0\": \"data-resource-id\",\n    \"2-1\": \"Any valid resource ID.\",\n    \"2-2\": \"Optional. \\nPlayer will load this resource. \\nLeave blank and the Player \\nwill load the first resource of collection.\\nIf data-collection-id is not set, the widget will show the resource player.\",\n    \"4-0\": \"data-show-reactions\",\n    \"4-1\": \"\\\"true\\\" or \\\"false\\\". Default: \\\"false\\\"\",\n    \"4-2\": \"Optional. \\nShow/Hide the reactions bar.\",\n    \"5-0\": \"data-show-questions\",\n    \"5-1\": \"\\\"true\\\" or \\\"false\\\". Default: \\\"true\\\"\",\n    \"5-2\": \"Optional. \\nUse \\\"false\\\" to hide \\nresources of type \\\"Question\\\".\",\n    \"6-0\": \"data-show-report\",\n    \"6-1\": \"\\\"true\\\" or \\\"false\\\". Default: \\\"true\\\"\",\n    \"6-2\": \"Optional. \\nUse \\\"false\\\" to hide Usage Report.\",\n    \"9-0\": \"data-gooru-token\",\n    \"9-1\": \"Any valid Gooru user authentication token.\",\n    \"9-2\": \"Optional. \\nUsed to authenticate user and track events. \\nLeave blank or don't include attribute \\nto use anonymous mode.\",\n    \"7-0\": \"data-show-collection-name\",\n    \"7-1\": \"\\\"true\\\" or \\\"false\\\". Default: \\\"true\\\"\",\n    \"7-2\": \"Optional.\\nUse \\\"false\\\" to hide Collection name.\",\n    \"8-0\": \"data-show-resource-header\",\n    \"8-1\": \"\\\"true\\\" or \\\"false\\\". Default: \\\"true\\\"\",\n    \"8-2\": \"Optional.\\nUse \\\"false\\\" to hide Header of resource or question player.\",\n    \"3-0\": \"data-question-id\",\n    \"3-1\": \"Any question ID.\",\n    \"3-2\": \"Optional.\\nUse this attribute to play a single question. \\ndata-collection-id and \\ndata-resource-id must \\nnot be set.\",\n    \"10-0\": \"data-base-path\",\n    \"10-1\": \"The base path where the player-widget.js file is located\",\n    \"10-2\": \"Optional\\nDefault: \\\"./\\\"\"\n  },\n  \"cols\": 3,\n  \"rows\": 11\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Sample Website\"\n}\n[/block]\nAdd the following page to any web server a try the Gooru Player Widget\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n  <head>\\n    <meta charset=\\\"utf-8\\\">\\n    <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\">\\n    <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1, shrink-to-fit=no\\\">\\n   \\n    <meta name=\\\"description\\\" content=\\\"\\\">\\n    <meta name=\\\"author\\\" content=\\\"\\\">\\n    <link rel=\\\"icon\\\" href=\\\"favicon.ico\\\">\\n\\n    <title>Gooru Player Test Site</title>\\n\\n    <!-- Add your website CSS -->\\n\\n    <!-- Typical js -->\\n    <!--\\n    <script src=\\\"https://code.jquery.com/jquery-2.2.4.min.js\\\" integrity=\\\"sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=\\\" crossorigin=\\\"anonymous\\\"></script>\\n     -->\\n    \\n    <!-- Wiget loader JS  -->\\n    <script src=\\\"https://playerwidget.gooru.org/player-widget.js\\\"></script>\\n  </head>\\n  <body>\\n    <div id=\\\"gooru-player\\\"\\n         data-role=\\\"gooru-player\\\"\\n         data-collection-id=\\\"7548b798-7fac-4352-91a8-991a50ba4f35\\\"\\n         data-resource-id=\\\"\\\"\\n         data-show-reactions=\\\"false\\\"\\n         data-show-questions=\\\"false\\\"\\n         data-show-report=\\\"false\\\"\\n         data-gooru-token=\\\"\\\">\\n    </div>\\n  </body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nCheck out an actual example here:\n[http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html](http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html) \n[block:embed]\n{\n  \"html\": false,\n  \"url\": \"http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html\",\n  \"title\": \"Gooru Player Test Site\",\n  \"favicon\": null,\n  \"iframe\": true,\n  \"height\": \"600px\"\n}\n[/block]\nYou can use the following pages as a staring point to integrate Gooru Player Widget to your site:\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Tip\",\n  \"body\": \"You can use any of the supported configuration options (e.g. `data-collection-id`) as URL param in this websites.\"\n}\n[/block]\n* **Collection Player on a page with bootstrap:** [http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/sample.html](http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/sample.html) \n* **Resource Player on page with bootstrap:** [http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/sample-resource.html](http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/sample-resource.html) \n* **Full screen Collection Player:** [http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html](http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html) \n* **Full screen Resource Player:** [http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen-resource.html](http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen-resource.html)","excerpt":"How to embed Gooru Player in your website","slug":"integrating-gooru-player-widget","type":"basic","title":"Integrating Gooru Player Widget"}

Integrating Gooru Player Widget

How to embed Gooru Player in your website

To get started, add the following code to the end of the `head` section of the page where you want to embed the Gooru Player Widget: [block:code] { "codes": [ { "code": "<!-- Wiget loader JS -->\n<script src=\"https://playerwidget.gooru.org/player-widget.js\"></script>", "language": "html" } ] } [/block] Then, you must include a container element where player widget will load: [block:code] { "codes": [ { "code": "<div id=\"gooru-player\"\n data-role=\"gooru-player\"\n data-collection-id=\"7548b798-7fac-4352-91a8-991a50ba4f35\"\n data-show-reactions=\"false\"\n data-show-questions=\"false\"\n data-show-report=\"false\">\n</div>", "language": "html" } ] } [/block] This are the configuration options available as html attributes: [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Values", "h-2": "Description", "0-0": "data-role", "0-1": "\"gooru-player\"", "0-2": "Required. \nUsed to identify the container \nand embed the player into it.", "1-0": "data-collection-id", "1-1": "Any collection or assessment ID", "1-2": "Optional. \nThis is the ID of the\ncollection or assessment to play.", "2-0": "data-resource-id", "2-1": "Any valid resource ID.", "2-2": "Optional. \nPlayer will load this resource. \nLeave blank and the Player \nwill load the first resource of collection.\nIf data-collection-id is not set, the widget will show the resource player.", "4-0": "data-show-reactions", "4-1": "\"true\" or \"false\". Default: \"false\"", "4-2": "Optional. \nShow/Hide the reactions bar.", "5-0": "data-show-questions", "5-1": "\"true\" or \"false\". Default: \"true\"", "5-2": "Optional. \nUse \"false\" to hide \nresources of type \"Question\".", "6-0": "data-show-report", "6-1": "\"true\" or \"false\". Default: \"true\"", "6-2": "Optional. \nUse \"false\" to hide Usage Report.", "9-0": "data-gooru-token", "9-1": "Any valid Gooru user authentication token.", "9-2": "Optional. \nUsed to authenticate user and track events. \nLeave blank or don't include attribute \nto use anonymous mode.", "7-0": "data-show-collection-name", "7-1": "\"true\" or \"false\". Default: \"true\"", "7-2": "Optional.\nUse \"false\" to hide Collection name.", "8-0": "data-show-resource-header", "8-1": "\"true\" or \"false\". Default: \"true\"", "8-2": "Optional.\nUse \"false\" to hide Header of resource or question player.", "3-0": "data-question-id", "3-1": "Any question ID.", "3-2": "Optional.\nUse this attribute to play a single question. \ndata-collection-id and \ndata-resource-id must \nnot be set.", "10-0": "data-base-path", "10-1": "The base path where the player-widget.js file is located", "10-2": "Optional\nDefault: \"./\"" }, "cols": 3, "rows": 11 } [/block] [block:api-header] { "type": "basic", "title": "Sample Website" } [/block] Add the following page to any web server a try the Gooru Player Widget [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n \n <meta name=\"description\" content=\"\">\n <meta name=\"author\" content=\"\">\n <link rel=\"icon\" href=\"favicon.ico\">\n\n <title>Gooru Player Test Site</title>\n\n <!-- Add your website CSS -->\n\n <!-- Typical js -->\n <!--\n <script src=\"https://code.jquery.com/jquery-2.2.4.min.js\" integrity=\"sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=\" crossorigin=\"anonymous\"></script>\n -->\n \n <!-- Wiget loader JS -->\n <script src=\"https://playerwidget.gooru.org/player-widget.js\"></script>\n </head>\n <body>\n <div id=\"gooru-player\"\n data-role=\"gooru-player\"\n data-collection-id=\"7548b798-7fac-4352-91a8-991a50ba4f35\"\n data-resource-id=\"\"\n data-show-reactions=\"false\"\n data-show-questions=\"false\"\n data-show-report=\"false\"\n data-gooru-token=\"\">\n </div>\n </body>\n</html>", "language": "html" } ] } [/block] Check out an actual example here: [http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html](http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html) [block:embed] { "html": false, "url": "http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html", "title": "Gooru Player Test Site", "favicon": null, "iframe": true, "height": "600px" } [/block] You can use the following pages as a staring point to integrate Gooru Player Widget to your site: [block:callout] { "type": "info", "title": "Tip", "body": "You can use any of the supported configuration options (e.g. `data-collection-id`) as URL param in this websites." } [/block] * **Collection Player on a page with bootstrap:** [http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/sample.html](http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/sample.html) * **Resource Player on page with bootstrap:** [http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/sample-resource.html](http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/sample-resource.html) * **Full screen Collection Player:** [http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html](http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html) * **Full screen Resource Player:** [http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen-resource.html](http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen-resource.html)