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 AI agent
Creates a conversation row in your taible automatically
Sends the AI response back to the customer

No coding required. Just follow along!

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:

They visit your website and see a chat bubble
They click it and type their question
They get an instant, helpful answer
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)

Before we dive into setup, let's understand the flow:

Your Website

Welcome to our site!

Chat

What are your business hours?

Your Taible (Auto-Updated!)

Customer Question

AI Answer

Status

How do I track my order?

You can track your order...

Complete

What are your business hours? ✨

AI is thinking...

Processing

New row created automatically! AI will respond in seconds.

Watch the magic: Customer sends message → Row appears → AI responds → Customer gets answer

All automatic. Zero manual work. ✨

The magic sequence:

Customer types in chat widget → "What are your business hours?"
Widget sends message to webhook → Data travels to your taible
New row created automatically → With the customer's question
Your AI columns process it → Search knowledge, generate response
Response sent back through webhook → To the chat widget
Customer sees answer → All within seconds!

💡 💡 Two-Way Communication

This is different from a contact form! Contact forms are one-way: customer sends, you reply later.

Chat widgets are two-way: customer sends, AI responds immediately in the same conversation.

This requires:

Incoming connection (webhook that creates rows)
Outgoing column (sends responses back)

We'll set up both!

3.2.3: Prerequisites

Before you begin, make sure you have:

✅ A chatbot taible with:

Customer message column (text input)
AI response column (configured to answer questions)

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

✅ Knowledge base (optional but recommended)

Upload your FAQ, policies, or product info
See Section 2.2: Adding Knowledge

✅ 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 - Set Up Incoming Messages (Webhook Trigger)

First, we need to tell your taible: "When someone sends a chat message, create a new row automatically."

We do this with a webhook trigger.

What's a Webhook?

💡 Simple Explanation

A webhook is like a phone number for your taible.

When someone sends a message through the chat widget, the widget "calls" this webhook (sends data to a URL), and your taible creates a new row with that message.

Think of it like:

Your phone number = Webhook URL
Someone calls you = Chat message arrives
Your phone rings = New row created

Adding the Webhook Trigger

Here's how:

Open your chatbot taible
Click "Add Trigger" button in the toolbar
- Look for it near the top, next to "Add Column"
Choose "Webhook" trigger
- Browse categories or search for "webhook"
- Click on "Webhook Trigger"
Configure the trigger:

Configure Webhook Trigger

Webhook

Trigger Name

A descriptive name to identify this trigger

Webhook Label

Unique identifier for this webhook endpoint

Your Webhook URL

https://app.uniki.ai/api/v1/receive/your-org/webhook/website-chat

Copy this URL and paste it in your chat widget configuration

Which column should receive the incoming message?

How it works

1. Customer sends a message via chat widget
2. Widget sends data to this webhook URL
3. New row is created automatically in your taible
4. Message appears in "Customer Question" column
5. Your AI columns process the message automatically

Fill in these fields:

Trigger Name: Website Chat Incoming
- This is just a label for you to identify it later
Webhook Label: website-chat
- This creates your unique webhook URL
- Use lowercase, no spaces (hyphens are okay)
Save message to column: Choose your "Customer Question" column
- This is where incoming messages will appear

Copy your webhook URL
- You'll see something like: https://app.uniki.ai/api/v1/receive/your-org/webhook/website-chat
- Click the copy button
- Save this URL - you'll need it in Step 3!
Click "Add Trigger"

💡 🎉 What You Just Did

You created a webhook that's now listening 24/7 for incoming messages!

Whenever the chat widget sends data to this URL, a new row magically appears in your taible with the customer's message.

3.2.5: Step 2 - Set Up Outgoing Responses (Output Column)

Now your taible can receive messages. But we also need to send responses back!

Think of it this way:

