Official Documentation Under 15 Minutes Setup Zero-Code Deployment Platform Version 2.0

ClariBot Platform User Guide

A comprehensive technical reference and practical walkthrough for building, training, styling, and integrating intelligent ClariBot AI agents across any website or framework.

What is ClariBot?

Architectural foundation and business capabilities

ClariBot is an autonomous AI customer-engagement platform engineered to ingest your private business corpus — including web pages, PDF handbooks, Word manuals, and customer support databases — to deliver immediate, accurate, and 24/7 conversational assistance directly on your digital storefronts.

Core Concept: Think of ClariBot as a dedicated support engineer who has thoroughly memorized every document, warranty rule, pricing table, and product specification you publish — responding instantaneously to customer queries without downtime or human delay.

Business Objective	ClariBot Implementation
24/7 Customer Coverage	Automated AI response engine operating around the clock with zero latency.
Code-Free Implementation	Visual dashboard configuration with single-tag script embedding.
Domain-Specific Precision	Strict retrieval-augmented generation grounded solely in your uploaded materials.
Brand Aesthetics Alignment	Custom hex color matching, custom avatar shapes, typography, and positioning.
Universal Framework Support	Native drop-in support for HTML, React, Next.js, Vue, Nuxt, Angular, WordPress, and more.
Operational Intelligence	Full conversation transcripts, sentiment inspection, and Excel data export.

Workflow at a Glance

The 7-step sequence to build and deploy your chatbot

Follow these seven steps sequentially to configure, train, and launch your customized AI widget on any website:

Step 1: Exploring the Home Page

Understanding platform capabilities prior to registration

Visiting https://claribot.ai loads the marketing and product introduction portal. Here you can inspect live product demonstrations, review framework support, and explore pricing options before creating an account.

claribot.ai — Home Page

Expand

Figure 1.1ClariBot marketing portal with top navigation, value proposition, and call-to-action triggers.

1.1

Navigation Bar & Header Actions

Navigation Item	Functionality
Platform	Smooth-scrolls to the architectural overview detailing the AI retrieval pipeline.
Features	Highlights core capabilities: custom documents, multi-site isolation, color stylers.
Integration	Displays code snippet examples demonstrating universal embed compatibility.
Pricing	Routes to the detailed pricing comparison page (`/pricing.html`).
Start Building	Primary entry action — redirects directly to the authentication portal.

1.2

Hero Section & Interactive Video Demo

The hero section contains the core headline, platform value statement, and an embedded demo player showcasing real-time conversations. Two primary buttons are available:

Try it for Free: Direct shortcut to new user registration.
View Features: Scrolls downward to explore feature breakdowns.

1.3

Features & Platform Capabilities

Further down the page, modular feature cards explain the document parsing capabilities (PDF, Word, Markdown, URL crawlers) and demonstrate how the widget fits natively into any site design.

1.4

Action Step: Proceeding to Account Setup

Next Action: Click either Start Building or Try it for Free. Plan selection is performed securely inside your authenticated workspace — you do not need to choose a plan up front.

Step 2: Creating Your Account & Authentication

Registration, password security, OTP verification, and session login

2.1

Sign Up (New Users)

signup_page.png — Create Account

Expand

Figure 2.1Registration panel with email input, password strength validation, and terms agreement.

1

Enter a Valid Business Email
ClariBot sends your 6-digit confirmation code here.
2
Fulfill Password Complexity Criteria
- Minimum 8 characters
- At least 1 uppercase letter (A–Z)
- At least 1 lowercase letter (a–z)
- At least 1 numeric digit (0–9)
- At least 1 special character (@, $, !, %, *, ?)
3

Accept Terms of Service
Check the consent box to agree to the platform Terms of Service and Privacy Policy.
4

Submit Registration
Click Create Account to complete registration and receive a verification token.

2.2

Email Verification (OTP)

Verification Procedure: Open your email client, copy the 6-digit code, paste it into the Enter OTP input, and click Verify OTP. If you don't see the message within 60 seconds, check spam or click Resend OTP.

2.3

Sign In (Returning Users)

signin_page.png — Sign In

Expand

Figure 2.2Sign-in view with email, password fields, and password recovery trigger.

Enter your registered email address.
Enter your password.
Click Sign In to open your active workspace.

2.4

Password Recovery

reset_password.png — Reset Password

Expand

Figure 2.3Self-service password recovery interface.

Step 3: Choosing a Plan & Billing

Subscription tiers, Free activation, and PayPal checkout

3.1

Plan Comparison & Tier Specifications

Starter Free

$0 / month

Evaluation & pilot deployment

150 monthly messages
1 authorized website domain
Full document & URL ingestion
Complete styling customization

