{"_id":"5864d2e079ce642d00f0ff51","version":{"_id":"5864d2df79ce642d00f0fec7","project":"56439dfe9eebf70d00490d54","__v":18,"createdAt":"2016-12-29T09:09:51.074Z","releaseDate":"2016-12-29T09:09:51.074Z","categories":["5864d2df79ce642d00f0fec8","5864d2df79ce642d00f0fec9","5864d2df79ce642d00f0feca","5864d2df79ce642d00f0fecb","5864d2df79ce642d00f0fecc","5864d2df79ce642d00f0fecd","5864d2df79ce642d00f0fece","5864d2df79ce642d00f0fecf","5864d2df79ce642d00f0fed0","5864d2df79ce642d00f0fed1","5864d2df79ce642d00f0fed2","5864d2df79ce642d00f0fed3","5864d2df79ce642d00f0fed4","5864d2df79ce642d00f0fed5","5864d2df79ce642d00f0fed6","5864d2df79ce642d00f0fed7","5864d2df79ce642d00f0fed8","5864d2df79ce642d00f0fed9","5864d2df79ce642d00f0feda","5864d2df79ce642d00f0fedb","5864d2df79ce642d00f0fedc","5864d2df79ce642d00f0fedd","5864d2df79ce642d00f0fede","598aa64f4b6e990019b7a2d2","599bc76bc03fa2000f83db2a","599bcc3c3c5bf7000f3434fc","5d427dc9fa56fa0011135058","5d429c616863d5003af785a7","5d429e0889418f00c5e95d3f","5d42b5f098b05e003acb08b4","5d43c16985775c00ebeede3b","5d43d15446d584003da91e6d","5d43d61a5bdac50011b6f234","5d43d7c2db365100640dbc58","5d43d954bffa8400ff7efa78","5d43e414cf4f03005944344c","5d43eb42db365100640dbe4a","5d43ee6c78121b0057bc1dbf","5d9a18b4afc33400126c4e6f","5dc4f96dbb5da3006c8f5660"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"2.0.0","version":"2"},"user":"5738f0646f67490e00d04b39","project":"56439dfe9eebf70d00490d54","githubsync":"","__v":0,"category":{"_id":"5864d2df79ce642d00f0fedb","__v":0,"version":"5864d2df79ce642d00f0fec7","project":"56439dfe9eebf70d00490d54","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-06-23T22:11:59.399Z","from_sync":false,"order":21,"slug":"player-widget","title":"New Player Widget"},"parentDoc":null,"metadata":{"title":"","description":"","image":[]},"updates":["57bf6422efe0050e00d50be2"],"next":{"pages":[],"description":""},"createdAt":"2016-06-23T22:15:03.947Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","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