✅ Incoming trigger = Receive messages (done!)
⏳ Outgoing column = Send responses (let's do this now)

Adding the Output Column

Here's how:

Click "+ Add Column" in your taible
Choose column type:
- Look for the "Communication" or "Integrations" category
- Select "Webhook Response" or "Send to Webhook" column type
- (The exact name may vary, but look for webhook output)
Configure the output:

Configure Output Column

Webhook Response

Column Name

Technical identifier (lowercase, no spaces)

Column Label

Display name shown in your taible

Which column's value should be sent to the website?

Webhook Label

Must match the webhook label from your incoming trigger

Wait for these columns first

customer_message

ai_response

This ensures the AI response is ready before sending to the website

How responses are sent

1. AI generates response in "AI Answer" column
2. This column waits for AI to finish
3. Takes the AI response text
4. Sends it back through the webhook
5. Chat widget displays the response to the customer

Fill in these fields:

Column Name: send_to_website
- Technical identifier
Column Label: Send to Website
- Display name you'll see
Send data from column: Choose "AI Answer"
- This is the AI response you want to send back
Webhook Label: website-chat
- Must match the webhook label from Step 1!
Wait for these columns first:
- Check "Customer Question" ✓
- Check "AI Answer" ✓
- This ensures the AI finishes before sending the response

Click "Add Column"

💡 💡 How Responses Work

The flow:

Customer message arrives → Row created
AI Answer column generates response
"Send to Website" column waits for AI to finish
Takes the AI response text
Sends it back through the webhook
Chat widget displays it to the customer

All automatic! The columns work together like a well-oiled machine.

Now comes the fun part - putting the chat bubble on your website!

Getting the Embed Code

Your chat widget needs two things:

The widget JavaScript (handles the chat UI)
Your webhook URL (so it knows where to send messages)

Embed Code

Copy this code and paste it just before the </body> tag on your website:

<script src="https://cdn.uniki.ai/chat-widget.js"></script>
<script>
  UnikiChat.init({
    webhook: 'website-chat',
    org: 'your-org-id'
  });
</script>

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

What this code does:

Loads the chat widget library
Initializes it with your webhook details
Adds the chat bubble to your website

Where to Put the Code

Option 1: You can access your website code

Open your website's HTML file(s)
Find the </body> tag (usually near the bottom)
Paste the embed code just before </body>
Save the file

Example:

html

    <!-- Your website content -->

    <!-- Chat widget code goes here -->
    <script src="https://cdn.uniki.ai/chat-widget.js"></script>
    <script>
      UnikiChat.init({
        webhook: 'website-chat',
        org: 'your-org-id'
      });
    </script>
  </body>
</html>

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

Most website builders have a section for "Custom Code" or "Footer Scripts":

Go to your website builder's settings
Look for "Custom Code," "Scripts," or "Footer"
Paste the embed code there
Save and publish

Option 3: Send to your developer

If you have a web developer or technical person:

Copy the embed code
Email it to them 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."

💡 Important Note

Replace your-org-id in the code with your actual organization ID from the webhook URL you copied in Step 1.

If your webhook URL is: https://app.uniki.ai/api/v1/receive/my-company-123/webhook/website-chat

Then my-company-123 is your org ID.

3.2.7: Step 4 - Test It Live!

Time to see your creation in action! 🎉

Visit your website
- Open a browser and go to your site
- You should see a chat bubble in the corner!
Click the chat bubble
- The chat window opens
Send a test message
- Type: "What are your business hours?"
- Press Enter
Watch the magic!
- The message appears in the chat
- After a few seconds, the AI responds
- The response shows up in the chat window
Check your taible
- Go back to your chatbot taible
- You'll see a new row with:
  - Customer Question: "What are your business hours?"
  - AI Answer: (the response)
  - Status: Complete ✓

Your Website

Welcome to our site!

Chat

What are your business hours?

Your Taible (Auto-Updated!)

Customer Question

AI Answer

Status

How do I track my order?

You can track your order...

Complete

What are your business hours? ✨

AI is thinking...

Processing

New row created automatically! AI will respond in seconds.

Watch the magic: Customer sends message → Row appears → AI responds → Customer gets answer

All automatic. Zero manual work. ✨

💡 🎉 You Did It!

Congratulations! You just created a fully automated customer support system!

Customers can now chat with your AI agent 24/7, and every conversation is saved in your taible for you to review.

Want to make the chat widget match your brand? Let's customize it!

Customize Your Chat Widget

Widget Settings

Widget Color

Welcome Message

Live Preview

Hi! How can I help you today?

Your website preview

You can customize:

Colors and Branding

Widget color: Match your brand colors
Text color: Ensure readability
Header text: Change "Chat with us" to your company name

Position

Bottom right: Most common (default)
Bottom left: Alternative placement
Top corners: For specific designs

Welcome Message

Default: "Hi! How can I help you today?"
Custom examples:
- "Hey there! Need help? I'm here 24/7!"
- "Welcome to [Company]! Ask me anything."
- "Looking for product info? I've got answers!"

Behavior

Auto-open: Widget opens automatically after X seconds
Greeting delay: How long to wait before showing greeting
Mobile visibility: Show/hide on mobile devices

💡 How to Customize

The customization options depend on which chat widget library you're using:

Uniki's built-in widget: Check the widget settings in your account
Third-party widget: Configure in the embed code (see widget documentation)
Custom widget: Modify the JavaScript configuration

Most options can be added to the UnikiChat.init() configuration object.

3.2.9: Troubleshooting

"The chat bubble doesn't appear on my website"

✅ Check these:

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

"Messages aren't creating rows in my taible"

✅ Check these:

Is the webhook trigger enabled? (Check "Add Trigger" → Manage Triggers)
Does the webhook label match in both the trigger AND the embed code?
Did you replace your-org-id with your actual organization ID?
Test the webhook URL directly (see reference docs for testing)

"AI responses aren't showing in the chat"

✅ Check these:

Is the "Send to Website" column configured correctly?
Does it have the right dependencies (Customer Question, AI Answer)?
Is the webhook label identical to the incoming trigger?
Check that the AI Answer column completes successfully

"Responses are too slow"

✅ Ways to speed up:

Use a faster AI model (GPT-3.5 is faster than GPT-4)
Optimize your AI instructions (shorter = faster)
Reduce knowledge base size (fewer documents to search)
Add caching for common questions

💡 💡 Pro Tip: Test Mode

While testing, add a filter to your taible: "Customer Question contains 'test'"

This way your test messages are easy to find and won't clutter your real customer conversations!

3.2.10: What You Learned

Let's celebrate what you just accomplished! 🎉

You now have:

✅ Live chat widget on your website
✅ Automatic row creation for every message
✅ AI responses sent back in real-time
✅ Complete conversation history in your taible
✅ 24/7 customer support without manual work

The skills you learned:

Setting up webhook triggers (incoming data)
Configuring output columns (outgoing data)
Embedding widgets on websites
Two-way communication flows
Testing and troubleshooting integrations

The pattern you mastered:

External Event → Trigger Creates Row → Columns Process → Response Sent Back

This same pattern works for:

WhatsApp messages (next section!)
Email support (Section 3.4)
Form submissions
Slack messages
Any external system!

3.2.11: Making It Even Better

Ready to level up your chat widget? Try these enhancements:

Add Customer Context:

Capture customer name and email
Show order history (if they're logged in)
Personalize responses based on customer data

Improve Responses:

Add more knowledge documents
Train with real conversation examples
Add tools so AI can look up orders, track shipments, etc.

Human Handoff:

Add a "Talk to human" button
Route complex issues to support team
Set up notifications for urgent messages

Analytics:

Track most common questions
Measure response times
Monitor customer satisfaction

Multi-Language:

Detect customer language
Respond in their language
Translate conversations automatically

💡 🚀 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

3.2: Website Chatbot Widget ​

3.2.1: What You'll Build ​

Your Awesome Website

💡 The Customer Experience

3.2.2: How It Works (The Big Picture) ​

Your Website

Your Website

Your Taible (Auto-Updated!)

💡 💡 Two-Way Communication

3.2.3: Prerequisites ​

3.2.4: Step 1 - Set Up Incoming Messages (Webhook Trigger) ​

What's a Webhook? ​

💡 Simple Explanation

Adding the Webhook Trigger ​

Configure Webhook Trigger

How it works

💡 🎉 What You Just Did

3.2.5: Step 2 - Set Up Outgoing Responses (Output Column) ​

Adding the Output Column ​

Configure Output Column

How responses are sent

💡 💡 How Responses Work

3.2.6: Step 3 - Add the Widget to Your Website ​

Getting the Embed Code ​

Embed Code

Where to Put the Code ​

💡 Important Note

3.2.7: Step 4 - Test It Live! ​

Testing Your Chat Widget ​

Your Website

Your Website

Your Taible (Auto-Updated!)

💡 🎉 You Did It!

3.2.8: Customizing Your Widget ​

Customize Your Chat Widget

Widget Settings

Live Preview

Colors and Branding ​

Position ​

Welcome Message ​

Behavior ​

💡 How to Customize

3.2.9: Troubleshooting ​

💡 💡 Pro Tip: Test Mode

3.2.10: What You Learned ​

3.2.11: Making It Even Better ​

💡 🚀 Next Steps

3.2: Website Chatbot Widget

3.2.1: What You'll Build

3.2.2: How It Works (The Big Picture)

3.2.3: Prerequisites

3.2.4: Step 1 - Set Up Incoming Messages (Webhook Trigger)

What's a Webhook?

Adding the Webhook Trigger

3.2.5: Step 2 - Set Up Outgoing Responses (Output Column)

Adding the Output Column

3.2.6: Step 3 - Add the Widget to Your Website

Getting the Embed Code

Where to Put the Code

3.2.7: Step 4 - Test It Live!

Testing Your Chat Widget

3.2.8: Customizing Your Widget

Colors and Branding

Position

Welcome Message

Behavior

3.2.9: Troubleshooting

3.2.10: What You Learned

3.2.11: Making It Even Better