Adding Chat to Your App: A Practical Guide

Step-by-step tutorial for embedding messaging functionality into your web application.

Why Add Messaging?

In-app messaging can: - Enable customer support without leaving your app - Allow user-to-user communication - Send notifications and updates - Build community features

Option 1: Iframe Embed

The simplest approach is embedding our chat widget:

Option 2: API Integration

```javascript const response = await fetch('https://api.kanvo.app/v1/conversations', { method: 'POST', headers: { 'Authorization': 'Bearer YOUR_API_KEY', 'Content-Type': 'application/json' }, body: JSON.stringify({ title: 'Support Chat', participants: ['user_123', 'support_team'] }) });

Initialize a Conversation

```javascript const response = await fetch('https://api.kanvo.app/v1/conversations', { method: 'POST', headers: { 'Authorization': 'Bearer YOUR_API_KEY', 'Content-Type': 'application/json' }, body: JSON.stringify({ title: 'Support Chat', participants: ['user_123', 'support_team'] }) });

Send Messages

``javascript await fetch('https://api.kanvo.app/v1/messages', { method: 'POST', headers: { 'Authorization': 'Bearer YOUR_API_KEY', 'Content-Type': 'application/json' }, body: JSON.stringify({ conversation_id: conversation.id, content: 'Hello! How can I help?', sender: 'support_team' }) }); ``

Receive Messages via Webhooks

Configure a webhook endpoint to receive new messages:

Best Practices

Don't interrupt core workflows with chat popupsAllow users to minimize or close the chatShow unread message counts

User Experience

Don't interrupt core workflows with chat popupsAllow users to minimize or close the chatShow unread message counts

Performance

Load chat components lazilyDon't block page load for chatCache conversation lists

Security

Never expose API keys in client-side codeUse your backend as a proxy for sensitive operationsValidate user permissions before sending messages

Common Use Cases

Route user questions to your support team with full context about their session.

Customer Support

Route user questions to your support team with full context about their session.

In-App Notifications

Send messages about order updates, account changes, or important alerts.

Community Features

Enable users to message each other or participate in group discussions.

Getting Started

Create a Kanvo accountGet your API key from the dashboardChoose your integration methodTest in developmentDeploy to production

Kanvo Team

Writes here about what Kanvo is building and why — the send path, the evidence it leaves, and the decisions behind both.