Select Free

Recommended

Professional

$19.99 / month

Scaling businesses & agencies

High monthly message quota
Multi-domain authorization
White-label branding removal
Full conversation logs & Excel export
Priority support channel

Upgrade via PayPal

Enterprise

Custom

Dedicated infrastructure & SLAs

Unlimited monthly messages
Unlimited client domains
Direct REST API & Webhook access
Dedicated technical account manager

Contact Sales

3.2

Activating the Free Plan

freeplan_activation.png — Free Plan Confirmed

Expand

Figure 3.2Workspace confirmation showing active Free Tier status.

Click Start Free on the Starter card.
Status badge updates to Active Plan: Free Plan.
Click the orange Next → button to proceed to Appearance.

3.3

Upgrading to Pro via PayPal

proplan_activation.png — PayPal Checkout

Expand

Figure 3.3Encrypted PayPal transaction overlay supporting PayPal balances and credit/debit cards.

Click Upgrade on the Professional Plan card.
Sign in with PayPal or click Pay with Debit or Credit Card.
Upon transaction approval, the workspace upgrades immediately.

3.4

Enterprise Custom Arrangements

For custom security reviews, isolated cloud instances, or dedicated volume contracts, select Contact Sales or email support@claribot.ai.

Step 4: Customizing Chatbot Appearance

Brand identity, hex palette styling, greeting templates, and widget positioning

Appearance.png — Appearance Customizer

Expand

Figure 4.1Visual customization controls with real-time synchronized widget preview.

4.1

Company Identity & Logo Assets

Company Name: Official name (max 100 characters).
Logo Asset: Upload a square or transparent PNG/SVG asset.
Logo Size Slider: Adjust scale between 50% and 150%.
Avatar Geometry: Select circular (border-radius: 50%) or square framing.

4.2

Color Palette & Typography Tokens

Style Token	Interface Area Impacted
Header Background	Top bar color of the widget window.
Header Text	Font color for title in the top bar.
Chat Body	Canvas background of the conversation thread.
Bot Bubble	Background fill for ClariBot messages.
Bot Text	Typography color inside bot message bubbles.
User Bubble	Background fill for visitor messages.
User Text	Typography color inside visitor message bubbles.
Launcher Button	Floating launcher in the corner of your page.

4.3

Welcome Message & Suggestion Buttons

Sugestion_button.png — Suggestion Buttons

Expand

Figure 4.2Configuring comma-separated suggestion pills for instant visitor engagement.

Enter suggestion prompts as comma-separated values: Pricing Plans, Book a Demo, Return Policy, Technical Support.

4.4

Bot Persona & Viewport Positioning

Bot Display Name: Name shown in the chat window header (e.g. Aria Support).
Widget Position: Bottom-Right (standard) or Bottom-Left.

Important: Always click Save and Proceed → at the bottom of the Appearance tab. Unsaved changes will be discarded upon tab switching.

Step 5: Training Your AI Chatbot

Ingesting website URLs, uploading documents, and running the embedding model

document upload section.png — Knowledge Base

Expand

Figure 5.1Knowledge Base panel with URL inputs, document drag-and-drop zone, and training controls.

5.1

Training with Website URLs

Under Company URLs, enter your root domain: https://www.mycompany.com
Press Enter to add more URL inputs.
Add specific sub-pages (e.g. /pricing, /services, /faq).
Click the delete icon (×) to remove any URL before training.

5.2

Training with Documents & Files

Format	Extensions	Recommended Material
PDF	`.pdf`	Product whitepapers, catalogs, user manuals, policy handbooks.
Microsoft Word	`.doc`, `.docx`	SOP documents, team instructions, internal FAQs.
Presentations	`.ppt`, `.pptx`	Feature decks, onboarding slides, company overviews.
Markdown	`.md`	Developer documentation, changelogs, API references.

File Constraints: Files must not exceed 10 MB each. For large handbooks, divide documents by section before uploading.

5.3

Running the Training Process

Click Train Bot & Sync Data.
Keep the browser tab open — processing typically completes within 30 to 120 seconds.
Confirm the green notification: Bot trained successfully!

5.4

Managing Existing Knowledge Sources

Indexed sources appear in the Existing Uploaded Documents table. To remove outdated material, click delete next to the source, then click Train Bot & Sync Data to re-sync. Live embed code does not need to be modified.

Step 6: Deploying to Your Website

Domain authorization, embed script generation, and multi-framework integration

domain&widget_script.png — Deployment Panel

Expand

Figure 6.1Domain authorization input, update confirmation, and copyable script snippet output.

6.1

Setting Your Allowed Domain

