Skip to Content
🎉 Welcome to Delivery Chat Documentation
V1How Delivery Chat Works

How Delivery Chat Works

What is Delivery Chat?

Delivery Chat is a customer support chat platform that lets you add a fully customizable chat widget to your website or application. Your visitors can start conversations directly on your site, and your team manages all conversations from a centralized admin dashboard.

Think of it like having a support team available 24/7 on your website, but you control when they’re available, how they look, and who can help your customers.

Real-World Example: Nike

Let’s walk through how a company like Nike would use Delivery Chat:

How Nike Uses Delivery Chat

1

Nike Signs Up

When Nike signs up for Delivery Chat:

  • They create an Organization called "Nike"
  • They get their own subdomain: nike.deliverychat.com (or they can use a custom domain)
  • They can start with a free plan and upgrade as they grow
2

Nike Creates Multiple Apps

Nike has different products and needs separate chat configurations. Each application represents a chat widget that can be embedded on different websites:

  • Nike Shoes App (domain: nike-shoes.com) - Different business hours, auto-responses, and brand colors
  • Nike Clothes App (domain: nike-clothes.com) - Different business hours, auto-responses, and brand colors
  • Nike Accessories App (domain: nike-accessories.com) - 24/7 availability, automated responses

Each app operates independently with its own website domain (where the widget is embedded), configuration settings, business hours, auto-responses, and widget appearance. Rate limits apply per organization. All apps are managed through the same organization subdomain (nike.deliverychat.com).

3

Nike Adds Team Members

Nike can add team members to help manage conversations:

  • Support managers who configure settings and manage conversations
  • Support agents who respond to customer questions
  • Each team member can be assigned to specific apps or work across all of them
4

Nike Integrates the Chat Widget

Nike can choose how to integrate the chat on their websites. The widget connects to their organization subdomain (nike.deliverychat.com) but is embedded on their own domains (e.g., nike-shoes.com, nike-clothes.com).

Option 1: Simple Iframe Embed (Nike Shoes Website)

<iframe
  src="https://nike.deliverychat.com/chat?appId=NIKE_SHOES_APP_ID"
  width="400"
  height="600"
  frameborder="0"
></iframe>

When to use: Quick setup, minimal customization needed, works everywhere

Example scenario: Nike embeds the chat widget on their nike-shoes.com website. The iframe connects to their organization subdomain (nike.deliverychat.com) and uses the Nike Shoes app configuration (business hours, auto-responses, branding).

Option 2: TypeScript SDK (Nike Mobile App)

import { DeliveryChat } from '@delivery-chat/sdk'
 
const chat = new DeliveryChat({
  appId: 'NIKE_CLOTHES_APP_ID',
  apiKey: 'NIKE_CLOTHES_API_KEY',
})
 
// Customize widget appearance
chat.setTheme({
  primaryColor: '#FF6B35',
  position: 'bottom-right',
  logo: 'https://nike.com/logo.png'
})
 
// Listen to events
chat.on('message', (message) => {
  console.log('New message:', message)
})
 
chat.init()

When to use: Need programmatic control, custom UI, event handling, or integration with existing React/Vue apps

Example scenario: Nike Clothes mobile app wants to show chat as a floating button that opens a custom modal. They use the SDK to control when it appears, customize the UI, and handle events.

Option 3: REST API (Nike Custom Support System)

# Send a message
curl -X POST https://api.deliverychat.com/v1/messages \
  -H "Authorization: Bearer NIKE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "appId": "NIKE_ACCESSORIES_APP_ID",
    "visitorId": "visitor_123",
    "message": "Hello, I need help with my order"
  }'
 
# Get conversation history
curl -X GET https://api.deliverychat.com/v1/conversations/conv_123 \
  -H "Authorization: Bearer NIKE_API_KEY"

When to use: Building a completely custom chat interface, server-side integration, or integrating with existing CRM/support systems

Example scenario: Nike Accessories has an existing support system and wants to integrate Delivery Chat’s backend. They use the REST API to send/receive messages through their own UI.

Visitors Use the Chat

1

Visitor lands on nike.com/shoes

  • The chat widget loads (using Nike Shoes app configuration)
  • Widget shows Nike Shoes branding (colors, logo)
  • If it's outside business hours (9 AM - 6 PM EST), an auto-response is shown
2

Visitor clicks the chat widget

  • A conversation starts
  • Visitor can type messages
  • Messages appear in real-time in Nike's admin dashboard
