Widget

The pymetrics widget is an iframeable pymetrics experience that you may embed onto your website. Your users can play the pymetrics games and receive their trait and career reports. You can then access their results via our partner API.

Requirements

You will receive the following information from your pymetrics rep in order to implement the widget onto your website.

Key	Required	Description
Widget ID	always	Used to serve up your widget experience to your users

Iframe

Embed the iframe onto your webpage with the following HTML and your Widget ID:

 <iframe src=”https://www.pymetrics.com/embeddable/widget/<widget_id>/” frameborder="0"></iframe>

Please replace the widget_id variable with your Widget ID given to you by pymetrics.

Style

You can embed the pymetrics widget on whichever page of your site you'd like, but the widget must be at least 620px in height and 800px in width. The pymetrics web games are not meant to be played on a screen smaller than that.

We recommend giving the pymetrics widget fixed positioning so that your user does not experience a scrollbar within our iframe and on your site simultaneously.

An example of the widget can be found at https://www.pymetrics.com/embeddable/test/

User Login

By default, users will log into the widget by creating an account on pymetrics.

SAML Login

If you wish to bypass the pymetrics login and use your own, you need to set up a SAML2 Identity Provider. If you wish to go this route, send your pymetrics rep the link to your IdP metadata after setting up SAML2 and then your pymetrics rep will send you a link to the pymetrics SAML2 Service Provider metadata.

An example of the pymetrics SP metadata can be found https://www.pymetrics.com/saml2-sp/demo/demo/metadata/.

Events

You may subscribe to events from the widget, for example to ping our partner API when a user completes a game or all games.

You may do so by implementing the following javascript code on the page that contains the widget:

 // Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
    console.log('parent received message!: ', e.data);
    // do what you want depending on the event that got sent from the widget
},false);

Here are the events that the widget will send:

Value	Description
pymetrics.widget.login	User logs into the widget using the pymetrics authentication system
pymetrics.widget.register	User signs up (this will be followed by a "pymetrics.widget.login" action)
pymetrics.widget.initialize	User is authenticated (pymetrics auth/SAML/Oauth) and enters logged-in widget state
pymetrics.widget.played_game	User has completed playing a game
pymetrics.widget.completed_games	User has completed all required games, and their results have started to calculate
pymetrics.widget.navigate.*	User has navigated to a state within the widget (for example, pymetrics.widget.navigate.main.games or pymetrics.widget.navigate.main.traits)