{"_id":"5864d2e079ce642d00f0ff51","version":{"_id":"5864d2df79ce642d00f0fec7","project":"56439dfe9eebf70d00490d54","__v":4,"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"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"2.0.0","version":"2"},"user":"5738f0646f67490e00d04b39","project":"56439dfe9eebf70d00490d54","__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,"updates":["57bf6422efe0050e00d50be2"],"next":{"pages":[],"description":""},"createdAt":"2016-06-23T22:15:03.947Z","link_external":false,"link_url":"","githubsync":"","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"}

Documentation

Authentication

Assessment

Class/All Users

Class/Teacher

Collection

Copier

Course

Lesson

Media Upload

Profile

Questions

Resources

Static Lookup Values

Taxonomy

Unit

User Prefs

Users

Search API

Suggest API

Crosswalk API

New Player Widget

One Roster

Single Sign-On

LTI Single Sign On

Access Catalog

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)