{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","settings":"","params":[],"results":{"codes":[]}},"next":{"description":"","pages":[]},"title":"Integrating Gooru Player Widget","type":"basic","slug":"integrating-gooru-player-widget","excerpt":"How to embed Gooru Player in your website","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)","updates":["57bf6422efe0050e00d50be2"],"order":0,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"576c5f67a39bbf0e00db4ce6","createdAt":"2016-06-23T22:15:03.947Z","githubsync":"","parentDoc":null,"project":"56439dfe9eebf70d00490d54","user":"5738f0646f67490e00d04b39","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"New Player Widget","slug":"player-widget","order":19,"from_sync":false,"reference":false,"_id":"576c5eaf5738570e00ff070f","project":"56439dfe9eebf70d00490d54","createdAt":"2016-06-23T22:11:59.399Z","version":"56439dff9eebf70d00490d57","__v":0},"version":{"version":"1","version_clean":"1.0.0","codename":"","is_stable":false,"is_beta":true,"is_hidden":false,"is_deprecated":false,"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"],"_id":"56439dff9eebf70d00490d57","createdAt":"2015-11-11T19:58:55.144Z","project":"56439dfe9eebf70d00490d54","releaseDate":"2015-11-11T19:58:55.144Z","__v":26},"__v":17}
Integrating Gooru Player Widget
How to embed Gooru Player in your website