DashboardDocsCustom Code

Integrate with Custom Code

Add Zagel AI to any website or app using our SDK and REST API

Any platform

REST API

For Custom-Built Websites and Apps

Whether you're running a custom e-commerce platform, a SPA built with React, or a traditional server-rendered site, Zagel AI can integrate with any technology stack. Choose the approach that fits your setup best.

Quick Start: Chat Widget

The fastest way to add Zagel AI to your site

The simplest integration is embedding our chat widget. Just add one line of code and your visitors will have access to your AI-powered chatbot instantly.

Simplest Integration (One Line)

html

<script src="https://cdn.zagel-ai.com/widget.js" data-api-key="YOUR_API_KEY"></script>

Framework-Specific Guides

html

<!-- Add before closing </body> tag -->
<script
  src="https://cdn.zagel-ai.com/widget.js"
  data-api-key="YOUR_API_KEY"
  data-position="bottom-right"
  data-theme="auto"
></script>

REST API Integration

Full control over product sync, chat, and webhooks

For deeper integration, use our REST API to sync products, manage conversations, and receive real-time updates via webhooks. All API requests require authentication via JWT token or API key.

Available Endpoints

MethodEndpointDescription

POST/api/v1/productsCreate a product

POST/api/v1/products/syncBatch sync products

GET/api/v1/productsList all products

DELETE/api/v1/products/:idDelete a product

POST/api/v1/chat/startStart a conversation

POST/api/v1/chat/messageSend a chat message

POST/api/v1/webhooksRegister a webhook

Sync Products via API

javascript

// Sync your products via REST API
const response = await fetch('https://api.zagel-ai.com/api/v1/products/sync', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_JWT_TOKEN',
  },
  body: JSON.stringify({
    products: [
      {
        externalId: 'prod_001',
        name: 'Premium Wireless Headphones',
        description: 'High-quality noise-canceling headphones...',
        price: 299.99,
        currency: 'SAR',
        category: 'Electronics',
        imageUrl: 'https://example.com/headphones.jpg',
        inStock: true,
        metadata: {
          brand: 'AudioPro',
          color: 'Black',
          weight: '250g',
        },
      },
    ],
  }),
});

Register Webhooks

Set up webhooks to receive real-time notifications when events happen in Zagel, such as new conversations, messages, or order updates.

javascript

// Register a webhook to receive events
const response = await fetch('https://api.zagel-ai.com/api/v1/webhooks', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_JWT_TOKEN',
  },
  body: JSON.stringify({
    url: 'https://your-site.com/api/zagel-webhook',
    events: [
      'conversation.started',
      'conversation.ended',
      'message.received',
      'order.created',
    ],
  }),
});

API Key Management

Creating API Keys

1Go to your Zagel Dashboard
2Navigate to API Keys section
3Click "Create New API Key"
4Select required scopes (chat, products, webhooks)
5Copy and securely store the key

Security Best Practices

Never expose API keys in client-side code (use the widget's data-api-key for chat only)
Use environment variables for server-side API keys
Rotate keys periodically and revoke unused ones
Use the minimum required scopes for each key
Monitor API key usage in your dashboard

Authentication Methods

API Key (X-API-Key header)

Best for: Chat widget, server-to-server integrations

javascript

// Using API Key
fetch('https://api.zagel-ai.com/api/v1/chat/start', {
  headers: {
    'X-API-Key': 'YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
});

JWT Bearer Token

Best for: Dashboard integrations, full API access

javascript

// Using JWT Token
fetch('https://api.zagel-ai.com/api/v1/products', {
  headers: {
    'Authorization': 'Bearer YOUR_JWT_TOKEN',
    'Content-Type': 'application/json',
  },
});

Need Help?

Need help with your custom integration? Our developer support team is ready to assist.

Contact Support Manage API Keys