Tailore Client Guide

Complete documentation for setting up and managing your Tailore chatbot. Learn how to embed the widget, configure settings, and leverage all features to provide exceptional customer support.

📘 What's in this guide?

This guide covers everything from basic widget installation to advanced dashboard embedding. Whether you're a developer or a business owner, you'll find clear instructions for every feature.

Quick Start

Get your chatbot up and running in under 5 minutes with these simple steps:

Get Your Embed Code

Log into your dashboard and copy the embed code from the "Widget Embed Code" section.

Add to Your Website

Paste the embed code just before the closing </body> tag on every page where you want the chatbot to appear.

Customize (Optional)

Visit Chatbot Settings to customize colors, messages, and behavior to match your brand.

Subscription Tiers

Tailore offers three subscription tiers designed to grow with your business:

Feature Starter Professional Business
Monthly Price €29 €69 €149
FAQ Mode ✅ ✅ ✅
AI Mode ✅ ✅ ✅
Free AI Credits $5 $10 $50
Analytics Dashboard ✅ ✅ ✅
Custom Branding ✅ ✅ ✅
Live Chat Agents ❌ ✅ (3 seats) ✅ (Unlimited)
Own OpenAI API Key ❌ ✅ ✅

Embedding the Chatbot Widget

The Tailore chatbot widget is a lightweight JavaScript component that adds a chat bubble to your website. Here's how to install it:

Important Notice

This chatbot was generated from public data on your website. For maximum accuracy, we recommend customizing settings, adding files, or editing content in Chatbot Settings.

Basic Installation

Copy and paste this code just before the closing </body> tag:

<!-- Tailore Chatbot Widget -->
<script>
  window.TailoreConfig = {
    botId: "YOUR_BOT_ID",
    apiBase: "https://your-tailore-domain.com"
  };
</script>
<script src="https://your-tailore-domain.com/widget/tailore-widget.js" async></script>
⚠️ Important

Replace YOUR_BOT_ID with your actual bot ID from the dashboard. The exact embed code is available in your dashboard under "Widget Embed Code".

Where to Place the Code

Widget Configuration Options

Customize the widget behavior directly in the embed code:

window.TailoreConfig = {
  // Required
  botId: "YOUR_BOT_ID",
  apiBase: "https://your-tailore-domain.com",

  // Appearance
  theme: "dark",              // "dark" or "light"
  position: "bottom-right",   // "bottom-right" or "bottom-left"
  positionX: 20,              // Horizontal offset in pixels
  positionY: 20,              // Vertical offset in pixels
  primaryColor: "#6366f1",    // Main accent color
  secondaryColor: "#8b5cf6",  // Gradient color
  bubbleSize: 60,             // Chat bubble size (px)

  // Features
  enableAI: true,             // Show AI mode toggle
  defaultMode: "faq",         // Starting mode: "faq" or "ai"
  enableLiveChat: true,       // Show "Talk to Human" button

  // Custom Text
  headerTitle: "Support",     // Chat window title
  welcomeMessage: "Hi! How can I help?",
  
  // Language
  language: "auto"            // "auto" or ISO code like "en", "es", "de"
};

Configuration Options Reference

Option Type Default Description
botIdstring—Your unique bot identifier (required)
themestring"dark"Color theme: "dark" or "light"
positionstring"bottom-right"Widget position on screen
positionXnumber20Horizontal offset from edge (px)
positionYnumber20Vertical offset from edge (px)
primaryColorstring"#6366f1"Primary brand color
bubbleSizenumber60Chat bubble diameter (px)
enableAIbooleantrueShow AI mode toggle
defaultModestring"faq"Initial chat mode
languagestring"auto"Language code or "auto" for detection

Widget Customization

Beyond the embed code, you can customize your chatbot's appearance and behavior in the dashboard:

🎨 Colors & Theme

Set primary/secondary colors, choose light or dark theme to match your site.

💬 Messages

Customize welcome message, header title, subtitle, and placeholder text.

📍 Position

Place the widget in any corner with custom offset values.

❓ Suggested Questions

Pre-populate frequently asked questions for quick user access.

Accessing Your Dashboard

Your Tailore dashboard is your central hub for managing everything about your chatbot.

