CDN

Use the CDN loader and the <tap-kit> Web Component for static HTML or an existing web service.

1. Add the loader and Chatbot

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

<tap-kit
  id="course-chatbot"
  mode="inline"
  user-id="user-123"
  course-id="course-456"
  clip-id="clip-789"
  style="display: block; height: 600px"
></tap-kit>

2. Set the API key

Set the API key as a JavaScript property, not an HTML attribute.

<script>
  const chatbot = document.querySelector('#course-chatbot');
  chatbot.apiKey = 'your-api-key';
</script>

Content Security Policy

If your service uses a strict CSP, allow at least these sources:

script-src https://files.edutap.ai
frame-src https://app.edutap.ai

Your environment may also require additional connect-src rules for API connections.

Verify the installation

• The Chatbot appears inside the <tap-kit> area.
• loader.js returns 200 in the browser Network panel.
• The console shows no API key or CSP errors.

Next steps

• Video integration
• Styling
• Troubleshooting