Developer Documentation

Build conversational experiences that convert

Complete SDK, API reference, and integration guides for developers building the next generation of conversational interfaces.

Start Building Free

<5min

Setup Time

Conversion Rate

$0.30

Per Lead

∞

API Calls

Get started in 3 steps

From signup to live conversational flows in under 5 minutes

Sign Up

Create your account at app.dialogkit.io/signup. No credit card required.

Get Started

Build Your Flow

Use our visual drag-and-drop builder to create conversational experiences.

Open Builder

Embed & Launch

Add one script tag to your website and start collecting qualified leads.

html

<script src="https://cdn.dialogkit.io/chatbox-sdk.min.js"
        data-api-key="YOUR_API_KEY"
        data-flow-id="YOUR_FLOW_ID">
</script>

Developer Resources

Everything you need to integrate DialogKit into your applications

SDK Reference

Complete API reference for our JavaScript SDK with examples and best practices.

JavaScript

TypeScript

React

Vue

javascript

// Initialize DialogKit
const dialogkit = new DialogKit({
  apiKey: 'YOUR_API_KEY',
  flowId: 'YOUR_FLOW_ID',
  theme: 'auto' // 'light' | 'dark' | 'auto'
});

// Start conversation
dialogkit.start();

REST API

Programmatic access to flows, conversations, and analytics data.

GET/api/v1/conversations

POST/api/v1/webhooks

Framework Integrations

Step-by-step guides for popular frameworks and platforms.

React/Next.js

Vue.js

WordPress

Webflow

Testing & Debugging

Tools and best practices for testing your conversational flows.

• Flow simulator

• Debug mode

• Analytics dashboard

Webhooks & Events

Real-time notifications for conversation events and lead captures.

json

// Webhook payload
{
  "event": "conversation.completed",
  "data": {
    "flowId": "flow_123",
    "variables": {
      "email": "user@example.com",
      "name": "John Doe"
    }
  }
}

Real-time Analytics

Track conversion rates, user behavior, and flow performance with detailed analytics.

Completion Rate94.2%

Avg. Session2:34

Conversion Rate8.1%

Code Examples

Essential implementations for getting started

React Integration

React

TypeScript

LeadCapture.tsx

tsx

import { useEffect, useRef } from 'react';

export default function LeadCapture() {
  const dialogkitRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.dialogkit.io/chatbox-sdk.min.js';
    script.onload = () => {
      dialogkitRef.current = new window.DialogKit({
        apiKey: 'YOUR_API_KEY',
        flowId: 'lead-capture-flow',
        onComplete: (data) => {
          console.log('Lead captured:', data);
          // Handle the captured data
        }
      });
    };
    document.head.appendChild(script);

    return () => {
      if (dialogkitRef.current) {
        dialogkitRef.current.destroy();
      }
    };
  }, []);

  return (
    <div className="min-h-screen">
      <div id="dialogkit-container" className="max-w-md mx-auto py-16">
        {/* DialogKit form renders here */}
      </div>
    </div>
  );
}

API Integration

Node.js

Webhook

api/webhooks/route.ts

typescript

// POST /api/webhooks/dialogkit
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const payload = await request.json();

  if (payload.event === 'conversation.completed') {
    const { variables } = payload.data;

    // Validate required fields
    if (!variables.email) {
      return NextResponse.json(
        { error: 'Email is required' },
        { status: 400 }
      );
    }

    // Save to database
    await db.leads.create({
      data: {
        email: variables.email,
        name: variables.name,
        source: 'dialogkit'
      }
    });

    return NextResponse.json({ success: true });
  }

  return NextResponse.json({ received: true });
}

HTML Integration

HTML

Vanilla JS

index.html

html

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to my site</h1>

  <script src="https://cdn.dialogkit.io/chatbox-sdk.min.js"
          data-api-key="YOUR_API_KEY"
          data-flow-id="YOUR_FLOW_ID">
  </script>
</body>
</html>

WordPress Integration

WordPress

PHP

functions.php

php

<?php
// functions.php
function add_dialogkit_script() {
    ?>
    <script src="https://cdn.dialogkit.io/chatbox-sdk.min.js"
            data-api-key="<?php echo get_option('dialogkit_api_key'); ?>"
            data-flow-id="<?php echo get_option('dialogkit_flow_id'); ?>">
    </script>
    <?php
}
add_action('wp_footer', 'add_dialogkit_script');
?>

Ready to build something amazing?

Join thousands of developers building conversational experiences

Start Building Free Read Full Docs