Login Methods

  1. Direct URL: Visit /app on your Tailore domain
  2. Production Token: Your dashboard authenticates using your production token (stored in browser)

Dashboard Sections

📊 Overview

See your subscription tier, credit balance, and quick stats at a glance.

⚙️ Chatbot Settings

Customize appearance, messages, AI prompts, and feature toggles.

📈 Analytics

View conversation stats, popular questions, and response quality metrics.

💬 Live Agent

Manage live chat agents and handle customer conversations in real-time.

Chatbot Settings

The Settings page allows you to fully customize your chatbot's behavior and appearance.

Appearance Settings

Content Settings

Feature Toggles

AI Configuration

Analytics Dashboard

Track your chatbot's performance with comprehensive analytics.

Available Metrics

Using Analytics Data

Live Chat Feature

Allow customers to connect with human agents when AI isn't enough.

⚡ Professional & Business Only

Live chat is available on Professional (3 agents) and Business (unlimited agents) tiers. Upgrade your plan to unlock this feature.

Setting Up Live Chat

Register Agents

In your dashboard, go to "Live Chat Agents" and click "Register New Agent". Enter the agent's name, email, and password.

Agent Login

Agents access the live chat dashboard at /livechat using their credentials.

Go Available

Agents toggle "Available for chats" to start receiving customer requests.

Handle Chats

When customers click "Talk to Human", available agents see the request and can join the conversation.

Agent Seat Limits

Tier Agent Seats
StarterNot available
Professional3 agents
BusinessUnlimited

Embedding Dashboards in Your Site

You can embed Tailore dashboards directly into your own admin panel or internal tools using secure access tokens.

Available Embeddable Dashboards

How to Embed

Create Access Token

In your dashboard, go to "External Access Tokens" and create a token with the appropriate role (settings, analytics, agent, or admin for full access).

Get Embed URL

After creating the token, you'll receive embed URLs for each dashboard the token can access.

Add iFrame to Your Site

Embed the dashboard using an iframe:

<!-- Embed Settings Dashboard -->
<iframe 
  src="https://your-tailore-domain.com/embed/settings?token=eat_YOUR_TOKEN"
  style="width: 100%; height: 800px; border: none;"
  allow="clipboard-write"
></iframe>

<!-- Embed Analytics Dashboard -->
<iframe 
  src="https://your-tailore-domain.com/embed/analytics?token=eat_YOUR_TOKEN"
  style="width: 100%; height: 600px; border: none;"
></iframe>

<!-- Embed Live Agent Dashboard -->
<iframe 
  src="https://your-tailore-domain.com/embed/live-agent?token=eat_YOUR_TOKEN"
  style="width: 100%; height: 100vh; border: none;"
></iframe>

Use Cases for Embedded Dashboards

Access Tokens

Access tokens provide secure, granular access to specific Tailore features.

Token Types

Role Access Use Case
Admin Settings + Analytics + Live Agent Full management access
Settings Chatbot settings only Let marketing team customize bot
Analytics Analytics dashboard only Share stats with stakeholders
Agent Live chat dashboard only Customer service team access

Token Security

API Keys & OpenAI Integration

Tailore offers two modes for AI-powered responses:

Tailore Managed (Default)

Bring Your Own Key (Professional+)

💡 Which should I choose?

Tailore Managed is simpler—just add credits and go. Own Key is better for high-volume users who want direct OpenAI billing and potentially lower costs.

Billing & Credits

Understand how Tailore billing works:

Subscription Fee

Your monthly subscription (€29/€69/€149) covers:

AI Credits (Tailore Managed)

When using Tailore-managed AI:

Viewing Your Balance

Your dashboard shows:

FAQ Mode

FAQ mode provides instant answers based on your pre-defined questions and answers.

How It Works

  1. We scrape your website during onboarding to extract FAQs
  2. Questions and answers are stored in your bot's knowledge base
  3. When users ask questions, we match them to existing FAQs
  4. Matched answers are delivered instantly with no AI cost

Benefits

AI Mode

AI mode uses GPT-4 to generate intelligent, contextual responses.

How It Works

  1. User message is sent to our AI service
  2. AI uses your business context (website content, FAQs, services) to craft a response
  3. Response is delivered in the user's detected language
  4. Credits are deducted based on tokens used

Customizing AI Behavior

