API Reference

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:

<!-- 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:

AttributeValuesDescription
data-role"gooru-player"Required.
Used to identify the container
and embed the player into it.
data-collection-idAny collection or assessment IDOptional.
This is the ID of the
collection or assessment to play.
data-resource-idAny 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-idAny 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-tokenAny 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-pathThe base path where the player-widget.js file is locatedOptional
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.