Activity Picker

How to use the Activity Picker

Enable the Activity Picker

Using the Activity Picker itself doesn't require approval.

  • However if you plan to embed the selected activity into your web application through an iFrame your need to contact us to obtain an embedID. (see Klaxoon Embed for details)
  • If you plan to simply expose the link to the selected activity into your web application you can publish your integration to your users as soon as you're ready.

To get started with the Activity Picker API, you need to first Create an App

πŸ“˜

When you create an Activity Picker App for your web application, the domain names where you want to host Activity Picker on must be provided.

We use this to ensure the Picker responses are only allowed on your websites. It prevents others to use your ClientID. Allowed domains can be defined in the "Activity Picker" section of your App settings

449

The "Redirect URI for OAuth2" and "Permissions" sections of the App setting are not required.

Add the Activity Picker into your application

Once you've registered your application and provided the domain names where your app is hosted you can add the following JavaScript snippet to your HTML markup:

<script type="text/javascript" 
        src="https://static.klaxoon.com/activity-picker/activity-picker.js"></script>

<script>
  function onSomeButtonClick() {
    KlaxoonActivityPicker.openPicker({
      clientId: 'YOUR_CLIENT_ID',
      embedId: 'YOUR_EMBED_ID',
      success: payload => {
        console.info('Message received from Klaxoon Activity Picker: ', payload)
      },
      options: {
        height: 940,
        width: 639,
        directSelection:false
      }
    })
  }
</script>

The embedID is only required if you want to embed the selected content into your web application.

You can set the following options to specify the Activity Picker size and position.

OptionDescriptionDefault value
heightSpecifies the height of the Activity Picker, including scrollbars.940
widthSpecifies the width of the Activity Picker, including scrollbars.639
leftSpecifies the distance in pixels from the left side of the work area as defined by the user's operating system where the Activity Picker will be generated.100
topSpecifies the distance in pixels from the top side of the work area as defined by the user's operating system where the Activity Picker will be generated.100
directSelectionIf set to true the Activity Picker opens without Select and Cancel confirmation buttons. The response from the activity Picker is directly sent upon a user click on the activity items. If set to false the response is sent upon a user click on the Select confirmation button.false
excludeActivityTypeExclude one or many activity types from the activity picker list using a comma-separated string. Possible values article, mission, adventure memo, survey, quiz, board, session e.g:excludeActivityType: "article,memo"none
studioButtonInclude the Open the Studio button in the ActivityPicker interface. This button opens the Studio in a separate Tab.true

Try it!

Here is a very simple example of an integration of the Activity Picker into this page: