TAIBLES User Guide

Appearance

3.2: Website Chatbot Widget ​

Imagine this: A customer visits your website at 3 AM, has a question, and gets an instant, helpful answer from your AI agent. They don't wait for business hours. They don't fill out a contact form and wait days for a response. They get help immediately.

That's what we're building right now!

By the end of this section, you'll have a live chat widget on your website that:

  • Appears as a friendly chat bubble on every page
  • Lets customers ask questions 24/7
  • Responds instantly with your assistant
  • Keeps every conversation in your workspace

No coding required. You'll paste one snippet that TAIBLES generates for you.

3.2.1: What You'll Build ​

Here's what your website will look like with the chat widget:

Your Awesome Website

Welcome to our site! We're here to help.

Your website with live chat widget

Customers can click the button to start chatting instantly

💡 The Customer Experience

Customer's perspective:

  1. They visit your website and see a chat bubble
  2. They click it and type their question
  3. They get an instant, helpful answer
  4. They feel impressed and taken care of!

Your perspective:

  • Everything happens automatically
  • You can review conversations anytime
  • You never miss a potential customer
  • Your agent handles routine questions 24/7

3.2.2: How It Works (The Big Picture) ​

The widget talks to your assistant directly. There is no plumbing to build:

  1. The widget loads on your page from a small script you paste in
  2. The visitor types a question in the chat bubble
  3. Your assistant answers, using the same knowledge and tools it has inside TAIBLES
  4. The conversation is kept so you can read it later

💡 💡 One Assistant, Many Places

The assistant on your website is the same assistant you talk to inside TAIBLES. Improve its instructions or add a document to its knowledge, and your website visitors get the improvement immediately—no re-publishing.

3.2.3: Prerequisites ​

Before you begin, make sure you have:

✅ An assistant that answers well

Don't have one yet? Go back to Section 2.1: Creating Your First Chatbot and build it first. It only takes 10 minutes!

✅ Knowledge (optional but recommended)

✅ Access to your website (or a web developer who can help)

  • You'll need to paste a small code snippet

Ready? Let's build!

3.2.4: Step 1 - Open the Embed Dialog ​

  1. Go to "Assistants" in the sidebar
  2. Open the assistant you want to publish
  3. Find the publish section and click the globe button, labelled "Embed in Website"

The dialog that opens is titled "Embed in Your Website". It has three parts, and we'll go through them in order: a token, the appearance, and the snippet.

3.2.5: Step 2 - Create an Embed Token ​

Your website needs permission to talk to your assistant. That permission is an embed token.

Under "Create an Embed Token":

  1. Give the token a name so you recognise it later—the field suggests something like Production Site
  2. Click "Create Token"
  3. Copy the token value right away

💡 You Only See It Once

TAIBLES shows the token value once, at creation. Copy it now—you won't be able to see it again. If you lose it, use "Regenerate" to create a new value (the old one stops working immediately).

Each token appears in a list showing whether it is "Active" or "Disabled", when it was created, and buttons to regenerate or delete it. Create one token per website so you can switch a single site off without affecting the others.

💡 🔒 What a Token Can Do

An embed token only allows chatting with this one assistant. It cannot read your tables, your other assistants, or anything else in your account. That's what makes it safe to put in a public web page.

3.2.6: Step 3 - Customize the Appearance ​

Under "Customize Appearance" you can make the widget fit your site:

  • "Accent Color" - Match your brand
  • "Chat Title" - What the header says, for example your company name
  • "Input Placeholder" - The grey hint in the message box
  • "Welcome Message" - The first thing visitors see (accepts HTML)
  • "Disclaimer Text" - A privacy or AI notice, shown when you also enable "Show disclaimer before chat opens"
  • "Message Cutoff Date" - Only show messages from a date onwards, written as a relative offset like +7d or as an ISO date

Three switches control what visitors can do:

  • "Show media upload button" - Let visitors attach files
  • "Show voice message button" - Let visitors speak instead of type
  • "Show tool call details to users" - When enabled, visitors see which tools the agent uses

💡 💡 Start Conservative

For a public website, leaving "Show tool call details to users" off usually reads better—visitors want the answer, not the machinery. Turn it on when you want to show off what the agent is doing.

3.2.7: Step 4 - Add the Widget to Your Website ​

Under "Add to Your Website", TAIBLES has already assembled your snippet, with your assistant, your token, and every appearance choice you just made.

Embed Code

TAIBLES generates this snippet for you, already filled in with your agent and your token. Paste it just before the </body> tag on your website: 

