SDK IntegrationLegacy API (Deprecated)
Legacy API (Deprecated)
TapKit v1.x class-based API (Deprecated)
Legacy API (Deprecated)
DEPRECATED
This API is deprecated since v2.0 and will be completely removed in v3.0.
New projects should use the Web Component API. For existing projects, see the Migration Guide.
Quick Start
CDN
<script src="https://files.edutap.ai/tap-sdk/loader.js"></script>
<tap-button></tap-button>
<script>
const sdk = new TapKit({ apiKey: 'your-api-key' });
await sdk.init({
course: { userId: 'user-123', courseId: 'course-456', clipId: 'clip-789' }
});
</script>npm
npm install @coxwave/tap-kitimport TapKit from '@coxwave/tap-kit';
const sdk = new TapKit({ apiKey: 'your-api-key' });
await sdk.init({
course: { userId: 'user-123', courseId: 'course-456', clipId: 'clip-789' }
});API Summary
Lifecycle
| API | Description |
|---|---|
new TapKit(config) | Create SDK instance |
init(params) | Initialize, returns Promise<cleanup> |
destroy() | Clean up SDK and remove DOM |
ready | Initialization complete Promise |
Properties
| API | Description |
|---|---|
isOpen | Chat open state (boolean) |
isInitialized | Initialization complete (boolean) |
Events (sdk.events)
| API | Description |
|---|---|
seekTimeline({ clipPlayHead, clipId }) | Request timeline seek |
onTimelineSeek(callback) | Subscribe to timeline seek events |
onAlarmFadeIn(handler) | Subscribe to alarm display events |
Video (sdk.video)
| API | Description |
|---|---|
bind(config, clipId) | Bind video player |
unbind() | Unbind video |
Core APIs
new TapKit(config)
const sdk = new TapKit({ apiKey: 'your-api-key' });init(params)
await sdk.init({
buttonId: 'my-button', // Optional: custom button ID
course: {
userId: 'user-123', // Required
courseId: 'course-456', // Required
clipId: 'clip-789', // Required
clipPlayHead: 0 // Optional: initial playback position
},
container: {
floatingConfig: {
position: { top: '64px', right: '32px' },
width: '360px',
height: 'calc(100% - 128px)',
borderRadius: '18px'
}
}
});destroy()
sdk.destroy();Video Synchronization
Video player synchronization is essential to fully utilize TapKit!
video.bind(config, clipId)
Connect video player to TapKit for bidirectional synchronization.
// HTML5 Video
const video = document.querySelector('video');
sdk.video.bind(video, 'clip-789');
// Custom player (YouTube, etc.)
sdk.video.bind({
getCurrentTime: () => player.getCurrentTime(),
setCurrentTime: (time) => player.seekTo(time, true),
}, 'clip-789');video.unbind()
sdk.video.unbind();Events API
events.seekTimeline(params)
Send player playback position to SDK.
sdk.events.seekTimeline({
clipId: 'clip-789',
clipPlayHead: 125.5
});events.onTimelineSeek(handler)
Called when SDK requests seeking to a specific time.
const unsubscribe = sdk.events.onTimelineSeek((clipPlayHead, clipId) => {
player.seek(clipPlayHead);
});
// Unsubscribe
unsubscribe();events.onAlarmFadeIn(handler)
Called when a notification is displayed.
const unsubscribe = sdk.events.onAlarmFadeIn((alarm) => {
console.log('Notification:', alarm.message);
});Complete Example
// 1. Create SDK
const sdk = new TapKit({ apiKey: 'your-api-key' });
// 2. Initialize
await sdk.init({
course: { userId: 'user-123', courseId: 'course-456', clipId: 'clip-789' },
container: {
floatingConfig: { position: { top: '64px', right: '32px' }, width: '360px' }
}
});
// 3. Video sync
const video = document.querySelector('video');
sdk.video.bind(video, 'clip-789');
// 4. Event listening
sdk.events.onTimelineSeek((time, clipId) => {
video.currentTime = time;
});
// 5. Cleanup (when needed)
sdk.destroy();Migration
Migrating to the new Web Component API provides:
- Cleaner code
- Standard Web Components usage
- Easy React/Vue integration
- CSS-based styling
// Legacy API
const sdk = new TapKit({ apiKey: 'your-api-key' });
await sdk.init({ course: { ... } });
// New API
const kit = document.querySelector('tap-kit');
kit.apiKey = 'your-api-key';For detailed migration steps, see the Migration Guide.