WorkoutKit

Appearance

Quickstart ​

This guide shows the smallest complete HTML integration needed to launch WorkoutKit from a web page.

1. Load the SDK ​

html
<script
  type="application/javascript"
  src="https://cdn.fizzup.com/js/workoutkit-sdk/1.0.0/sdk.js"
></script>

2. Initialize WorkoutKit ​

Call workoutkit.init() with your WorkoutKit base URL:

js
workoutkit.init('https://cloud.YourCompany.fizzup.com')

3. Start a workout ​

Call workoutkit.start() with a workout identifier and the options your integration needs:

html
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Intégration FizzUp WorkoutKit</title>
    <script
      type="application/javascript"
      src="https://cdn.fizzup.com/js/workoutkit-sdk/1.0.0/sdk.js"
    ></script>
  </head>
  <body>
    <h1>Chargement de votre entrainement</h1>

    <script type="application/javascript">
      workoutkit.init('https://cloud.YourCompany.fizzup.com')

      workoutkit.start({
        workoutId: '4RGZ7S46',
        soundpack: 'none',

        getAccessToken: async function () {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve('your-access-token')
            }, 1000)
          })
        },

        onWorkoutQuit: function () {
          console.log('Event received: workout quit')
        },

        onWorkoutSave: function (workoutData) {
          console.log('Event received: workout save', workoutData)
        },

        onWorkoutEvent: function (action, payload) {
          console.log('Event received:', action, payload)
        },
      })
    </script>
  </body>
</html>

4. Understand the required fields ​

  • workoutId: required WorkoutKit workout identifier
  • soundpack: optional workout sound environment
  • getAccessToken: optional callback used when API authentication is enabled
  • onWorkoutQuit: optional callback triggered when the user exits the workout
  • onWorkoutSave: optional callback triggered when workout data is saved
  • onWorkoutEvent: optional generic event listener for broader tracking or logging

5. Close the workout iframe if needed ​

The SDK also exposes a close method:

js
workoutkit.close()

React integration ​

If you are integrating WorkoutKit in a React application, use the ready-to-use example in Usage.