<!-- Uniki Chat Widget -->
<script>
  (function() {
    var s = document.createElement('script');
    s.type = 'module';
    s.src = 'https://taibles.ai/lib/uniki_chat_plugin.js';
    s.onload = function() {
      window.createUnikiChat({
        backendUrl: 'https://taibles.ai',
        agentId: 'your-agent-id',
        authToken: 'YOUR_EMBED_TOKEN',
        accentColor: '#6366f1',
        chatTitle: 'Chat with us',
        inputPlaceholder: 'Type a message...',
        toolCallDisplayLevel: 'minimal',
        showMediaUpload: true,
        showVoiceMessage: true,
        showDisclaimer: false,
      });
    };
    document.head.appendChild(s);
  })();
</script>

Don't have access to your website code? Send this snippet to your web developer or technical team.

Where to Put the Code ​

Option 1: You can edit your website's code

  1. Open your website's HTML file(s)
  2. Find the </body> tag (usually near the bottom)
  3. Paste the snippet just before </body>
  4. Save the file

Option 2: Using a website builder (WordPress, Wix, Squarespace, etc.)

Most website builders have a section for custom code:

  1. Go to your website builder's settings
  2. Look for "Custom Code," "Scripts," or "Footer"
  3. Paste the snippet there
  4. Save and publish

Option 3: Send it to your developer

Copy the snippet and email it with this note:

"Please add this chat widget code to our website. It should go just before the closing </body> tag on all pages where we want chat support."

3.2.8: Step 5 - Test It Live! ​

Time to see your creation in action! 🎉

  1. Visit your website

    • Open a browser and go to your site
    • You should see a chat bubble in the corner!

  2. Click the chat bubble

    • The chat window opens with your welcome message

  3. Send a test message

    • Type: "What are your business hours?"
    • Press Enter

  4. Watch the magic!

    • The assistant answers within a few seconds

  5. Check the conversation in TAIBLES

    • Open "History" in the sidebar
    • Your test conversation is there, ready to review

💡 🎉 You Did It!

Congratulations! Your assistant is live on your website.

Customers can now chat with it 24/7, and every conversation is kept for you to review.

3.2.9: Troubleshooting ​

The chat bubble doesn't appear on my website

✅ Check these:

  • Did you paste the snippet before </body>?
  • Did you save and publish the changes to your website?
  • Did you clear your browser cache? (Hard refresh: Ctrl+Shift+R or Cmd+Shift+R)
  • Check the browser console for JavaScript errors (F12 → Console tab)

The widget appears but never answers

✅ Check these:

  • Is the token still "Active" in the embed dialog?
  • Did you paste the whole snippet, including the token value?
  • Was the token regenerated after you copied the snippet? If so, copy the snippet again.

Responses are too slow

✅ Ways to speed up:

  • Use a faster model in the assistant's configuration
  • Shorten the assistant's instructions
  • Trim the knowledge it searches so there is less to read

💡 💡 Pro Tip: A Token Per Site

Give each website its own token, named after the site. If you ever need to cut one off—a staging site, an old landing page—you disable that token and nothing else changes.

3.2.10: What You Learned ​

Let's celebrate what you just accomplished! 🎉

You now have:

  • ✅ A live chat widget on your website
  • ✅ An embed token you control, and can disable at any time
  • ✅ A widget styled to match your brand
  • ✅ Conversation history you can review
  • ✅ 24/7 customer support without manual work

The pattern you mastered:

Assistant → Embed token → Snippet on your site → Visitors talking to your agent

This same assistant can also reach people through:

  • WhatsApp (next section!)
  • Email support (Section 3.4)
  • The API, for anything else you build

3.2.11: Making It Even Better ​

Ready to level up? Try these enhancements:

Improve Responses:

  • Add more knowledge documents
  • Sharpen the assistant's instructions with real questions customers asked
  • Give the assistant tools so it can look up orders, track shipments, and more

Set Expectations:

  • Write a welcome message that says what the assistant can help with
  • Add a disclaimer so visitors know they're talking to AI

Human Handoff:

  • Tell the assistant to collect an email address when it can't help
  • Route those conversations to your support team

💡 🚀 Next Steps

You're on fire! Your agent can now talk to website visitors.

Want to reach customers where they already are?

Next up: WhatsApp Integration - Let customers message you on WhatsApp and get instant AI responses!

Previous: 3.1 Understanding ConnectionsNext: 3.3 WhatsApp Integration

Built with VitePress

Copyright © 2025 UNIKI GmbH