A practical walkthrough for adding a real AI companion to a website. Not a text chatbot. A conversational character with voice and a face. By the end you'll have a working widget on your site that visitors can click to start a voice conversation, and the companion will remember who they are across sessions.
Five minutes, about fifteen lines of HTML. For the definitional piece on what an AI Companion is and why you'd want one, see the SDK guide.
What you're building
A single embed snippet that adds a floating chat bubble to your site. When a visitor clicks it, a conversation opens with an AI companion you configured: your system prompt, your voice, your branding. Voice is optional. Text works without it. Avatar is included by default.
Prerequisites:
- A website you can add a
<script>tag to. - About five minutes.
- Optionally: an ElevenLabs ConvAI agent ID if you want voice.
Step 1: create a companion
Sign in at kyndred.dev and create a new companion. Three things to fill out.
Name. Shows up at the top of the chat UI.
System prompt. The personality, role, and guardrails. The single biggest lever over how the companion feels. A few hundred words of clear instructions beats a model you can't prompt.
Greeting. What the companion says when a visitor opens the chat, before any input.
An example system prompt for a coaching-app companion:
You are a warm, supportive coach for users of MyApp. Help them reflect
on their goals, celebrate wins, and work through blockers. Use plain
language. Keep responses under three sentences unless they ask for
more. Never claim to be human. If a user is in crisis, gently suggest
they speak with a licensed professional.
You can iterate on this later. It's just text.
Step 2: copy your embed snippet
Open the companion's settings, go to the Embed Code tab, copy the snippet. It looks like this:
<script src="https://kyndred.dev/embed.js" data-companion="YOUR_TOKEN"></script>
The token is specific to that companion. Each companion you create has its own token.
Step 3: paste it on your site
Paste the snippet anywhere before the closing </body> tag. Exact location doesn't matter. The widget finds itself.
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
</head>
<body>
<h1>Welcome</h1>
<p>Your page content here.</p>
<script
src="https://kyndred.dev/embed.js"
data-companion="YOUR_TOKEN"
></script>
</body>
</html>
That's the full integration. Open your site, and a floating chat bubble appears in the bottom-right corner.
Step 4: test it
Click the bubble. The chat window opens. Type a message, hit enter. The companion responds. You should see:
- Streaming text response (tokens arrive as they're generated).
- The avatar's mouth moves with the audio if voice is on.
- The conversation persists if you reload the page.
If the response feels slow, the usual culprit is a system prompt that's too long. The model takes more time on the first token when the context is heavy. Tighten the prompt.
Step 5: add voice (optional)
To enable conversational voice, you need an ElevenLabs ConvAI agent.
- Sign up at elevenlabs.io and create a ConvAI agent.
- Configure its voice, personality, and tools. The ConvAI personality can mirror or complement the Kyndred system prompt. They work together.
- Copy the agent ID.
- Paste it into your companion's Voice settings in the Kyndred dashboard.
Now when a visitor clicks the widget, they can tap a microphone icon and speak. The companion listens, responds, and the avatar's mouth moves with the audio thanks to our viseme pipeline.
There's a full walkthrough including voice tuning in the Voice Setup docs.
Customization
A few things you can configure from the dashboard without touching code:
- Theme color. Matches your brand.
- Position. Bottom-right, bottom-left, or inline.
- Greeting. Multiple variants for A/B testing.
- Knowledge. Upload docs, FAQs, product info the companion should know.
- Memory. Turn persistent memory on or off per companion.
- Moderation. Blocklists, topic restrictions, fallback messages.
For more granular control (custom layouts, triggering the widget programmatically, passing user identity for cross-session memory), see the SDK reference and the API docs.
Common issues
The widget doesn't appear. Check the browser console. The most common cause is a wrong token or an archived companion. Tokens are case-sensitive.
Voice doesn't work but text does. Voice requires an ElevenLabs ConvAI agent ID wired up in the companion settings. Text works without it.
Responses are slow.
Usually a long system prompt. Trim it to under 1,000 tokens unless you genuinely need more. Also check your site's Content Security Policy. CSP can silently block the embed script if script-src is restricted.
The companion doesn't remember me. Memory is per-session by default. For cross-session memory, you need to pass a stable user identifier via the SDK so the companion can associate conversations with the same user. See the SDK docs.
What to do next
Point it at a real personality. The generic default is fine for testing but won't convert visitors. Write a system prompt specific to your product and audience.
Turn on voice if it fits. Voice is strong for coaching, tutoring, wellness, and character experiences where users come back to the same companion. It's overkill for transactional Q&A.
Measure engagement. The dashboard shows conversations, average duration, and completion rate. Watch these numbers and iterate on the system prompt based on where conversations drop off.
Explore the use cases. For how companions drive engagement and retention in education, coaching, and wellness, see AI companions for education, coaching, and wellness. For a comparison against other platforms, see Character.AI alternatives for developers.
FAQ
How much does embedding an AI companion cost? Kyndred's pricing is on the pricing page. Voice is the biggest cost variable. ElevenLabs ConvAI is roughly $0.08 to $0.15 per minute depending on tier.
Can I embed the companion on a platform like WordPress or Shopify?
Yes. The script tag works on any platform that lets you inject custom HTML. For WordPress, drop it in the theme's footer or use a header/footer plugin. For Shopify, add it to the theme.liquid file.
Do I need a backend to embed an AI companion? No. The embed runs client-side and talks to Kyndred's backend directly. You only need a backend if you're passing user identity for cross-session memory. In that case you sign an identity token server-side with the API key.
Will the embed slow down my page? The script is lazy-loaded and around 40 KB gzipped. It adds no render-blocking resources. Lighthouse Performance scores shouldn't move measurably.
Can I self-host the embed? Not today. The conversation infrastructure (LLM routing, TTS streaming, memory) runs on Kyndred's backend. The embed script itself can be pulled from our CDN or self-hosted as a static asset if you prefer.
Is the embed GDPR-compliant? Yes, with caveats. You need to include the companion in your site's privacy disclosure and cookie consent flow. We don't drop third-party cookies, but conversation data is processed by our backend. Standard DPA terms apply. Contact sales for enterprise agreements.