EduTap Integration Guide

Integrating EduTap AI Tutor into your website requires two steps:

1. SDK Integration: Display the AI tutor UI on your website
2. Data Integration: Provide course data for the AI tutor to learn from

Integration Steps

Step 1: SDK Integration

Install the TapKit SDK on your website to integrate the AI tutor interface. Choose between CDN or npm based on your project setup.

Key Topics:

• CDN method: Add directly to HTML without build tools
• npm method: Integration with React, Vue, Next.js and other modern frameworks
• API Reference: Methods, events, and configuration options
• Styling: UI customization
• Video integration: Timeline synchronization

Step 2: Data Integration

Provide course data so the AI tutor can learn the lecture content.

Key Topics:

• Course information structure (JSON)
• Subtitle files (SRT/VTT)
• Learning materials (PDF, HTML, code files)
• File server API usage
• Data preprocessing workflow

Quick Start Example

Basic example of adding and initializing the SDK in an HTML file:

<!-- 1. Load SDK -->
<script src="https://files.edutap.ai/tap-sdk/loader.js"></script>

<!-- 2. Add TapKit element -->
<tap-kit
  user-id="user-1"
  course-id="course-1"
  clip-id="clip-789">
</tap-kit>

<!-- 3. Add floating button (optional) -->
<tap-button position="bottom-right" size="large"></tap-button>

<!-- 4. Set API key -->
<script>
  const kit = document.querySelector('tap-kit');
  kit.apiKey = 'your-api-key';
</script>

tap-button Options

Video Player Integration (Recommended)

Connect the video player so the AI tutor can recognize the current playback position:

<video id="lecture-video" src="/lecture.mp4" controls></video>
<tap-kit user-id="user-1" course-id="course-1" clip-id="clip-789"></tap-kit>
<tap-button></tap-button>

<script>
  const kit = document.querySelector('tap-kit');
  kit.apiKey = 'your-api-key';

  // Video integration (videoTarget property)
  kit.videoTarget = document.getElementById('lecture-video');
</script>

Custom video players (YouTube, Vimeo, etc.) can be integrated via adapters. See the Video Integration Guide for details.

Key Features

• Auto Updates: CDN-based architecture automatically applies latest features
• Lightweight: npm package ~2.8KB (gzipped)
• Timeline Sync: Bidirectional communication with video player
• Event System: Track and control chat state
• TypeScript Support: Complete type definitions provided
• Customization: Freely adjust position, size, and style

System Requirements

Browser Support

Modern browsers supporting ES2020:

• Chrome 80+ (Feb 2020+)
• Firefox 74+ (Mar 2020+)
• Safari 13.1+ (Mar 2020+)
• Edge 80+ (Feb 2020+)

When Using npm

If using React, the following versions are required:

{
  "peerDependencies": {
    "react": "^18.0.0 || ^19.0.0"
  }
}

Works without React too, and React Hooks can be optionally imported.

Next Steps