🚀 Quick Start

Get started with NabliTalks SDKs in a few simple steps.

  1. Create an account at the Admin Console.
  2. Add FAQs and documentation in the Knowledge Section.
  3. Generate API keys from the Credentials page.
  4. Configure allowed origins in the Whitelist settings.
  5. Integrate the Backend SDK into your server application.
  6. Embed the Frontend SDK into your website for user interaction.

🖥️ Backend SDK (JavaScript)

The Backend SDK enables server-side integration with NabliTalks. For detailed documentation, visit the NabliTalks Backend SDK or NabliTalks.

Installation

Install the SDK using npm:

npm install nablitalks-backend-sdk

Basic Usage

Initialize the SDK and create a customer ID and token with error handling:

const NabliTalksSDK = require('nablitalks-backend-sdk');

const sdk = new NabliTalksSDK('your-access-key', 'your-access-secret');

async function example() {
  try {
    const customer = await sdk.createCustomerId();
    console.log('Customer ID:', customer.id);
    
    const tokenResponse = await sdk.getToken(customer.id);
    console.log('Token:', tokenResponse.token);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

example();

TypeScript Usage

Use the SDK with TypeScript for type-safe integration:

import NabliTalksSDK from 'nablitalks-backend-sdk';

const sdk = new NabliTalksSDK('your-access-key', 'your-access-secret');

async function example(): Promise {
  try {
    const customer: Customer = await sdk.createCustomerId();
    console.log('Customer ID:', customer.id);
    
    const tokenResponse: TokenResponse = await sdk.getToken(customer.id);
    console.log('Token:', tokenResponse.token);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

example();

Express.js Example

Integrate with an Express.js server to create customers and retrieve tokens:

const express = require('express');
const NabliTalksSDK = require('nablitalks-backend-sdk');

const app = express();
const sdk = new NabliTalksSDK('your-access-key', 'your-access-secret');

app.use(express.json());

app.post('/create-customer', async (req, res) => {
  try {
    const customer = await sdk.createCustomerId();
    res.json(customer);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.get('/get-token/:customerId', async (req, res) => {
  try {
    const tokenResponse = await sdk.getToken(req.params.customerId);
    res.json(tokenResponse);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

API Reference

Key types and methods for the Backend SDK:

Types

interface Customer {
  id: string;
  tenantId: string;
  createdAt: string;
}

interface TokenResponse {
  token: string;
}

Constructor

new NabliTalksSDK(accessKey: string, accessSecret: string)

Methods

  • createCustomerId(): Promise<Customer> - Creates a new customer ID.
  • getToken(customerId: string): Promise<TokenResponse> - Retrieves a chat token for the given customer ID.

License

MIT

🌐 Frontend SDK (JavaScript)

The Frontend SDK provides components for embedding chat interfaces. See the NabliTalks Frontend SDK for more details.

Installation

Install via npm or yarn, and include the CSS bundle:

npm install nablitalks-frontend-sdk
# or
yarn add nablitalks-frontend-sdk
import "nablitalks-frontend-sdk/dist/index.css";

Configuration

Set up the configuration object for components and clients:

const config = {
  getNewCustomerId: async () => {
    const res = await fetch("/create-customer", { method: "POST" });
    const data = await res.json();
    return data.customerId || data.id;
  },
  getNewToken: async (customerId) => {
    const res = await fetch(`/get-token/${customerId}`);
    const data = await res.json();
    return data.token;
  },
};

Full Page Chat

Render a full-page chat interface using ChatInterface:

<div style={{ width: "100%", height: "100vh" }}>
  <ChatInterface config={config} style={{ height: "100%" }} />
</div>

Floating Chat Launcher

Add a floating button to open a chat drawer:

<FloatingChatLauncher
  config={config}
  position="right"
  buttonLabel="💬"
/>

Using NablitalksClient

Interact with the client API to manage sessions and messages:

import NablitalksClient from "nablitalks-frontend-sdk/client";

const client = new NablitalksClient(config);

async function startChat() {
  const session = await client.createSession();
  const response = await client.sendQuery("Hello!");
  console.log(response);
}