{"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":"5864d2e079ce642d00f0ff52","version":{"version":"2","version_clean":"2.0.0","codename":"","is_stable":true,"is_beta":true,"is_hidden":false,"is_deprecated":false,"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"],"_id":"5864d2df79ce642d00f0fec7","createdAt":"2016-12-29T09:09:51.074Z","project":"56439dfe9eebf70d00490d54","releaseDate":"2016-12-29T09:09:51.074Z","__v":18},"user":"5706dce42138ed0e0060f8ab","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"New Player Widget","slug":"player-widget","order":21,"from_sync":false,"reference":false,"_id":"5864d2df79ce642d00f0fedb","__v":0,"version":"5864d2df79ce642d00f0fec7","createdAt":"2016-06-23T22:11:59.399Z","project":"56439dfe9eebf70d00490d54"},"__v":0,"parentDoc":null,"project":"56439dfe9eebf70d00490d54","createdAt":"2016-11-23T07:04:04.661Z","githubsync":""}
Integrating Gooru Application Widget
Gooru application can be also embedded in a 3rd party application, any of the existing pages can be accessed directly.