You've built a chat character (covered in the previous post). Now you want it on your own website — not only behind a "visit our portal" link, but inside your product, support, or homepage.

DocuTrain ships a one-snippet embed for that. Paste it into your site's HTML and visitors get a branded, searchable hub of your documents — your character's avatar up top and a click-to-chat experience for any file they pick.

Most of your audience will never log into DocuTrain. They'll meet your assistant on your site.

What the embed looks like

When someone lands on a page with the character embed, they see:

                  ┌─────────────────────┐
                  │                     │
                  │     [Big circular   │
                  │      avatar image]  │
                  │                     │
                  └─────────────────────┘

              Welcome to Doc's Database

       Ask Doc about our clinical protocols and
       he'll cite the exact source documents.

       ┌─────────────────────────────────────────┐
       │  🔍 Search documents…                   │
       └─────────────────────────────────────────┘

       [Guidelines]   [Manuals]   [Training]   [Slides]

       ┌──────────┐  ┌──────────┐  ┌──────────┐
       │  cover   │  │  cover   │  │  cover   │
       │  image   │  │  image   │  │  image   │
       │          │  │          │  │          │
       │ Title    │  │ Title    │  │ Title    │
       │ 2025 •   │  │ 2024 •   │  │ 2025 •   │
       │ Guidelines  │ Manuals  │  │ Training │
       └──────────┘  └──────────┘  └──────────┘

A large circular avatar at the top. The title reads "Welcome to {Character Name}'s Database". Below the avatar is your custom intro. Then search, category tabs, and a grid of document cards with covers, titles, years, and category labels.

Click a card and a fullscreen panel opens with the chat experience for that document. Your character answers from that file and cites sources as it goes.

The whole experience uses your accent color — tabs, buttons, focus rings, hovers — so it feels native to your site.

How you get it onto your site

In Owner Settings → Chat Assistant, scroll past the character fields to Embed Code. Copy the generated snippet and paste it into your page. That's the installation.

It looks roughly like this:

<div id="character-embed-root"></div>
<script>
  window.CharacterEmbedConfig = {
    ownerSlug: 'your-owner-slug',
    apiBaseUrl: 'https://www.docutrain.io',
    chatBaseUrl: 'https://www.docutrain.io',
    accentColor: '#1e40af'
  };
</script>
<link rel="stylesheet" href="https://www.docutrain.io/css/character-embed.css">
<script src="https://www.docutrain.io/js/character-embed.js"></script>

Styles and script load from DocuTrain; the widget fills the <div> you placed. No build step or package install — just paste and go.

Three views, one widget

1. Hub view (multiple categories)

With documents in more than one category, the default is a hub: tiles per topic, each showing a small cover collage, the category name, and how many documents live there. Good when you have lots of material and want people to pick a topic first.

2. List view (one category)

After someone picks a topic, they see tabs for all categories, an optional year filter (only if your documents have years filled in), and a grid of cards. A back control returns to the hub.

3. Search view

Search always filters across titles, descriptions, years, and categories. Results use the same card layout, with a clear way to clear the query.

Transitions are lightly animated so the widget feels responsive, not jumpy.

Click a card → chat

Choosing a document opens a modal with the chat view for that file — character header, citations, and the same access rules as the main site. The modal is easy to close (backdrop click, Escape, or a close control) and restores scroll position so the host page doesn't jump.

What's controlled from the dashboard

Everything is driven by Owner Settings — avatar, name, embed intro, accent color, and which documents exist. Categories and year filters come from how you've organized and tagged content. Change a setting or publish a document, and the embed updates; you usually don't need to re-paste the snippet.

Access control still applies

A common worry: does a public embed leak private documents?

No. The library only lists what that visitor is allowed to see. Anonymous visitors typically see public material; logged-in users with accounts see what their membership allows. Internal-only docs stay hidden from the list.

Embedding is meant to work on any normal website; your sharing rules still apply on every request. Same expectations as visiting your DocuTrain site directly.

A real-world setup, end-to-end

A nephrology society uploads many clinical guidelines, tags them by category (Acute Care, Transplantation, Pediatric, Pharmacology), and sets most to public with a few reserved for members.

They want Dr. Helena on their own site:

  1. Open Owner Settings → Chat Assistant
  2. Enable the character
  3. Name Dr. Helena, generate an avatar, write a short intro
  4. Set accent to the society's blue
  5. Paste the embed snippet into their /guidelines page

A visitor sees the hub, searches "ACE inhibitors", opens Hypertension Management 2024, and chats with Dr. Helena — cited answers, no DocuTrain login, never leaving the society's domain.

One embed. One configuration. Many documents, one branded front door.

Character embed vs. single-document widget

  • Character embed (this post) — "Browse our library with our character at the center." Homepage, support portal, knowledge base landing.
  • Document widget (next post) — "Chat about this one document on this one page." Product detail, article, campaign.

Most teams use both: a library embed for the main entry, smaller widgets where context is already narrow.

→ Next: Embedding DocuTrain Anywhere: Five Ways to Put Chat on Your Site