3

Nike team member responds

  • Team member sees the conversation in their dashboard
  • They respond through the admin interface
  • Visitor sees the response immediately
  • Conversation history is saved
4

Visitor returns later

  • Previous conversation is still available
  • Visitor can continue where they left off
  • Nike team can see full conversation history

Key Concepts

Organizations vs Applications

Organizations vs Applications

Organization (Nike)
The company account
  • •Gets one subdomain (e.g., nike.deliverychat.com)
  • •Contains multiple applications
  • •Has team members
  • •Billing and account management
Application (Nike Shoes, Nike Clothes)
A specific chat widget instance
  • •Has its own website domain (where widget is embedded)
  • •Has independent configuration
  • •Shares org rate limits
  • •Can have different settings than other apps in the same organization

Why this matters: Nike can have one account but manage multiple chat widgets with different configurations and settings for different products or regions.

Configuration Per Application

Each application (Nike Shoes, Nike Clothes, etc.) can have completely different settings:

Widget Appearance:

  • ✓
    Colors- primary, secondary, background
  • ✓
    Logo
  • ✓
    Position- bottom-right, bottom-left, etc.
  • ✓
    Size and styling

Business Hours:

  • ✓
    Nike Shoes- 9 AM - 6 PM EST, Monday-Friday
  • ✓
    Nike Clothes- 8 AM - 8 PM EST, Monday-Saturday
  • ✓
    Nike Accessories- 24/7

Auto-Responses:

  • ✓
    Nike Shoes- "Thanks for contacting Nike Shoes! We're here to help with all your shoe questions."
  • ✓
    Nike Clothes- "Welcome to Nike Clothes support! How can we help you today?"
  • ✓
    Nike Accessories- Different message for each app

Rate Limiting:

  • ✓
    Per organization- Limits apply across all apps (5–50 req/sec, 500–10,000/hour by plan)
  • ✓
    ENTERPRISE- Custom limits configurable in Settings → Rate Limits

Features:

  • ✓
    File uploads- Some apps might have file uploads enabled
  • ✓
    Typing indicators- Some might have typing indicators
  • ✓
    Read receipts- Some might have read receipts
  • ✓
    Independent control- Each app can enable/disable features independently

Edge Cases and Examples

Example 1: Multiple Brands Under One Organization
Scenario:
Nike owns Converse and wants to manage both brands separately.
Solution:
  • Create one Organization: "Nike Inc"
  • Create two Applications: "Nike" and "Converse"
  • Each app has its own domain, branding, and settings
  • Team can manage both from one dashboard
  • Team members can be assigned to specific apps or work across both
Example 2: Different Business Hours Per Region
Scenario:
Nike has global operations and needs different hours for US, Europe, and Asia.
Solution:
  • Create three Applications: "Nike US", "Nike Europe", "Nike Asia"
  • Each app has different business hours matching their timezone
  • Auto-responses can be in different languages
  • Team members can be assigned to specific regions
  • All managed from one organization account
Example 3: Rate Limiting for High Traffic Events
Scenario:
Nike launches a new shoe and expects 10x normal traffic.
Solution:
  • Configure custom rate limits in Settings → Rate Limits (ENTERPRISE)
  • Add more team members to handle the load
  • Configure auto-responses for common questions
  • Monitor traffic through the dashboard
  • Adjust settings in real-time without affecting other apps
Example 4: Gradual Rollout
Scenario:
Nike wants to test chat on one product before rolling out to all products.
Solution:
  • Start with one Application (Nike Shoes)
  • Test with a small team
  • Once proven, create additional apps (Nike Clothes, Nike Accessories)
  • Copy successful configurations to new apps
  • Scale team as needed
Example 5: Custom Integration for Mobile App
Scenario:
Nike's mobile app needs chat but wants it to look native, not like a web widget.
Solution:
  • Use the TypeScript SDK instead of iframe
  • Build custom UI components that match the app design
  • Use SDK events to integrate with app navigation
  • Maintain all Delivery Chat features (history, team management, etc.)
  • Still managed through the same admin dashboard

Data Isolation and Security

Each organization’s data is completely isolated:

  • Nike cannot see Adidas’s conversations
  • Each app’s data is separate
  • Team members can only access apps they’re assigned to
  • All data is encrypted and secure
  • GDPR and compliance ready

Next Steps

Now that you understand how Delivery Chat works:

Last updated on
ApplicationsChat Widget Integration