Integrations

Integrate ChatIQ chatbots into your website, application, or platform. Choose the integration method that best fits your stack.

Choose Your Integration Path

Level 1: Public Bot Page (Zero Setup)

Share your bot's public page URL and start collecting conversations immediately.

https://bot.chatiq.io/your-bot-slug

• Best for: Sharing a chatbot fast, no website changes
• Setup time: ~1 minute

Level 2: Embeddable Widget (Fastest Embed)

Use our embeddable widget to add ChatIQ to any site with a single script tag. Great for marketing sites and quick launches.

• Best for: Websites, landing pages, blogs
• Setup time: ~5 minutes

Find the embed helper in your dashboard:

/dashboard/bots/your-bot-slug/embed

Level 3: Platform/Framework Integration

Use API keys + a server-side proxy and build a custom UI with your framework (Next.js, React, WordPress, Shopify).

• Best for: Apps that need custom UI or data flow
• Setup time: 10-30 minutes

Level 4: Direct API Access

Call the API directly from your backend to build any experience you want.

• Best for: Full control and custom products
• Setup time: Varies

Security note: Keep API keys on the server for Levels 3 and 4.

Available Integrations

Framework Integrations

• Next.js - Complete guide for Next.js 16 App Router
• React - React component integration (coming soon)
• Vue.js - Vue.js integration (coming soon)

Platform Integrations

• Website/Vanilla JS - Embed in any website with vanilla JavaScript
• WordPress - WordPress plugin integration (coming soon)
• Shopify - Shopify app integration (coming soon)

Messaging Channels

• Instagram - Connect Instagram messaging to a bot
• LINE - Connect a LINE Official Account to a bot

API Integration

• REST API - Direct API integration for any platform
• Streaming API - Real-time streaming responses

Quick Comparison

Getting Started

1. Get your API key from the dashboard
2. Choose your integration method based on your stack
3. Follow the guide for your chosen platform
4. Test your integration before going live

Common Integration Patterns

Pattern 1: Server-Side Proxy (Recommended)

Use a backend endpoint to proxy requests and keep API keys secure:

// Your backend API route
POST /api/chatbot
  → Forwards to ChatIQ API
  → Returns response to client

Benefits:

• API key stays on server
• No CORS issues
• Can add custom logic

Pattern 2: Direct API Call

Call ChatIQ API directly from your backend:

// Server-side only
const response = await fetch('https://chatiq.io/api/chat', {
  headers: {
    'Authorization': `Bearer ${API_KEY}`,
  },
  // ...
});

Benefits:

• Simple setup
• Full control
• Works from any backend

Pattern 3: Client-Side Widget

One-line embed script for websites (use a widget-only key with domain restrictions):

<script
  src="https://www.chatiq.io/widget.js"
  data-bot-slug="your-bot-slug"
  data-api-key="your-widget-only-key"
  async
></script>

Benefits:

• Easiest setup
• No code required
• Automatic updates

Security Best Practices

1. Do not expose full-access keys in client-side code
2. Use widget-only keys for script tags and restrict allowed domains
3. Use server-side proxy for custom UIs or sensitive workflows
4. Implement rate limiting on your proxy
5. Validate user input before sending to API

Need Help?

• Documentation: Browse integration guides above
• API Reference: Complete API Docs
• Support: support@chatiq.io

Coming Soon

• React integration guide
• Vue.js integration guide
• WordPress plugin
• Shopify app
• Mobile SDKs (iOS/Android)