Complete Guide to AI Chatbot Setup

Step 1: Navigate to Chatbot Settings

From your project dashboard, click "Chatbot" in the sidebar, then select "AI Model" or "Settings".

Step 2: Select Your Model

Choose the AI model that powers your chatbot:

Step 3: Configure Max Tokens

Max Tokens limits how long responses can be:

• Lower values (500-1000): Shorter, more concise answers
• Higher values (2000-4000): Longer, more detailed responses

Recommended: Start with 1500 tokens and adjust based on your needs.

Step 4: Write Your System Prompt

The System Prompt tells the AI how to behave. This is crucial for getting good responses!

Example system prompt:

You are a helpful customer service assistant for [Your Company Name].
You help customers with questions about our products and services.

Key information:
- Our business hours are 9 AM - 5 PM EST
- Shipping takes 3-5 business days
- Returns are accepted within 30 days

Always be friendly, professional, and helpful. If you don't know something,
suggest the customer contact support@yourcompany.com.

Step 5: Save Your Settings

Click "Save" to apply your AI model configuration.

Step 1: Open Appearance Settings

Navigate to Chatbot → Appearance or "Styling" in your project dashboard.

Step 2: Configure Colors

Step 3: Upload Your Logo

Add your company logo for brand recognition:

1. Click "Upload Logo"
2. Select an image (PNG, JPG, or SVG)
3. Maximum file size: 500KB

Step 4: Enable Glass-Morphism (Optional)

For a modern, translucent look, enable the Glass-Morphism Effect. This adds a subtle blur and transparency to the widget.

Step 5: Preview Your Changes

Use the live preview panel to see how your chatbot will look before saving.

Step 1: Navigate to Documents

Go to Chatbot → Documents or "Knowledge Base" in your dashboard.

Step 2: Upload Your Files

1. Click "Upload Documents" or drag and drop files
2. Select one or multiple files
3. Wait for upload and processing

Step 3: Wait for Processing

Documents are automatically:

• Extracted - Text is pulled from the file
• Chunked - Split into smaller searchable segments
• Indexed - Made searchable for the AI

Processing time depends on file size (typically 10-60 seconds).

Step 4: Manage Documents

From the documents table you can:

• View - See document details and extracted content
• Delete - Remove documents from the knowledge base
• Re-process - Re-extract content if needed

Step 1: Navigate to Web Scraping

Go to Chatbot → Web Scraping or "Scrape Website".

Step 2: Enter the URL

Paste the full URL of the page you want to scrape:

https://yourwebsite.com/about-us

Step 3: Click Scrape

Click "Scrape" or "Extract Content". The system will:

• Fetch the page
• Extract text content
• Remove navigation, ads, and irrelevant elements
• Add to your knowledge base

Step 4: Review Extracted Content

Preview the extracted content to ensure it looks correct before adding it to your knowledge base.

Step 1: Enter Sitemap URL

Paste your sitemap URL:

https://yourwebsite.com/sitemap.xml

Step 2: Analyze Sitemap

Click "Analyze" to see all URLs in your sitemap. You'll see:

• Total number of pages
• URL list preview
• Estimated processing time

Step 3: Set Limits (Optional)

To avoid processing too many pages:

• Set a maximum number of pages
• Filter by URL pattern (e.g., only /products/ pages)

Step 4: Start Batch Processing

Click "Start Processing" to begin scraping all selected URLs. Progress is shown in real-time.

Step 1: Configure Schedule

Navigate to Web Scraping → Schedule or "Auto-Scrape".

Step 2: Set Frequency

Choose how often to re-scrape your sitemap:

Step 3: Enter Sitemap URL

Provide your sitemap URL for automatic scraping.

Step 4: Enable Auto-Scraping

Toggle "Enable Auto-Scraping" to activate the schedule.

Step 1: Get Your Embed Code

Navigate to Chatbot → Embed or "Integration".

Step 2: Copy the Script Tag

Your embed code looks like this:

<script
  src="https://ai4shops.com/embed/chatbot.js"
  data-project-id="your-project-id"
  data-position="bottom-right"
></script>

Step 3: Add to Your Website

Paste the script tag just before the closing </body> tag in your HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
</head>
<body>
  <!-- Your website content -->
 
  <!-- ai4shops.com Chatbot -->
  <script
    src="https://ai4shops.com/embed/chatbot.js"
    data-project-id="your-project-id"
    data-position="bottom-right"
  ></script>
</body>
</html>

Step 1: Open Live Preview

In your chatbot settings, look for "Preview" or "Test" button.

Step 2: Send Test Messages

Try various questions:

• Questions from your knowledge base
• General inquiries
• Edge cases and unusual questions

Step 3: Review Responses

Check that responses are:

• Accurate and helpful
• Using your knowledge base correctly
• Following your system prompt guidelines