Integrate Your AI Agent

Create, connect, and deploy powerful AI agents with our intuitive node-based interface. From simple automations to blockchain integrations, without writing a single line of code.

Read Docs
1

Include the Script

Add the Deforge widget script to your HTML page before the closing </body> tag.

Copy
<script src="chatbot.js"></script>
2

Initialize Widget

Create a new widget instance using your unique workflowId. You can customize the appearance using the options below.

Copy
const widget = new ChatbotWidget({
  workflowId: "YOUR_WORKFLOW_ID",

  // ⚡️ ZERO-LATENCY BRANDING
  // Set these to load your branding immediately
  defaultCompanyName: "Acme Corp",
  defaultCompanyDescription: "Support Team",
  defaultCompanyLogo: "Your SVG Logo String",

  // Optional Configuration
  theme: "light", // "light" | "dark" | "system"
  position: "bottom-right", // "bottom-left" | "top-right" etc.
  enablePersistence: true, // Save history

  // Style Overrides
  styles: {
    primaryColor: "#6366f1", // Brand color
    userBubbleColor: "#6366f1", // User message bg
    borderRadius: "12px", // Border radius for bubbles and other elements
    launcherSize: "60px", // Size of the launcher button
    fontFamily: "Inter, sans-serif" // Font family for text
  }
});
3

Configure Your Workflow

In your Deforge dashboard, configure the following settings to personalize the experience:

Copy
// Configuration Checklist

• Company Name & Description
• Company Logo (SVG format)
• Welcome Message
• AI Agent Logic & Responses
• API Integrations
4

Deploy & Test

Once the script is active, your agent will automatically fetch configurations, generate unique chat sessions, and maintain conversation history.

Core Capabilities

🤖 AI-Powered Responses

Connect your custom AI workflows built in Deforge to provide intelligent, context-aware responses to your users.

  • Visual workflow builder
  • Custom AI logic
  • Context-aware

🔧 No-Code Configuration

Set up your AI agent through Deforge's visual interface without writing any code. Just drag, drop, and connect nodes.

  • Visual node editor
  • Drag & drop
  • Real-time testing

🎨 Custom Branding

Automatically fetches your company branding from Deforge workflows. Logo, colors, and messaging all configured in one place.

  • Company logo
  • Custom welcome
  • Responsive

💾 Persistent Sessions

Automatic chat session management with localStorage persistence. Users can continue conversations across page reloads.

  • Unique chat IDs
  • Session recovery

🔌 Server Integration

Seamlessly connects to Deforge servers for workflow validation, configuration fetching, and message processing.

  • Validation
  • Real-time config
  • Error handling

📊 Analytics & Tracking

Built-in analytics for monitoring chat interactions, user engagement, and AI agent performance.

  • Event tracking
  • Engagement metrics
  • Callbacks