Build Real-Time Customer Support Bot (90 Minutes)

1. ChatGPT API Setup (10 minutes)
Step 1: OpenAI Account :

1. platform.openai.com → Sign up (free)
2. API Keys → Create new secret key
3. Copy key: sk-proj-abc123… (save securely)
4. Billing → Add $5 credit (first month free)

Step 2: Test API

Test in playground.openai.com:
Prompt: « Hello, I’m building a chatbot app »
Model: gpt-3.5-turbo (cheapest)
Expected response: Helpful answer

API Pricing Reference:

gpt-3.5-turbo: $0.002/1k tokens (~1000 words)
Your app: $1-5/month for 1000 conversations

2. New Adalo App: “AI Support Assistant” (5 minutes) :

1. Adalo Dashboard → New App
2. Name: « AI Support Bot »
3. Blank App → Primary Color: #4A90E2
4. Preview on phone immediately

 Screens Structure:

Screen 1: Welcome/Onboarding
Screen 2: Chat Interface (main)
Screen 3: Settings/Profile

3. Screen 1: Welcome Screen (10 minutes)
Layout (Full Screen):

Top 50%: Hero + CTA
Bottom 50%: Features + Start

Components:

1. Logo/Icon: Chat bubble with AI brain
2. H1: « AI-Powered Support Assistant »
3. Subtitle: « Get instant answers 24/7 »
4. Features List (3 bullets):
• « Ask anything about our services »
• « Available 24/7 – instant replies »
• « Learn from every conversation »
5. Primary Button: « Start Chatting Now » → Chat Screen
6. Secondary: « How it works » → Modal explanation

Button Action: Navigate to Chat Screen + Set conversation history empty

4. Screen 2: Chat Interface (MAIN SCREEN – 40 minutes)
Perfect Chat Layout:

Top 10%: Header (Back + Title)
Middle 80%: Messages List (Scrollable)
Bottom 10%: Input + Send

Message List Component (Most Important):

Collection: ChatMessages
Fields: messageText, isUser, timestamp, avatar

List Settings:
• Auto-scroll to bottom
• Bubble shapes (user right, AI left)
• User: Blue bubbles, right-aligned
• AI: Gray bubbles, left-aligned
• Avatar: User photo vs AI icon

Sample Messages Database (Pre-populate):

1. AI: « Hi! I’m your AI assistant. How can I help? »
2. User: « What services do you offer? »
3. AI: « We offer web design, SEO, and marketing… »

Input Area (Bottom):

1. Text Input: Multi-line, 1-500 chars
2. Character counter: « 0/500 »
3. Send Button: Paper plane icon

4. Microphone (voice-to-text – optional)

5. ChatGPT API Integration (20 minutes)
Adalo External API Setup:

1. Database → External Collections → Add
2. Name: OpenAI_ChatGPT
3. Base URL: https://api.openai.com/v1

Chat Endpoint Configuration:

Endpoint: /chat/completions
Method: POST
Headers:
• Authorization: Bearer [YOUR_API_KEY]
• Content-Type: application/json

Request Body:
{
« model »: « gpt-3.5-turbo »,
« messages »: [
{« role »: « system », « content »: « You are a helpful customer support assistant for a web design agency. »},
{« role »: « user », « content »: « [USER_MESSAGE] »}
],
« max_tokens »: 300,
« temperature »: 0.7
}

Parse Response:

Response Path: choices[0].message.content
Save as: aiResponse

6. Send Message Action Flow (15 minutes)
Send Button Action Chain:

1. Validate input (not empty)
2. Create new ChatMessage record:
• messageText = input value
• isUser = true
• timestamp = now()
3. Show Typing Indicator (AI bubble: « … »)
4. Call OpenAI API → Wait for response
5. Create AI ChatMessage:
• messageText = API response
• isUser = false
• timestamp = now()
6. Hide typing indicator
7. Clear input field
8. Scroll list to bottom

7. Advanced Chat Features (10 minutes)
Conversation Memory:

Save last 10 messages to Local Storage
Include in every API call as conversation history
Maintain context across sessions

Smart Responses:

Quick reply buttons after common questions:
• « Show pricing »
• « Book consultation »
• « View portfolio »
• « Contact human support »

Rate Limiting:

Max 10 messages/minute
Show « Please wait 30 seconds » message
Prevent API abuse

8. Screen 3: Settings (8 minutes)
Settings Screen Components:

1. Profile Section:
• User avatar
• Name + email
• « Edit Profile »

2. Chat Preferences:
• Toggle: Enable conversation history
• Slider: Response speed (tokens)
• Dropdown: AI Personality (Professional/Friendly)

3. Danger Zone:
• « Clear Chat History »
• « Delete Account »

9. Testing Complete Chatbot (10 minutes)
Test Scenarios:

✅ Basic greeting → Friendly response
✅ Service question → Accurate info
✅ Pricing → Quote + CTA
✅ Complex question → Helpful answer
✅ Edge case → Graceful error
✅ Offline → Cached messages

Real Customer Tests:

1. Test user asks about your services
2. Test pricing questions
3. Test booking/appointment
4. Test FAQ/common questions
5. Save best conversations as examples

10. Deployment & Scaling (5 minutes)
Publish Options:

✅ Web App (PWA) – Instant
✅ iOS TestFlight – 1 day
✅ Android Internal Testing – Hours
✅ Full App Stores – 1-7 days

Production API Keys:

Replace test OpenAI key with production
Add error handling for API downtime
Implement conversation analytics
Set monthly API budget alerts

Success Metrics:

✅ 80%+ conversation satisfaction
✅ Average 5+ exchanges/session
✅ 20% convert to bookings
✅ $0.02-0.05 per conversation