Integrating FittyAI Virtual Trainer

The Full FittyAI workout integration provides the fastest and most comprehensive solution for incorporating the FittyAI virtual trainer into your application. This integration includes everything needed to provide your users with an immersive virtual trainer experience: repetition counting, live voice feedback, time constraints, and motivational encouragement.

Setting Up the Project

This tutorial outlines the steps to integrate a full virtual trainer workout into a React application by creating a simple demo app.

Create the React App

To create the React app, run the following commands:

  yarn create react-app

Start the app:

  yarn start

A new tab or window should open in your browser, displaying an empty example React page.

Adding the Iframe Component

The Full FittyAI workout can be integrated using an iframe, eliminating the need to establish a custom websocket connection. Below is the complete App component in index.js that integrates the FittyAI workout.

import React from 'react';
import './App.css';
import { v4 as uuidv4 } from "uuid";

class App extends React.Component {

  componentDidMount() {
    window.addEventListener('resize', this.updateIframeHeight);
    this.updateIframeHeight();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateIframeHeight);
  }

  updateIframeHeight = () => {
    const iframe = document.getElementById('my-iframe');
    iframe.style.height = window.innerHeight + 'px';
  }

  render() {
      const clientId = 'YOUR_CLIENT_NAME';
      const environment = "prod";
      const sessionId = uuidv4();
      const exerciseIndex = 0;
      const workoutId = "ASK-FOR-SUPPORT-TO-RECEIVE-THIS-OR-CREATE-VIA-API";
      const JWT = "GENERATED JWT TOKEN";
      const url = `https://${environment}.fittyai.com/web/${clientId}/${workoutId}/${sessionId}?JWT=${JWT}&eventIndex=${exerciseIndex}`;
      return (
        <div className="App">
          <iframe 
            id="fittyai-iframe" 
            src={url} 
            width="100%" 
            height="100%" 
            title="FittyAI iframe" 
            style="border: 'none'"
            allow="camera"
          ></iframe>
        </div>
      );
  };
}

export default App;

Key Concepts

• sessionId: A unique identifier for each workout session, used to retrieve session results and track user progress.
• workoutId: An identifier associated with a specific workout, which is a set of exercises and their parameters (e.g., number of repetitions, time per exercise) that the user must perform. Workouts can be either created by us or you can create on your own using FittyAI workouts management API.
• exerciseIndex: An optional parameter that you can provide in order to load the workout from the certain exercise in the workout. By default it will be equal to 0.
• JWT: A token generated using your personal secret and client id provided during your onboarding session.

After running the app, you should see the workout displayed in full screen.

---

Make sure to replace the placeholder values in the App component with actual values, such as your client name, workout id, and JWT token. Additionally, ensure you have the necessary dependencies installed, such as uuid, by running yarn add uuid.