# Leaderboard View (Challenge)

Ready-made Leaderboard: Boost User Engagement and Motivation.

- **Adaptive Design**: The leaderboard automatically adapts to your KinesteX UI and can be fully customized in the admin dashboard
- **Real-time Updates**: Whenever a new ranking is available, the leaderboard automatically refreshes to show the latest standings

**Leaderboard Integration**

Display the leaderboard for a specific exercise:

_Swift (iOS)_
```swift
kinestex.createLeaderboardView(
    exercise: "Squats", // Specify the exercise id or title
    username: "", // if you know the username: highlight the user by specifying their username
    isLoading: $isLoading,
    customParams: [
        "style": "dark", // light or dark theme (default is dark)
        "isHideHeaderMain": true // OPTIONAL: hide the exit button from the leaderboard
    ],
    onMessageReceived: { message in
        switch message {
        case .exit_kinestex(_):
            showKinesteX = false
        default:
            break
        }
    }
)
```

_Kotlin (Android)_
```kotlin
KinesteXSDK.createLeaderboardView(
    context = this,
    exercise = "Squats", // exercise name or ID
    username = "John", // highlight username in leaderboard if known
    customParams = mutableMapOf(
        "style" to "dark",
        "isHideHeaderMain" to true // hide exit button
    ),
    isLoading = viewModel.isLoading,
    onMessageReceived = { message ->
        when (message) {
            is WebViewMessage.ExitKinestex -> finish()
            else -> println("Received: $message")
        }
    },
    permissionHandler = this
)
```

_React Native_
```jsx
// postData structure
const postData: IPostData = {
  key: 'YOUR_API_KEY',
  userId: 'YOUR_USER_ID',
  company: 'YOUR_COMPANY_NAME',
  exercise: 'Squats', // exercise name or ID
  style: {
    style: 'dark',
  },
};

<KinestexSDK
  data={postData}
  integrationOption={IntegrationOption.LEADERBOARD}
  username="John" // highlight this user in leaderboard (passed as prop)
  handleMessage={(type, data) => {
    if (type === 'exit_kinestex') {
      setShowKinesteX(false);
    }
  }}
/>
```

_Flutter_
```dart
KinesteXAIFramework.createLeaderboardView(
  isShowKinestex: showKinesteX,
  exercise: "Squats",
  username: "", // highlight user if known
  customParams: {
    "style": "dark",
    "isHideHeaderMain": true, // hide exit button
  },
  isLoading: ValueNotifier<bool>(false),
  onMessageReceived: (message) {
    if (message is ExitKinestex) {
      setState(() => showKinesteX.value = false);
    }
  },
)
```

_HTML / JavaScript_
```html
// Add to postData
const postData = {
  // ... all initial fields
  exercise: "Squats", // exercise name or ID
};

const userId = "unique-user-id"; // OPTIONAL: userId to highlight in leaderboard
const srcURL = `https://ai.kinestex.com/leaderboard/?userId=${userId}`;
webView.src = srcURL;
webView.onload = () => {
  sendMessage();
};
```

_React (TypeScript)_
```tsx
import { IntegrationOption, KinesteXSDK, type IPostData } from 'kinestex-sdk-react-ts';

// postData structure
const postData: IPostData = {
  key: 'YOUR_API_KEY',
  userId: 'YOUR_USER_ID',
  company: 'YOUR_COMPANY_NAME',
  exercise: 'Squats', // exercise ID or name 
  style: {
    style: 'dark',
  },
};

<KinesteXSDK
  data={postData}
  integrationOption={IntegrationOption.LEADERBOARD}
  username="John" // highlight this user in leaderboard (passed as prop)
  handleMessage={(type, data) => {
    if (type === 'exit_kinestex') {
      setShowKinesteX(false);
    }
  }}
/>
```

---
Source: https://www.kinestex.com/docs/integration/leaderboard-view · Index: https://www.kinestex.com/llms.txt