💬 AI Chatbot

Add an AI-powered chatbot to your website. One line for instant setup, or build your own custom UI.

⚡ Easiest Way: One Line

Add a complete AI chatbot to any website in 10 seconds:

Copy & Paste 
<!-- Add before </body> -->
<script src="https://api.gammal.tech/sdk-web.js"></script>
<script>
GammalTech.ai.chatWidget('body', {
    position: 'footer',
    siteName: 'Support',
    systemPrompt: 'You are a helpful assistant.'
});
</script>

Choose Your Method

Gammal Tech offers three ways to add AI chat, depending on how much control you need:

EASIEST

chatWidget()

Complete chatbot with UI. Just specify where and how it looks.

✓ Support chat bubbles
✓ FAQ pages
✓ AI assistant pages

CUSTOM UI

chat()

AI responses only. Build your own interface, we handle the AI.

✓ Custom chat designs
✓ React/Vue apps
✓ Conversation memory

SIMPLE

ask()

Single question, single answer. No login required, no memory.

✓ Quick AI answers
✓ Form helpers
✓ One-off questions

1. chatWidget() — Complete Chatbot

The fastest way to add a chatbot. Includes UI, typing indicators, login integration, and conversation memory.

Basic Usage

Minimal Setup 
GammalTech.ai.chatWidget('#chat-container', {
    siteName: 'My Website',
    systemPrompt: 'You are a helpful assistant for My Website.'
});

Full Options

All Options 
GammalTech.ai.chatWidget('#chat-container', {
    // Appearance
    position: 'footer',        // 'footer', 'page', 'sidebar'
    shape: 'circle',           // 'circle', 'pill', 'square'
    size: 'medium',            // 'small', 'medium', 'large'
    color: '#6366f1',          // Accent color
    
    // Content
    siteName: 'Support',       // Header title
    welcomeMessage: 'Hi! How can I help?',
    systemPrompt: 'You are a helpful assistant...',
    
    // Behavior
    requireLogin: true         // Require Gammal Tech login
});

Options Reference

Option Type Default Description
position string 'footer' Widget placement: 'footer', 'page', or 'sidebar'
shape string 'circle' Toggle button shape: 'circle', 'pill', or 'square'
size string 'medium' Widget size: 'small', 'medium', or 'large'
color string '#FF5A5F' Accent color for buttons and header
siteName string 'Assistant' Name shown in chat header
welcomeMessage string 'Hi! How can I help?' First message shown to user
systemPrompt string 'You are helpful...' AI personality and instructions
requireLogin boolean true Require Gammal Tech login to chat

Position Examples

footer
page
sidebar
Footer — Floating bubble (most common) 
GammalTech.ai.chatWidget('body', {
    position: 'footer',
    shape: 'circle',
    siteName: 'Help'
});
Page — Full embedded chat 
<!-- HTML -->
<div id="ai-assistant" style="height: 600px;"></div>

<!-- JavaScript -->
GammalTech.ai.chatWidget('#ai-assistant', {
    position: 'page',
    siteName: 'AI Assistant',
    systemPrompt: 'You are the official AI assistant for...'
});
Sidebar — Side panel 
<!-- HTML -->
<div style="display: flex;">
    <main style="flex: 1;">Your content</main>
    <aside id="chat-sidebar" style="width: 350px;"></aside>
</div>

<!-- JavaScript -->
GammalTech.ai.chatWidget('#chat-sidebar', {
    position: 'sidebar',
    siteName: 'Assistant'
});

2. chat() — Build Your Own UI

Use this when you want full control over the chat interface. The SDK handles AI responses and conversation memory; you handle the UI.

📖 When to use chat()

• You have a custom design that doesn't match the widget
• You're building a React/Vue/Angular app
• You need conversation memory across sessions

Basic Usage

Send a message 
const token = GammalTech.getToken();
const response = await GammalTech.ai.chat(token, 'Hello!', {
    system_prompt: 'You are a helpful assistant.'
});

console.log(response); // "Hi! How can I help you today?"

With Conversation History

Multi-turn conversation 
const history = [
    { role: 'user', content: 'My name is Ahmed' },
    { role: 'assistant', content: 'Nice to meet you, Ahmed!' }
];

const response = await GammalTech.ai.chat(token, 'What is my name?', {
    system_prompt: 'You are a helpful assistant.',
    history: history
});

console.log(response); // "Your name is Ahmed!"

Complete Example

Custom chat implementation 
const chatHistory = [];
const SYSTEM = 'You are a helpful assistant. Be concise.';

async function sendMessage(userMessage) {
    // Check login
    if (!GammalTech.isLoggedIn()) {
        await GammalTech.login();
    }
    
    // Add user message to history
    chatHistory.push({ role: 'user', content: userMessage });
    
    // Get AI response
    const token = GammalTech.getToken();
    const response = await GammalTech.ai.chat(token, userMessage, {
        system_prompt: SYSTEM,
        history: chatHistory.slice(-10), // Last 10 messages
        max_tokens: 500
    });
    
    // Add assistant response to history
    chatHistory.push({ role: 'assistant', content: response });
    
    return response;
}

// Usage
const reply = await sendMessage('How do I reset my password?');
displayInMyUI(reply); // Your function to show message

Options

Option Type Description
system_prompt string AI personality and instructions
history array Previous messages [{role, content}, ...]
max_tokens number Maximum response length (default: 500)
temperature number Creativity 0-1 (default: 0.7)

3. ask() — Quick One-Off Questions

The simplest option. No login required, no conversation memory. Just ask a question and get an answer.

Simple question 
const answer = await GammalTech.ai.ask('What is the capital of Egypt?');
console.log(answer); // "Cairo"
With system prompt 
const answer = await GammalTech.ai.ask('Explain quantum computing', {
    system_prompt: 'Explain like I am 5 years old. Use simple words.',
    max_tokens: 200
});
console.log(answer); // Simple explanation
💡 Use cases for ask()

• Form field suggestions
• Grammar/spell checking
• Quick translations
• Single factual questions

Writing Good System Prompts

The system prompt defines your AI's personality and behavior. A good prompt makes all the difference.

Bad vs Good

❌ Bad — Too vague 
"You are a helpful assistant."
✅ Good — Specific and clear 
`You are the support assistant for TechStore, an electronics shop.

Your job:
- Help with orders, returns, and product questions
- Be friendly but professional
- Keep answers under 3 sentences when possible
- If you don't know something, say so and offer to connect with human support

You know:
- Return policy: 30 days, receipt required
- Shipping: Free over $50, otherwise $5.99
- Support hours: 9am-6pm EST

You don't know:
- Specific order status (ask for order number)
- Inventory levels (suggest checking website)`

Template

Copy and customize 
`You are [ROLE] for [COMPANY/WEBSITE].

Your personality: [FRIENDLY / PROFESSIONAL / CASUAL]

Your job:
- [PRIMARY TASK]
- [SECONDARY TASK]
- [CONSTRAINT]

You know:
- [FACT 1]
- [FACT 2]

You don't know:
- [LIMITATION 1]
- [LIMITATION 2]

Always: [IMPORTANT RULE]
Never: [THING TO AVOID]`

Best Practices

✅ Do

• Be specific in system prompts — tell the AI exactly what it should and shouldn't do
• Show typing indicators while waiting for AI response
• Limit conversation history to last 10-20 messages for performance
• Handle errors gracefully with user-friendly messages
• Test your chatbot with edge cases

⚠️ Don't

• Don't put sensitive business logic in system prompts (users can extract them)
• Don't make the AI pretend to be human
• Don't let system prompts get too long (slows responses)
• Don't skip login for conversation memory — it won't work