Locate the Allowed Domain input field.
Enter your full origin URL including protocol:
- Production: https://www.mycompany.com
- Local dev: http://localhost:3000
Click Update Domain.

6.2

Generating Your Embed Code

Click Generate Embed Code. Your unique company identifier is compiled into the snippet:

HTML — Official Embed Tag

<script
  src="https://api.claribot.ai/Static/chatbot.js"
  data-company-id="YOUR_UNIQUE_COMPANY_ID">
</script>

6.3

Platform Installation Guides

Standard HTML5 / PHP Integration

Paste the snippet directly before the closing </body> tag in your primary template:

HTML

<!DOCTYPE html>
<html lang="en">
<body>
  <main><h1>Welcome</h1></main>

  <!-- ClariBot: Before closing body tag -->
  <script
    src="https://api.claribot.ai/Static/chatbot.js"
    data-company-id="YOUR_UNIQUE_COMPANY_ID">
  </script>
</body>
</html>

React.js (Vite & Create React App)

Method A: In Root HTML (Recommended)

HTML (index.html)

<body>
  <div id="root"></div>
  <script
    src="https://api.claribot.ai/Static/chatbot.js"
    data-company-id="YOUR_UNIQUE_COMPANY_ID">
  </script>
</body>

Method B: Custom React Hook Component

JSX (ClaribotWidget.jsx)

import { useEffect } from 'react';

export default function ClaribotWidget() {
  useEffect(() => {
    if (document.querySelector('script[data-company-id]')) return;
    const script = document.createElement('script');
    script.src = 'https://api.claribot.ai/Static/chatbot.js';
    script.setAttribute('data-company-id', 'YOUR_UNIQUE_COMPANY_ID');
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.querySelector('script[data-company-id]')?.remove();
    };
  }, []);
  return null;
}

Next.js (App Router 13+)

TSX (app/layout.tsx)

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://api.claribot.ai/Static/chatbot.js"
          data-company-id="YOUR_UNIQUE_COMPANY_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Vue 3 & Nuxt 3

TypeScript (nuxt.config.ts)

export default defineNuxtConfig({
  app: {
    head: {
      script: [{
        src: 'https://api.claribot.ai/Static/chatbot.js',
        'data-company-id': 'YOUR_UNIQUE_COMPANY_ID',
        defer: true
      }]
    }
  }
});

Angular Application

HTML (src/index.html)

<body>
  <app-root></app-root>
  <script
    src="https://api.claribot.ai/Static/chatbot.js"
    data-company-id="YOUR_UNIQUE_COMPANY_ID">
  </script>
</body>

Svelte & SvelteKit

HTML (src/app.html)

<body data-sveltekit-preload-data="hover">
  <div style="display: contents">%sveltekit.body%</div>
  <script
    src="https://api.claribot.ai/Static/chatbot.js"
    data-company-id="YOUR_UNIQUE_COMPANY_ID">
  </script>
</body>

WordPress (Zero-Code Plugin)

Navigate to Plugins → Add New.
Install and activate WPCode (Insert Headers and Footers).
Navigate to Code Snippets → Header & Footer.
Scroll to the Footer input and paste your ClariBot script tag.
Click Save Changes and purge your site cache.

Shopify Store

In Shopify Admin, go to Online Store → Themes.
Click ... next to your active theme → Edit Code.
Under layout/, open theme.liquid.
Locate the closing </body> and paste your script before it.
Click Save.

Wix, Squarespace & Webflow

Wix

Go to Settings → Custom Code → + Add Custom Code. Paste the script, select All Pages → Load once, place in Body - end, and click Apply.

Webflow

Open Project Settings → Custom Code. In the Footer Code section, paste the script and click Save & Publish.

Google Tag Manager

In GTM, click Tags → New.
Choose Custom HTML Tag.
Paste your complete <script> embed snippet.
Under Triggering, select All Pages (Page View).
Name it ClariBot Widget and click Save → Submit → Publish.

6.4

Quick Reference Deployment Matrix

Framework	Target File	Insertion Point
HTML / PHP	`index.html`	Before `</body>`
React (Vite)	`index.html`	After `<div id="root">`
Next.js App Router	`app/layout.tsx`	`<Script strategy="lazyOnload">`
Nuxt 3	`nuxt.config.ts`	`app.head.script` array
Angular	`src/index.html`	After `<app-root>`
SvelteKit	`src/app.html`	After `%sveltekit.body%`
WordPress	WPCode Plugin	Footer Scripts box
Shopify	`theme.liquid`	Before `</body>`
Wix / Webflow	Site Settings → Custom Code	Body End
Google Tag Manager	Custom HTML Tag	Trigger: All Pages

