TYPEBOT GUIDE

Purpose: Comprehensive guide for working with Typebot in the EastPay ecosystem
Deployment: Self-hosted on Hostinger VPS via Coolify (see DEPLOYMENT.md)

Overview
Getting Started
Editor Basics
Blocks
Variables
Logic & Conditions
Integrations
Embedding
API Reference
Self-Hosting
Best Practices

1. Overview

1.1 What is Typebot?

Typebot is a fair source chatbot builder designed for creating conversational applications. Use cases include:

Lead Qualification: Collect user information and route to sales
Customer Support: Automated responses and ticket creation
AI Chat Assistants: Integration with OpenAI GPT models
Interactive Forms: Conversational data collection

1.2 Key Features

Visual Flow Editor: Drag-and-drop interface for building conversation flows
Variables & Logic: Dynamic content with conditional branching
Multi-Channel: Deploy via web embed, WhatsApp, Telegram, API
Real-Time Analytics: Track user interactions and completion rates
Self-Hostable: Full control over data and infrastructure
Integrations: n8n, OpenAI, webhooks, REST API

1.3 EastPay Integration

┌─────────────────────────────────────────────────────────────┐
│                    TYPEBOT ARCHITECTURE                     │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  User (Telegram) ──► Typebot (Hostinger/Coolify)          │
│                         │                                   │
│                         ├──► n8n (Workflow Automation)     │
│                         │      │                            │
│                         │      ├──► OpenAI GPT-4o          │
│                         │      └──► Supabase (Data)        │
│                         │                                   │
│                         └──► Admin Panel (Netlify)         │
│                                                             │
└─────────────────────────────────────────────────────────────┘

2. Getting Started

2.1 Accessing Typebot

Production Instance:

URL: https://typebot.eastpay.com (configured in Coolify)
Login: Admin credentials (stored in password manager)

Development:

Local Docker: docker-compose up -d typebot-builder typebot-viewer
Port: 3001 (builder), 3002 (viewer)

2.2 Creating Your First Bot

Create New Typebot
- Click "Create a typebot"
- Choose template or start from scratch
- Name: lead-qualification-bot
Add Blocks
- Drag blocks from sidebar to canvas
- Connect blocks with arrows
- Configure block settings
Test
- Click "Preview" button
- Interact with bot in test window
- Check variable values in debugger
Publish
- Click "Publish" when ready
- Get embed code or API endpoint
- Deploy to production

3. Editor Basics

3.1 Canvas Navigation

Pan: Click and drag canvas
Zoom: Mouse wheel or pinch gesture
Select Multiple: Shift + click blocks
Delete: Select block and press Delete key

3.2 Block Connections

Connect Blocks: Drag from output port to next block's input
Multiple Paths: Add buttons/conditions for branching
Jump Between Groups: Use "Jump" block to skip sections

3.3 Groups

Organize related blocks into collapsible groups:

┌─────────────────────────────┐
│  Group: User Information    │
├─────────────────────────────┤
│  ├─ Text: "What's your name?"│
│  ├─ Input: Name              │
│  ├─ Text: "What's your email?│
│  └─ Input: Email             │
└─────────────────────────────┘

4. Blocks

4.1 Bubbles (Display Information)

Bubbles display content to users without requiring input.

Text Bubble

