Embed Options

Three ways to embed a Kyndred companion. Pick the one that fits your use case.

1. Script tag (floating widget)

The simplest option. A floating chat bubble appears in the corner of your page. Visitors click it to open the chat window.

<script src="https://kyndred.dev/embed.js" data-companion="YOUR_TOKEN"></script>

html

Customization attributes

<script
  src="https://kyndred.dev/embed.js"
  data-companion="YOUR_TOKEN"
  data-position="bottom-left">
</script>

html

data-position — bottom-right (default) or bottom-left

JavaScript API

Control the widget programmatically:

window.KyndredEmbed.open();    // open the chat window
window.KyndredEmbed.close();   // close it
window.KyndredEmbed.destroy(); // remove the widget entirely

Use when: you want a chat bubble overlay on an existing page without redesigning your layout.

2. Inline iframe

Embed the companion directly in a specific area of your page. Gives you full control over size and placement.

<iframe
  src="https://kyndred.dev/embed/YOUR_TOKEN"
  allow="microphone"
  style="width: 100%; height: 600px; border: none; border-radius: 12px;">
</iframe>

html

Important: The allow="microphone" attribute is required for voice conversations.

Use when:you want the companion as a section of your page (e.g., a sidebar, a dedicated "Ask the AI" area, or inside a modal).

3. Full-page link

Send visitors directly to the hosted companion page. No embedding required — just share the URL.

https://kyndred.dev/embed/YOUR_TOKEN

url

Use when: you want to share the companion via a direct link (QR codes, email links, social media, mobile app WebViews).

Mobile WebViews (Flutter, React Native)

The iframe URL works inside any WebView. Make sure your native app grants microphone permission if you want voice to work.

Flutter example

import 'package:webview_flutter/webview_flutter.dart';

final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(Uri.parse('https://kyndred.dev/embed/YOUR_TOKEN'));

// Grant mic permission:
// Android: set permissions in AndroidManifest.xml + onPermissionRequest handler
// iOS: add NSMicrophoneUsageDescription to Info.plist

dart

React Native example

import { WebView } from 'react-native-webview';

<WebView
  source={{ uri: 'https://kyndred.dev/embed/YOUR_TOKEN' }}
  allowsInlineMediaPlayback
  mediaPlaybackRequiresUserAction={false}
  // iOS: add NSMicrophoneUsageDescription to Info.plist
  // Android: add <uses-permission android:name="android.permission.RECORD_AUDIO" />
/>

jsx

Security: origin restrictions

Embed tokens are public (visible in your HTML source). By default they work on any origin. To lock a token to specific domains, set allowed_origins in your companion's settings.

Requests from other origins get a 403 response. See the API reference for the full auth model.