{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]},"settings":""},"next":{"description":"","pages":[]},"title":"Integrating Gooru Application Widget","type":"basic","slug":"integrating-gooru-application-widget","excerpt":"Gooru application can be also embedded in a 3rd party application, any of the existing pages can be accessed directly.","body":"[block:api-header]\n{\n \"type\": \"basic\",\n \"title\": \"Embedding the app\"\n}\n[/block]\n * Include the script *application-widget.js* at your html page\n * Include an HTML element to embed the application, the id *gooru-application-container* is required\n * Add the application script to start up the app *aw = new ApplicationWidget('#gooru-application-container', options)* \n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"<body>\\n\\n <div id=\\\"gooru-application-container\\\"></div>\\n\\n <script src=\\\"../application-widget.js\\\"></script>\\n\\n <script type=\\\"text/javascript\\\">\\n (function () {\\n var aw = new ApplicationWidget('#gooru-application-container', {\\n \\\"appRootPath\\\": \\\"../\\\",\\n \\\"transition\\\": [ 'player', 'b6170219-5841-46b8-9c6a-d684bc457538', { queryParams: { type: 'collection', role: 'student' }}]\\n });\\n })();\\n </script>\\n</body>\",\n \"language\": \"html\"\n }\n ]\n}\n[/block]\n# Options\n\n### appRootPath\nIndicates where the application-widget.js is hosted, another resources would be loaded from there\n\nDefault: \"\"\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"aw = new ApplicationWidget('#gooru-application-container', { \\\"appRootPath\\\": \\\"../\\\" };\",\n \"language\": \"javascript\",\n \"name\": \"appRootPath Example\"\n }\n ]\n}\n[/block]\n### transition \nIt is used to indicate the page to be presented to the user, it is an array having the route name, route params and query params\n\nDefault: sign in page\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"aw = new ApplicationWidget('#gooru-application-container', {\\n \\\"appRootPath\\\": \\\"../\\\",\\n \\\"transition\\\": [ 'player', collectionId, { queryParams: { type: type, role: 'student' }}]\\n}\",\n \"language\": \"javascript\",\n \"name\": \"transition Example\"\n }\n ]\n}\n[/block]\n### token (optional)\nIt contains an authorized Gooru token, the application will start a user session with it\n\nDefault: anonymous\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"aw = new ApplicationWidget('#gooru-application-container', {\\n \\\"appRootPath\\\": \\\"../\\\",\\n \\\"token\\\": MTQ3OTcwODQxMTE2Mzo3MjQwZDBiMS1lM2I0LTRmMDgtOTMwMC1mMGE2ZmJlMjljMWQ6YmE5NTZhOTctYWUxNS0xMWU1LWEzMDItZjhhOTYzMDY1OTc2\\n}\",\n \"language\": \"javascript\",\n \"name\": \"token Example\"\n }\n ]\n}\n[/block]\n### sourceId (optional)\nIt contains an sourceId identifying the customer, most of the time is used by LTI communication\n\nDefault: \"\"\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"aw = new ApplicationWidget('#gooru-application-container', {\\n \\\"appRootPath\\\": \\\"../\\\",\\n \\\"sourceId\\\": aebbfd-45454\\n} \",\n \"language\": \"javascript\",\n \"name\": \"sourceId Example\"\n }\n ]\n}\n[/block]\n### themeId (optional)\nGooru provides several UI themes, this property indicates which css rules should be loaded\n\nDefault: gooru\nPossible Values: gooru, london\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"aw = new ApplicationWidget('#gooru-application-container', {\\n \\\"appRootPath\\\": \\\"../\\\",\\n \\\"themeId\\\": london\\n} \",\n \"language\": \"javascript\",\n \"name\": \"themeId Example\"\n }\n ]\n}\n[/block]\n### features\nWhen setting up the widget it is possible to enable or disable functionality, the features property is a json object containing the features to be disabled.\n\nDefault: all features are enabled\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"{\\n features: {\\n header: {\\n enabled: true\\n },\\n collections: {\\n player: {\\n showReactionBar: true,\\n showReportLink: true\\n }\\n }\\n }\\n}\",\n \"language\": \"javascript\",\n \"name\": \"Possible Features\"\n }\n ]\n}\n[/block]\n header.enabled - Useful to hide the application header\n collections.player.showReactionBar - Useful to hide the reaction bar at the collection player\n collections.player.showReportLink - Useful to hide the player summary report\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"aw = new ApplicationWidget('#gooru-application-container', {\\n \\\"appRootPath\\\": \\\"../\\\",\\n \\\"collections\\\": {\\n \\\"player\\\": {\\n \\\"showReactionBar\\\": false,\\n \\\"showReportLink\\\": false\\n }\\n }\\n} \",\n \"language\": \"javascript\",\n \"name\": \"Features Example\"\n }\n ]\n}\n[/block]\n### application properties \nWhen setting up the widget it is possible to set any other application property, any property you add needs to match the name expected by the application. \n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"aw = new ApplicationWidget('#gooru-application-container', {\\n \\\"appRootPath\\\": \\\"../\\\",\\n \\\"endpoint\\\" : {\\n \\\"url\\\": \\\"http://nucleus-qa.gooru.org\\\",\\n \\\"secureUrl\\\": \\\"https://nucleus-qa.gooru.org\\\"\\n },\\n \\\"realTime\\\": {\\n \\\"webServiceUrl\\\": \\\"https://rt.nucleus-qa.gooru.org\\\",\\n \\\"webSocketUrl\\\": \\\"https://rt.nucleus-qa.gooru.org\\\",\\n },\\n }\",\n \"language\": \"javascript\",\n \"name\": \"Application Properties Example\"\n }\n ]\n}\n[/block]\n\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"{\\n \\\"appRootPath\\\": \\\"/\\\", //default is root\\n \\\"endpoint\\\" : {\\n \\\"url\\\": \\\"http://nucleus-qa.gooru.org\\\",\\n \\\"secureUrl\\\": \\\"https://nucleus-qa.gooru.org\\\"\\n },\\n\\n \\\"realTime\\\": {\\n \\\"webServiceUrl\\\": \\\"http://goorurt.qa.gooruweb.edify.cr\\\",\\n \\\"webServiceUri\\\": \\\"/nucleus/realtime\\\",\\n \\\"webSocketUrl\\\": \\\"https://goorurt.qa.gooruweb.edify.cr\\\",\\n \\\"webSocketUri\\\": \\\"/ws/realtime\\\"\\n },\\n\\n \\\"teams\\\": {\\n \\\"url\\\": \\\"http://teams-qa.gooru.org\\\"\\n },\\n\\n \\\"player\\\": {\\n \\\"resources\\\":{\\n \\\"pdf\\\": {\\n \\\"googleDriveEnable\\\": false,\\n \\\"googleDriveUrl\\\":\\\"https://docs.google.com/gview?url=\\\"\\n }\\n }\\n }\\n};\",\n \"language\": \"javascript\",\n \"name\": \"Possible application properties\"\n }\n ]\n}\n[/block]","updates":[],"order":1,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"58353f64501f060f001f53f1","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},"parentDoc":null,"__v":0,"createdAt":"2016-11-23T07:04:04.661Z","githubsync":"","project":"56439dfe9eebf70d00490d54","user":"5706dce42138ed0e0060f8ab","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}}
Integrating Gooru Application Widget
Gooru application can be also embedded in a 3rd party application, any of the existing pages can be accessed directly.