Step 7: Managing Your Workspace

Consumption analytics, chat transcript inspection, and multi-tenant management

user_section.png — Profile & Usage Menu

Expand

Figure 7.1User administrative dropdown with active subscription tier and quota counters.

7.1

Checking Message Usage & Monthly Quotas

Total Messages: Your monthly allowance based on subscription tier.
Consumed Messages: Inquiries answered during current billing cycle.
Remaining Messages: Available capacity before throttling applies.
Quota Reset: Resets automatically on the first day of your billing period.

7.2

Chat History & Excel Data Export

Available on Professional and Enterprise tiers.

chat_history.png — Conversation Transcripts

Expand

Figure 7.2Historical session logs with visitor queries, bot replies, timestamps, and Excel export.

Click Chat History to expand any session. Click Download to export as .xlsx.

7.3

Multi-Account Switching & Session Termination

Add Another Account: Allows agency administrators to switch email accounts without clearing browser storage.
Logout: Terminates the active session and redirects to sign-in. Cloud configurations remain preserved.

Troubleshooting & FAQ

Diagnostic resolutions for common integration and runtime scenarios

The chatbot launcher button is not appearing on my website

Verify the following checklist:

Origin URL Authorization: Verify your exact domain (including https://) is saved in the Allowed Domain input.
Localhost Testing: Authorize http://localhost:3000 or your respective local port.
Script Placement: Ensure the tag is before </body> and hasn't been modified.
Browser Cache: Hard refresh with Ctrl+F5 or Cmd+Shift+R.

How do I update the bot's knowledge when company policies change?

Navigate to the Knowledge Tab, remove outdated documents, upload updated files or URLs, and click Train Bot & Sync Data. The live AI updates immediately — your embed code does not need to be re-deployed.

Can I alter widget colors and fonts after going live?

Yes. Visual modifications in the Appearance tab take effect immediately upon clicking Save and Proceed. The live widget fetches real-time styling on load without requiring script changes.

What happens if my account reaches its monthly message quota?

The chatbot politely notifies visitors that monthly capacity has been met. Administrators can upgrade to the Professional tier from the Plans tab to restore service immediately.

Is customer data and conversation history secure?

All network traffic is encrypted end-to-end via TLS 1.3. Uploaded documents are converted into high-dimensional vector embeddings and are never shared with public third-party models or external training sets.

Technical Support

Need Assistance with Deployment?

Our engineering and integration specialists are available to assist with custom web architectures, automated ingestion pipelines, and enterprise configurations.

Channel	Contact	SLA Response
Technical Support	`support@claribot.ai`	Within 1 business day
Enterprise Sales	`support@claribot.ai`	Within 4 business hours
Security & Compliance	`support@claribot.ai`	Available upon request

Email Engineering Support Open Admin Workspace

ClariBot Platform User Guide

What is ClariBot?

Workflow at a Glance

Step 1: Exploring the Home Page

Navigation Bar & Header Actions

Hero Section & Interactive Video Demo

Features & Platform Capabilities

Action Step: Proceeding to Account Setup

Step 2: Creating Your Account & Authentication

Sign Up (New Users)

Enter a Valid Business Email

Fulfill Password Complexity Criteria

Accept Terms of Service

Submit Registration

Email Verification (OTP)

Sign In (Returning Users)

Password Recovery

Step 3: Choosing a Plan & Billing

Plan Comparison & Tier Specifications

Activating the Free Plan

Upgrading to Pro via PayPal

Enterprise Custom Arrangements

Step 4: Customizing Chatbot Appearance

Company Identity & Logo Assets

Color Palette & Typography Tokens

Welcome Message & Suggestion Buttons

Bot Persona & Viewport Positioning

Step 5: Training Your AI Chatbot

Training with Website URLs

Training with Documents & Files

Running the Training Process

Managing Existing Knowledge Sources

Step 6: Deploying to Your Website

Setting Your Allowed Domain

Generating Your Embed Code

Platform Installation Guides

Standard HTML5 / PHP Integration

React.js (Vite & Create React App)

Method A: In Root HTML (Recommended)

Method B: Custom React Hook Component

Next.js (App Router 13+)

Vue 3 & Nuxt 3

Angular Application

Svelte & SvelteKit

WordPress (Zero-Code Plugin)

Shopify Store

Wix, Squarespace & Webflow

Wix

Webflow

Google Tag Manager

Quick Reference Deployment Matrix

Step 7: Managing Your Workspace

Checking Message Usage & Monthly Quotas

Chat History & Excel Data Export

Multi-Account Switching & Session Termination

Troubleshooting & FAQ

Need Assistance with Deployment?