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
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',
directSelection:false,
studioButton:true,
displayNewActivitiesButtons:false,
myActivityFilterInitialValue:'disabled',
excludeActivityType:'article',
success: payload => {
console.info('Message received from Klaxoon Activity Picker: ', payload)
},
options: {
height: 940,
width: 639
}
})
}
</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.
Option | Description | Default value |
---|---|---|
height | Specifies the height of the Activity Picker, including scrollbars. | 940 |
width | Specifies the width of the Activity Picker, including scrollbars. | 639 |
left | Specifies 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 |
top | Specifies 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 |
directSelection | If 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 |
excludeActivityType | Exclude 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 |
studioButton | Include the Open the Studio button in the ActivityPicker interface. This button opens the Studio in a separate Tab. | true |
displayNewActivitiesButtons | If set to false the Activity Picker opens without New Board and New Session buttons. | true |
myActivityFilterInitialValue | If set to enabled the owned by me filter is enabled at launch. | disabled |
Try it!
Here is a very simple example of an integration of the Activity Picker into this page:
Updated 5 months ago