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:

<!-- Wiget loader JS  -->
<script src="https://playerwidget.gooru.org/player-widget.js"></script>

Then, you must include a container element where player widget will load:

<div id="gooru-player"
     data-role="gooru-player"
     data-collection-id="7548b798-7fac-4352-91a8-991a50ba4f35"
     data-show-reactions="false"
     data-show-questions="false"
     data-show-report="false">
</div>

This are the configuration options available as html attributes:

Attribute	Values	Description
data-role	"gooru-player"	Required. Used to identify the container and embed the player into it.
data-collection-id	Any collection or assessment ID	Optional. This is the ID of the collection or assessment to play.
data-resource-id	Any valid resource ID.	Optional. Player will load this resource. Leave blank and the Player will load the first resource of collection. If data-collection-id is not set, the widget will show the resource player.
data-question-id	Any question ID.	Optional. Use this attribute to play a single question. data-collection-id and data-resource-id must not be set.
data-show-reactions	"true" or "false". Default: "false"	Optional. Show/Hide the reactions bar.
data-show-questions	"true" or "false". Default: "true"	Optional. Use "false" to hide resources of type "Question".
data-show-report	"true" or "false". Default: "true"	Optional. Use "false" to hide Usage Report.
data-show-collection-name	"true" or "false". Default: "true"	Optional. Use "false" to hide Collection name.
data-show-resource-header	"true" or "false". Default: "true"	Optional. Use "false" to hide Header of resource or question player.
data-gooru-token	Any valid Gooru user authentication token.	Optional. Used to authenticate user and track events. Leave blank or don't include attribute to use anonymous mode.
data-base-path	The base path where the player-widget.js file is located	Optional Default: "./"

Sample Website

Add the following page to any web server a try the Gooru Player Widget

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">

    <title>Gooru Player Test Site</title>

    <!-- Add your website CSS -->

    <!-- Typical js -->
    <!--
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
     -->
    
    <!-- Wiget loader JS  -->
    <script src="https://playerwidget.gooru.org/player-widget.js"></script>
  </head>
  <body>
    <div id="gooru-player"
         data-role="gooru-player"
         data-collection-id="7548b798-7fac-4352-91a8-991a50ba4f35"
         data-resource-id=""
         data-show-reactions="false"
         data-show-questions="false"
         data-show-report="false"
         data-gooru-token="">
    </div>
  </body>
</html>

Check out an actual example here:
http://gooru-player-widget.s3-website-us-west-1.amazonaws.com/production/partner-website/fullscreen.html

You can use the following pages as a staring point to integrate Gooru Player Widget to your site:

📘
Tip
You can use any of the supported configuration options (e.g. data-collection-id) as URL param in this websites.

Collection Player on a page with bootstrap: 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
Full screen Collection Player: 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