API Reference
Start typing to search…

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:

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.