SDK Integration
Migration Guide
Migrating from Legacy API (v1.x) to Web Component API (v2.0+)
Migration Guide
This guide covers migrating from Legacy API (v1.x) to Web Component API (v2.0+).
Deprecation Timeline
- v2.0 (current): Legacy API deprecated, usable but shows warnings
- v3.0 (planned): Legacy API fully removed
We recommend migrating as soon as possible.
Breaking Changes (v2.0)
1. Default Mode Change: Floating → Inline
<!-- v1.x: Floating by default -->
<script>
const sdk = new TapKit({ apiKey: 'your-api-key' });
await sdk.init({ ... });
</script>
<!-- v2.0: Inline by default, Floating must be explicit -->
<tap-kit floating user-id="..." course-id="..." clip-id="..."></tap-kit>2. API Change: Class → Web Component
// v1.x (class)
const sdk = new TapKit({ apiKey: 'your-api-key' });
await sdk.init({
course: { userId: '...', courseId: '...', clipId: '...' }
});<!-- v2.0 (Web Component) -->
<tap-kit user-id="..." course-id="..." clip-id="..."></tap-kit>
<script>
const kit = document.querySelector('tap-kit');
kit.apiKey = 'your-api-key';
</script>3. Style Configuration Change: container → CSS
// v1.x
container: {
floatingConfig: {
position: { top: '64px', right: '32px' },
width: '360px',
borderRadius: '18px'
}
}/* v2.0 */
tap-kit[floating] {
top: 64px;
right: 32px;
width: 360px;
border-radius: 18px;
}Migration Scenarios
CDN: Floating Widget
Before (v1.x)
<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>After (v2.0)
<script src="https://files.edutap.ai/tap-sdk/loader.js"></script>
<tap-button></tap-button>
<tap-kit floating user-id="user-123" course-id="course-456" clip-id="clip-789"></tap-kit>
<script>
const kit = document.querySelector('tap-kit');
kit.apiKey = 'your-api-key';
</script>React Integration
Before (v1.x)
import { useEffect, useRef } from 'react';
function App() {
const initialized = useRef(false);
useEffect(() => {
if (initialized.current) return;
initialized.current = true;
const sdk = new TapKit({ apiKey: 'your-api-key' });
sdk.init({
course: { userId: '...', courseId: '...', clipId: '...' }
});
return () => sdk.destroy();
}, []);
return <button id="chat-button">AI Tutor</button>;
}After (v2.0)
'use client';
import { TapKit, useTapKit } from '@coxwave/tap-kit/react';
function App() {
const tapkit = useTapKit({
apiKey: 'your-api-key',
userId: 'user-123',
courseId: 'course-456',
clipId: 'clip-789',
});
return <TapKit control={tapkit.control} style={{ height: '600px' }} />;
}Step-by-Step Migration
Step 1: HTML Changes
<!-- Before -->
<tap-button></tap-button>
<!-- After -->
<tap-button></tap-button>
<tap-kit floating user-id="..." course-id="..." clip-id="..."></tap-kit>Step 2: JavaScript Changes
// Before
const sdk = new TapKit({ apiKey: 'your-api-key' });
await sdk.init({ course: { ... } });
// After
const kit = document.querySelector('tap-kit');
kit.apiKey = 'your-api-key';
await kit.ready;Step 3: Style Changes
/* container.floatingConfig → CSS */
tap-kit[floating] {
top: 64px;
right: 32px;
width: 360px;
}Step 4: Testing
- Verify chat open/close behavior
- Verify position and size
- Verify event listener functionality
FAQ
Q. Will v1.x code work in v2.0?
Yes, it works with deprecated warnings. It will be removed in v3.0, so migrate soon.
Q. I want to keep using Floating mode
Add the floating attribute:
<tap-kit floating user-id="..." course-id="..." clip-id="..."></tap-kit>Migration Checklist
- Change
new TapKit()→<tap-kit>oruseTapKit() - Remove
init()calls - Add
floatingattribute (for Floating mode) - Change
container.floatingConfig→ CSS - Property names: camelCase → kebab-case
- Testing complete