Zoho Cliq Chat Component

A React component library for Zoho Cliq chat: login, channels, and messaging.

Features

• Zoho Cliq authentication (login)
• List channels
• View and send/respond to chat messages

Installation

npm install zoho-cliq-chat-component

Usage

import { CliqProvider, CliqLogin, CliqChannels, CliqChat } from 'zoho-cliq-chat-component';

<CliqProvider clientId="YOUR_CLIENT_ID">
  <CliqLogin />
  <CliqChannels />
  <CliqChat channelId="CHANNEL_ID" />
</CliqProvider>

ZohoCliqClient SDK Usage

Installation

npm install zoho-cliq-js

Authentication

import { ZohoCliqClient } from 'zoho-cliq-js';

const cliq = new ZohoCliqClient({
  clientId: 'YOUR_CLIENT_ID',
  clientSecret: 'YOUR_CLIENT_SECRET',
  redirectUri: 'YOUR_REDIRECT_URI',
});

// Get OAuth URL for login
const url = cliq.getAuthUrl();
// After login, set access token
cliq.setAccessToken('YOUR_ACCESS_TOKEN');

List Channels

const { data: channels, error } = await cliq.channels().list({ limit: 20 });

Read Messages from Channel

const { data: messages, error } = await cliq.messages().list('CHAT_ID', { limit: 50 });

Send Message (Text)

const { data: sent, error } = await cliq.messages().send('CHAT_ID', 'Hello world!');

Send Message (Attachment)

const attachment = {
  name: 'file.jpg',
  type: 'file',
  contentType: 'image/jpeg',
  dimensions: { height: 100, width: 100, size: 12345 }
};
const { data: sent, error } = await cliq.messages().send('CHAT_ID', 'Here is a file', attachment);

Error Handling

All methods return { data, error }. Check error before using data.

OAuth Redirect Handling

After the user logs in and is redirected back to your app, use these helpers:

1. Parse the code from the URL

const code = ZohoCliqClient.parseAuthCodeFromUrl();

2. Exchange the code for an access token

const { access_token } = await cliq.exchangeCodeForToken(code);
ZohoCliqClient.setStoredToken(access_token);
cliq.setAccessToken(access_token);

3. Use the stored token for future API calls

const token = ZohoCliqClient.getStoredToken();
if (token) cliq.setAccessToken(token);

4. To log out

ZohoCliqClient.clearStoredToken();

Environment Variables

Set these environment variables in your project to use the SDK securely:

• ZC_CLIQ_CLIENT_ID — Your Zoho Cliq OAuth client ID
• ZC_CLIQ_CLIENT_SECRET — Your Zoho Cliq OAuth client secret
• ZC_CLIQ_REDIRECT_URI — Your registered OAuth redirect URI

Example .env file:

ZC_CLIQ_CLIENT_ID=your_client_id
ZC_CLIQ_CLIENT_SECRET=your_client_secret
ZC_CLIQ_REDIRECT_URI=https://yourapp.com/oauth/callback

You can then load these in your code (Node.js example):

const cliq = new ZohoCliqClient({
  clientId: process.env.ZC_CLIQ_CLIENT_ID,
  clientSecret: process.env.ZC_CLIQ_CLIENT_SECRET,
  redirectUri: process.env.ZC_CLIQ_REDIRECT_URI,
});

License

MIT