┌──────────────────────────────┐
│  Text                        │
├──────────────────────────────┤
│  Welcome to EastPay!         │
│                              │
│  How can I help you today?   │
│                              │
│  Links: [Support](https://...) │
└──────────────────────────────┘

Features:

Rich text formatting
Markdown support
Variables: Hello {{name}}!
Links: http://, https://, mailto:, tel:, sms:

Example:

Hi {{user_name}}! 👋

Your application status: {{application_status}}

Questions? [Contact us](mailto:support@eastpay.com)

Image Bubble

┌──────────────────────────────┐
│  Image                       │
├──────────────────────────────┤
│  URL: https://...            │
│  Alt text: EastPay logo      │
└──────────────────────────────┘

Video Bubble

Embed YouTube, Vimeo, or direct video URLs.

┌──────────────────────────────┐
│  Video                       │
├──────────────────────────────┤
│  URL: https://youtube.com... │
└──────────────────────────────┘

Audio Bubble

Play audio files or voice messages.

┌──────────────────────────────┐
│  Audio                       │
├──────────────────────────────┤
│  URL: https://...audio.mp3   │
└──────────────────────────────┘

Embed Bubble

Embed external content (iframes, widgets).

┌──────────────────────────────┐
│  Embed                       │
├──────────────────────────────┤
│  URL: https://widget.com/... │
│  Height: 400px               │
└──────────────────────────────┘

4.2 Inputs (Collect User Data)

Inputs pause the conversation and wait for user response.

Text Input

┌──────────────────────────────┐
│  Text Input                  │
├──────────────────────────────┤
│  Variable: user_name         │
│  Placeholder: Enter name...  │
│  Max length: 100             │
└──────────────────────────────┘

Number Input

┌──────────────────────────────┐
│  Number Input                │
├──────────────────────────────┤
│  Variable: loan_amount       │
│  Min: 1000                   │
│  Max: 1000000                │
│  Step: 1000                  │
└──────────────────────────────┘

Email Input

Validates email format automatically.

┌──────────────────────────────┐
│  Email Input                 │
├──────────────────────────────┤
│  Variable: user_email        │
│  Validation: Auto            │
└──────────────────────────────┘

Phone Input

┌──────────────────────────────┐
│  Phone Input                 │
├──────────────────────────────┤
│  Variable: user_phone        │
│  Country code: +998          │
│  Format: International       │
└──────────────────────────────┘

Date Input

┌──────────────────────────────┐
│  Date Input                  │
├──────────────────────────────┤
│  Variable: birth_date        │
│  Format: YYYY-MM-DD          │
│  Min: 1950-01-01             │
│  Max: 2010-01-01             │
└──────────────────────────────┘

Buttons

Multiple choice options.

┌──────────────────────────────┐
│  Buttons                     │
├──────────────────────────────┤
│  Question: Choose service    │
│                              │
│  [Personal Loan]             │
│  [Business Loan]             │
│  [Mortgage]                  │
└──────────────────────────────┘

Save to variable:

Variable: selected_service
Value: "Personal Loan" (button label)

File Upload

┌──────────────────────────────┐
│  File Upload                 │
├──────────────────────────────┤
│  Variable: passport_scan     │
│  Allowed types: image/*, pdf │
│  Max size: 10MB              │
└──────────────────────────────┘

Uploaded file URL saved to variable for processing.

Payment Input

Integrate payment gateways (Stripe, PayPal, etc.).

┌──────────────────────────────┐
│  Payment                     │
├──────────────────────────────┤
│  Amount: {{loan_amount}}     │
│  Currency: UZS               │
│  Provider: Stripe            │
└──────────────────────────────┘

4.3 Logic Blocks

Logic blocks perform operations without displaying anything to the user.

Set Variable

Assign or modify variable values.

┌──────────────────────────────┐
│  Set Variable                │
├──────────────────────────────┤
│  Variable: interest_rate     │
│  Value: 12.5                 │
└──────────────────────────────┘

Dynamic values:

Variable: full_name
Value: {{first_name}} {{last_name}}

JavaScript expressions:

Variable: monthly_payment
Value: {{={{loan_amount}} * 0.05=}}

Condition

Branch conversation based on logic.

┌──────────────────────────────┐
│  Condition                   │
├──────────────────────────────┤
│  IF {{loan_amount}} > 50000  │
│  ├─ TRUE ──► Manager review  │
│  └─ FALSE ──► Auto approval  │
└──────────────────────────────┘

Comparison operators:

== Equal
!= Not equal
> Greater than
< Less than
>= Greater or equal
<= Less or equal
contains String contains
is empty Variable is empty

Multiple conditions:

IF {{credit_score}} > 700 AND {{income}} > 5000
  ├─ Approved
ELSE IF {{credit_score}} > 600
  ├─ Conditional approval
ELSE
  └─ Rejected

Redirect

Send user to external URL.

┌──────────────────────────────┐
│  Redirect                    │
├──────────────────────────────┤
│  URL: https://eastpay.com/app│
│  Open in: New tab            │
└──────────────────────────────┘

Script

Execute custom JavaScript code.

┌──────────────────────────────┐
│  Script                      │
├──────────────────────────────┤
│  // Calculate interest       │
│  const principal = {{loan}}; │
│  const rate = 0.12;          │
│  const years = 5;            │
│                              │
│  const interest = principal  │
│    * rate * years;           │
│                              │
│  return { interest };        │
└──────────────────────────────┘

Access variables:

Read: {{variable_name}}
Write: Return object with variable names as keys

Available APIs:

console.log() for debugging
Standard JavaScript (ES2020)
No access to DOM or Node.js modules

Jump

Skip to another block or group.

┌──────────────────────────────┐
│  Jump                        │
├──────────────────────────────┤
│  Target: Group "Payment"     │
│  or Block ID: abc123         │
└──────────────────────────────┘

Use cases:

Skip sections based on user type
Return to main menu
Create loops (use carefully!)

Wait

Pause conversation for specified duration.

┌──────────────────────────────┐
│  Wait                        │
├──────────────────────────────┤
│  Duration: 2 seconds         │
└──────────────────────────────┘

Use cases:

Simulate typing delay
Wait for external API processing
Dramatic pause before reveal

4.4 Integration Blocks

Webhook

Send data to external services.

┌──────────────────────────────┐
│  Webhook                     │
├──────────────────────────────┤
│  Method: POST                │
│  URL: https://api.eastpay... │
│  Headers:                    │
│    Authorization: Bearer...  │
│  Body:                       │
│    {                         │
│      "name": "{{user_name}}", │
│      "email": "{{email}}"    │
│    }                         │
│  Save response to: result    │
└──────────────────────────────┘

Response handling:

Save to variable: webhook_response
Access data: {{webhook_response.data.id}}

HTTP Request

Make custom API calls.

┌──────────────────────────────┐
│  HTTP Request                │
├──────────────────────────────┤
│  Method: GET                 │
│  URL: https://api.rates.com  │
│  Query params:               │
│    currency: UZS             │
│  Save to: exchange_rate      │
└──────────────────────────────┘

n8n Integration

Trigger n8n workflows.

┌──────────────────────────────┐
│  n8n Webhook                 │
├──────────────────────────────┤
│  Webhook URL:                │
│  https://n8n.eastpay.com/... │
│  Body:                       │
│    {                         │
│      "action": "process_app",│
│      "data": {{variables}}   │
│    }                         │
└──────────────────────────────┘

EastPay n8n workflows:

Application processing
Credit check
Document verification
Notification dispatch
AI analysis (OpenAI)

OpenAI

Generate AI responses.

┌──────────────────────────────┐
│  OpenAI                      │
├──────────────────────────────┤
│  Model: gpt-4o               │
│  System prompt:              │
│    You are EastPay assistant │
│  User message:               │
│    {{user_question}}         │
│  Save to: ai_response        │
└──────────────────────────────┘

Configuration:

API key: Set in environment variables
Temperature: 0.7 (creativity level)
Max tokens: 500 (response length)

Display response:

Text bubble: {{ai_response}}

Google Sheets

Write data to spreadsheet.

┌──────────────────────────────┐
│  Google Sheets               │
├──────────────────────────────┤
│  Action: Append row          │
│  Sheet ID: 1abc...           │
│  Values:                     │
│    - {{user_name}}           │
│    - {{user_email}}          │
│    - {{timestamp}}           │
└──────────────────────────────┘

Send Email

Send notification emails.

┌──────────────────────────────┐
│  Send Email                  │
├──────────────────────────────┤
│  To: {{user_email}}          │
│  Subject: Application Confirm│
│  Body:                       │
│    Hi {{name}},              │
│    Your application #{{id}}  │
│    has been received.        │
└──────────────────────────────┘

5. Variables

5.1 Creating Variables

Variables store dynamic data during conversation.

Auto-created from inputs:

Text Input block → Variable: user_name
Value: "John Doe"

Manual creation:

Click "Variables" panel
Click "+" button
Enter name: loan_amount
Set initial value (optional)

5.2 Using Variables

Display in text:

Hello {{user_name}}!
Your loan amount: {{loan_amount}} UZS

JavaScript expressions:

Total: {{={{loan_amount}} * 1.12=}}

Uppercase/Lowercase:

{{={{user_name}}.toUpperCase()=}}

String manipulation:

{{={{email}}.substring(0, {{email}}.indexOf('@'))=}}

5.3 Built-in Variables

Typebot provides system variables:

{{timestamp}} - Current date/time
{{session_id}} - Unique session identifier
{{result_id}} - Result ID for this conversation
{{utm_source}} - UTM parameter from URL
{{utm_medium}} - UTM parameter
{{utm_campaign}} - UTM parameter

5.4 Prefilled Variables

Pass data when embedding:

HTML embed:

<script>
  Typebot.initStandard({
    typebot: "my-typebot",
    prefilledVariables: {
      user_id: "12345",
      source: "website",
    },
  });
</script>

URL parameters:

https://typebot.eastpay.com/my-bot?user_id=12345&source=email

Variables user_id and source will be available.

5.5 Hidden Variables

Store data without showing in results panel:

Create variable
Uncheck "Save in results"
Use for calculations or temporary data

Example:

Variable: temp_calculation
Used for: Intermediate math
Saved: No (unchecked)

6. Logic & Conditions

6.1 Conditional Branching

┌────────────────────────────────────────┐
│  Condition: {{loan_type}}              │
├────────────────────────────────────────┤
│                                        │
│  ├─ "personal" ──► Personal flow      │
│  ├─ "business" ──► Business flow      │
│  └─ "mortgage"  ──► Mortgage flow     │
│                                        │
└────────────────────────────────────────┘

6.2 Complex Logic

AND conditions:

IF {{credit_score}} > 700 AND {{income}} > 5000

OR conditions:

IF {{source}} == "referral" OR {{promo_code}} != ""

Nested conditions:

IF {{loan_amount}} > 50000
  IF {{credit_score}} > 750
    ├─ Pre-approved
  ELSE
    ├─ Manual review
ELSE
  └─ Auto-approved

6.3 Dynamic Content

Text: Your interest rate is {{
  ={{credit_score}} > 750 ? "8%" : 
    ={{credit_score}} > 650 ? "12%" : "16%"
=}}

7. Integrations

7.1 n8n Workflows

Trigger n8n from Typebot:

Create webhook trigger in n8n
Copy webhook URL
Add Webhook block in Typebot
Configure request:

{
  "event": "application_submitted",
  "data": {
    "user_id": "{{user_id}}",
    "loan_amount": "{{loan_amount}}",
    "loan_type": "{{loan_type}}"
  }
}

n8n workflow processes:

Validate application
Check credit score (API call)
Store in Supabase
Trigger OpenAI analysis
Send notifications

Return data to Typebot:

n8n response:
{
  "status": "approved",
  "application_id": "APP-001"
}

Save to: application_result
Display: {{application_result.status}}

7.2 OpenAI Integration

Conversational AI:

┌────────────────────────────────────────┐
│  OpenAI Chat                           │
├────────────────────────────────────────┤
│  Model: gpt-4o                         │
│  System: You are a loan advisor        │
│  Conversation:                         │
│    User: {{user_message}}              │
│  Response → ai_response                │
└────────────────────────────────────────┘

Split long responses:

If AI returns multiple paragraphs, split into separate bubbles:

// Script block
const response = "{{ai_response}}";
const paragraphs = response.split('\n\n');

return {
  para1: paragraphs[0],
  para2: paragraphs[1],
  para3: paragraphs[2],
};

Then display:

Text: {{para1}}
Text: {{para2}}
Text: {{para3}}

7.3 Supabase Integration

Via n8n or direct API:

┌────────────────────────────────────────┐
│  HTTP Request                          │
├────────────────────────────────────────┤
│  Method: POST                          │
│  URL: https://[project].supabase.co/   │
│       rest/v1/applications             │
│  Headers:                              │
│    apikey: [anon-key]                  │
│    Authorization: Bearer [anon-key]    │
│  Body:                                 │
│    {                                   │
│      "user_id": "{{user_id}}",         │
│      "amount": "{{loan_amount}}",      │
│      "status": "pending"               │
│    }                                   │
└────────────────────────────────────────┘

Better approach: Use n8n Supabase node for complex operations.

7.4 Telegram Integration

Receive messages in Typebot:

Create Telegram bot via BotFather
Configure webhook to Typebot
Process messages through workflow

Send notifications:

Use n8n Telegram node triggered by Typebot webhook.

8. Embedding

8.1 Standard Embed

Displays bot in a fixed container on page.

<div id="typebot-container" style="width: 100%; height: 600px;"></div>

<script type="module">
  import Typebot from 'https://cdn.typebot.io/js/typebot.js';

  Typebot.initStandard({
    typebot: 'lead-qualification-bot',
    apiHost: 'https://typebot.eastpay.com',
    container: document.getElementById('typebot-container'),
    prefilledVariables: {
      user_id: '12345',
      source: 'website',
    },
  });
</script>

8.2 Popup Embed

Bot opens in modal overlay.

<button id="open-bot">Chat with us</button>

<script type="module">
  import Typebot from 'https://cdn.typebot.io/js/typebot.js';

  Typebot.initPopup({
    typebot: 'support-bot',
    apiHost: 'https://typebot.eastpay.com',
    autoShowDelay: 5000, // Show after 5 seconds
    theme: {
      button: {
        backgroundColor: '#0042DA',
      },
    },
  });

  document.getElementById('open-bot').addEventListener('click', () => {
    Typebot.open();
  });
</script>

8.3 Bubble Embed

Floating chat bubble in bottom-right corner.

<script type="module">
  import Typebot from 'https://cdn.typebot.io/js/typebot.js';

  Typebot.initBubble({
    typebot: 'support-bot',
    apiHost: 'https://typebot.eastpay.com',
    theme: {
      button: {
        backgroundColor: '#0042DA',
        iconColor: '#FFFFFF',
      },
      chatWindow: {
        backgroundColor: '#FFFFFF',
      },
    },
    previewMessage: {
      message: 'Need help? Chat with us!',
      autoShowDelay: 3000,
    },
  });
</script>

8.4 Embed Configuration

Common options:

{
  typebot: 'bot-id',                    // Bot identifier
  apiHost: 'https://typebot.domain.com', // Self-hosted instance
  prefilledVariables: {                 // Pre-fill data
    user_id: '123',
    source: 'email',
  },
  theme: {                              // Custom styling
    button: {
      backgroundColor: '#0042DA',
      iconColor: '#FFFFFF',
      size: 'medium',
    },
    chatWindow: {
      backgroundColor: '#FFFFFF',
      width: '400px',
    },
  },
  autoShowDelay: 5000,                  // Auto-open delay (ms)
  onInit: () => console.log('Init'),    // Lifecycle hooks
  onOpen: () => console.log('Opened'),
  onClose: () => console.log('Closed'),
}

9. API Reference

9.1 Authentication

All API requests require Bearer token authentication.

curl -X POST https://typebot.eastpay.com/api/v1/typebots \
  -H "Authorization: Bearer YOUR_API_TOKEN" \
  -H "Content-Type: application/json"

Get API token:

Login to Typebot
Settings → API tokens
Create new token
Store securely (password manager)

9.2 Start Chat Session

POST /api/v1/sessions/start

Request:

{
  "typebotId": "bot-id",
  "prefilledVariables": {
    "user_id": "12345",
    "source": "api"
  }
}

Response:

{
  "sessionId": "session-abc123",
  "messages": [
    {
      "type": "text",
      "content": "Welcome! What's your name?"
    }
  ]
}

9.3 Send Answer

POST /api/v1/sessions/{sessionId}/answer

Request:

{
  "answer": "John Doe"
}

Response:

{
  "messages": [
    {
      "type": "text",
      "content": "Nice to meet you, John!"
    },
    {
      "type": "input",
      "inputType": "email",
      "placeholder": "Enter your email"
    }
  ],
  "sessionId": "session-abc123"
}

9.4 Get Results

GET /api/v1/typebots/{typebotId}/results

Response:

{
  "results": [
    {
      "id": "result-123",
      "createdAt": "2026-01-20T10:00:00Z",
      "variables": [
        {
          "name": "user_name",
          "value": "John Doe"
        },
        {
          "name": "user_email",
          "value": "john@example.com"
        }
      ]
    }
  ]
}

9.5 Programmatic Bot Creation

POST /api/v1/typebots

Request:

{
  "name": "Dynamic Bot",
  "groups": [
    {
      "title": "Group 1",
      "blocks": [
        {
          "type": "text",
          "content": "Hello!"
        },
        {
          "type": "input",
          "inputType": "text",
          "variable": "user_name"
        }
      ]
    }
  ]
}

10. Self-Hosting

10.1 Architecture

Typebot consists of two Next.js applications:

Builder: Visual editor (port 3001)
Viewer: Chat runtime (port 3002)

10.2 Docker Compose

services:
  typebot-builder:
    image: baptistearno/typebot-builder:latest
    ports:
      - "3001:3000"
    environment:
      DATABASE_URL: postgresql://user:pass@db:5432/typebot
      NEXTAUTH_URL: https://typebot.eastpay.com
      ENCRYPTION_SECRET: [generate-random-string]
    depends_on:
      - typebot-db

  typebot-viewer:
    image: baptistearno/typebot-viewer:latest
    ports:
      - "3002:3000"
    environment:
      DATABASE_URL: postgresql://user:pass@db:5432/typebot
      NEXTAUTH_URL: https://bot.eastpay.com
    depends_on:
      - typebot-db

  typebot-db:
    image: postgres:15-alpine
    volumes:
      - typebot-data:/var/lib/postgresql/data
    environment:
      POSTGRES_DB: typebot
      POSTGRES_USER: typebot
      POSTGRES_PASSWORD: [secure-password]

volumes:
  typebot-data:

10.3 Environment Variables

Builder (.env):

# Database
DATABASE_URL=postgresql://user:pass@host:5432/typebot

# Auth
NEXTAUTH_URL=https://typebot.eastpay.com
NEXTAUTH_SECRET=[generate-random]
ENCRYPTION_SECRET=[generate-random]

# Email (for notifications)
SMTP_HOST=smtp.sendgrid.net
SMTP_PORT=587
SMTP_USERNAME=apikey
SMTP_PASSWORD=[sendgrid-api-key]
NEXT_PUBLIC_SMTP_FROM=noreply@eastpay.com

# S3 Storage (optional, for file uploads)
S3_ENDPOINT=https://s3.amazonaws.com
S3_ACCESS_KEY=[aws-access-key]
S3_SECRET_KEY=[aws-secret-key]
S3_BUCKET=typebot-uploads

Viewer (.env):

DATABASE_URL=postgresql://user:pass@host:5432/typebot
NEXTAUTH_URL=https://bot.eastpay.com
ENCRYPTION_SECRET=[same-as-builder]

10.4 Coolify Deployment

EastPay uses Coolify for orchestration:

Add new service in Coolify dashboard
Select "Docker Compose"
Paste configuration above
Configure domains:
- Builder: typebot.eastpay.com
- Viewer: bot.eastpay.com
Deploy

Automatic updates:

Coolify pulls latest images on deploy
Enable "Auto-deploy" for continuous updates

11. Best Practices

11.1 Conversation Design

Keep it concise:

Short messages (2-3 sentences max)
One question per message
Clear call-to-action

User-friendly flow:

✅ Good:
  Text: "What's your name?"
  Input: [Text input]
  Text: "Thanks {{name}}! What's your email?"
  Input: [Email input]

❌ Bad:
  Text: "What's your name and email?"
  Input: [Text input expecting both]

Provide context:

Text: "To calculate your loan, I need some information."
Text: "First, how much do you want to borrow?"
Input: [Number input]

Error handling:

Condition: {{email}} is empty
  ├─ TRUE: "Please enter a valid email address."
  └─ FALSE: Continue

11.2 Variable Naming

Use descriptive names:

✅ Good: user_email, loan_amount, application_status
❌ Bad: e, amt, s

Follow conventions:

snake_case for variables
UPPER_CASE for constants (via Set Variable)

Prefix by category:

user_name, user_email, user_phone
loan_amount, loan_type, loan_duration
app_status, app_id, app_date

11.3 Performance

Minimize API calls:

Batch data collection before calling external APIs
Cache responses in variables
Use webhooks for async processing

Optimize flows:

Use Jump blocks to skip unnecessary sections
Group related blocks together
Remove unused blocks and variables

Load testing:

Test with multiple concurrent users
Monitor response times
Scale infrastructure if needed

11.4 Security

Never expose sensitive data:

❌ Bad: Text: "Your API key is {{api_key}}"
✅ Good: Hidden variable, only sent to backend

Validate inputs:

Condition: {{email}} matches email format
  ├─ TRUE: Continue
  └─ FALSE: "Invalid email, try again"

Sanitize user input:

Use n8n to clean data before storing
Prevent SQL injection (use parameterized queries)
Escape HTML in user responses

API authentication:

Store tokens in environment variables
Use webhook signatures for validation
Rotate API keys regularly

11.5 Analytics

Track key metrics:

Completion rate (% who finish flow)
Drop-off points (where users leave)
Average session duration
Most common paths

Enable analytics:

Settings → Analytics
Connect Google Analytics (optional)
Review built-in analytics dashboard

Custom tracking:

Webhook: Send to analytics service
{
  "event": "step_completed",
  "step": "email_collected",
  "timestamp": "{{timestamp}}"
}

11.6 Testing

Test checklist:

All paths (happy path + error cases)
Variable substitution works
External integrations respond
Mobile responsive (test on phone)
Loading states (slow connections)
Edge cases (empty inputs, special characters)

Use preview mode:

Test without publishing
Reset session to start over
Check variable values in debugger

A/B testing:

Create multiple versions
Route users randomly (via Condition)
Compare completion rates

11.7 Maintenance

Version control:

Export bot configuration regularly
Store in Git repository
Document changes in commit messages

Backup strategy:

Weekly database backups (Postgres)
Export bot JSON files
Store in secure location (S3, etc.)

Update schedule:

Review flows monthly
Update copy/offers as needed
Test integrations after updates
Monitor error logs

12. Troubleshooting

12.1 Common Issues

Issue: "Typebot not loading"

Check network connectivity
Verify API host URL
Check browser console for errors

Issue: "Variables not saving"

Ensure "Save in results" is checked
Check variable name matches input block
Verify no JavaScript errors in Script blocks

Issue: "Webhook not triggering"

Test webhook URL in Postman/curl
Check authentication headers
Verify request format matches API

Issue: "Integration failing"

Check API credentials
Verify endpoint URLs
Review rate limits

12.2 Debugging

Enable debug mode:

Variables panel → Show debug info

Check logs:

# Docker logs
docker logs typebot-viewer

# Filter errors
docker logs typebot-viewer 2>&1 | grep ERROR

Test webhooks:

curl -X POST https://typebot.eastpay.com/api/webhook/abc123 \
  -H "Content-Type: application/json" \
  -d '{"test": "data"}'

13. Additional Resources

Last Updated: 2026-01-20
Maintained By: EastPay Development Team

TYPEBOT GUIDE

Table of Contents

1. Overview

1.1 What is Typebot?

1.2 Key Features

1.3 EastPay Integration

2. Getting Started

2.1 Accessing Typebot

2.2 Creating Your First Bot

3. Editor Basics

3.1 Canvas Navigation

3.2 Block Connections

3.3 Groups

4. Blocks

4.1 Bubbles (Display Information)

Text Bubble

Image Bubble

Video Bubble

Audio Bubble

Embed Bubble

4.2 Inputs (Collect User Data)

Text Input

Number Input

Email Input

Phone Input

Date Input

Buttons

File Upload

Payment Input

4.3 Logic Blocks

Set Variable

Condition

Redirect

Script

Jump

Wait

4.4 Integration Blocks

Webhook

HTTP Request

n8n Integration

OpenAI

Google Sheets

Send Email

5. Variables

5.1 Creating Variables

5.2 Using Variables

5.3 Built-in Variables

5.4 Prefilled Variables

5.5 Hidden Variables

6. Logic & Conditions

6.1 Conditional Branching

6.2 Complex Logic

6.3 Dynamic Content

7. Integrations

7.1 n8n Workflows

7.2 OpenAI Integration

7.3 Supabase Integration

7.4 Telegram Integration

8. Embedding

8.1 Standard Embed

8.2 Popup Embed

8.3 Bubble Embed

8.4 Embed Configuration

9. API Reference

9.1 Authentication

9.2 Start Chat Session

9.3 Send Answer

9.4 Get Results

9.5 Programmatic Bot Creation

10. Self-Hosting

10.1 Architecture

10.2 Docker Compose

10.3 Environment Variables

10.4 Coolify Deployment

11. Best Practices

11.1 Conversation Design

11.2 Variable Naming

11.3 Performance

11.4 Security

11.5 Analytics