In Chatbot Settings, you can customize:

Live Agent System

The live agent feature allows human handoff when AI can't help.

Customer Flow

  1. Customer interacts with FAQ/AI chatbot
  2. Customer clicks "Talk to Human" button
  3. Customer enters their name
  4. Request appears in agent dashboard
  5. Available agent accepts the chat
  6. Real-time conversation begins

Agent Dashboard Features

Multi-language Support

Tailore supports automatic language detection and responses in 20+ languages.

Supported Languages

English, Spanish, French, German, Italian, Portuguese, Dutch, Russian, Chinese, Japanese, Korean, Arabic, Hindi, Turkish, Polish, Ukrainian, Vietnamese, Thai, Swedish, Danish, Norwegian, Finnish, and more.

How It Works

Security

Tailore implements enterprise-grade security practices to protect your data and your customers' information.

🔒 Security First

We encrypt all data in transit (TLS 1.3) and at rest (AES-256). Our API includes security headers, rate limiting, and follows OWASP best practices. View our full security documentation →

Security Features

Content Security Policy Configuration

If your website uses a Content Security Policy (CSP), you'll need to add Tailore to your allowed sources. Here's the recommended configuration:

Content-Security-Policy:
  script-src 'self' https://tailore.dev;
  connect-src 'self' https://tailore.dev wss://tailore.dev;
  style-src 'self' 'unsafe-inline';
  frame-src https://tailore.dev;

Directive Breakdown

Directive Purpose Required For
script-src Allow loading the widget JavaScript Standard embed
connect-src Allow API calls and WebSocket connections All features
style-src 'unsafe-inline' Allow widget to inject styles Standard embed only
frame-src Allow iframe embed option Iframe embed only
⚠️ Note on unsafe-inline

The standard widget embed requires 'unsafe-inline' for styles. If your security policy prohibits this, use the Sandboxed Iframe Embed option below instead.

Sandboxed Iframe Embed (Maximum Isolation)

For sites with strict security requirements, we offer a sandboxed iframe embed that provides complete isolation from your page:

🔐 DOM Isolation

Cannot access your page's DOM or JavaScript

🍪 Cookie Isolation

No access to your site's cookies or storage

📜 Stricter CSP

No 'unsafe-inline' required

🏢 Enterprise Ready

Meets strict compliance requirements

Iframe Embed Code

<!-- Tailore Chatbot - Sandboxed Iframe -->
<iframe 
  src="https://tailore.dev/widget/embed/YOUR_BOT_ID?theme=dark"
  sandbox="allow-scripts allow-same-origin"
  style="border: none; 
         position: fixed; 
         bottom: 20px; 
         right: 20px; 
         width: 400px; 
         height: 600px;
         z-index: 999999;"
  title="Chat Widget"
></iframe>

Available Query Parameters

Parameter Default Description
theme"dark""dark" or "light"
primaryColor#6366f1Primary brand color (hex)
secondaryColor#8b5cf6Gradient color (hex)
headerTitle"Chat with us"Header title text
headerSubtitle"We typically reply instantly"Subtitle text
welcomeMessage"Hi! 👋 How can I help?"Initial bot message
showPoweredBy"true"Show/hide Tailore branding

Subresource Integrity (SRI)

SRI allows browsers to verify that the widget script hasn't been tampered with. When you include the integrity attribute, the browser compares the script's hash before executing it.

Using SRI with the Widget

<script 
  src="https://tailore.dev/widget/tailore-widget.js"
  integrity="sha384-YOUR_HASH_HERE"
  crossorigin="anonymous"
></script>
💡 Getting Your SRI Hash

Contact support to get the current SRI hash for the widget, or use tools like srihash.org to generate one yourself.

SRI Benefits

Data & Privacy

We collect minimal data necessary for chatbot functionality:

For complete privacy information, see our Security & Privacy page.

Troubleshooting

Widget Not Appearing

AI Not Responding

Live Chat Not Working

Dashboard Access Issues

Contact & Support

📧 Email Support

Reach us at [email protected]

💬 Live Chat

Use the chat widget on our website for immediate assistance.

📚 Additional Resources

🎉 You're all set!

You now have everything you need to make the most of your Tailore chatbot. If you have questions not covered here, don't hesitate to reach out to our support team.