smc-chatbot

v1.3.2

Published

10 months ago

React wrapper for SMC Chat Widget

0High
0Medium
0Low

tarun2000

SMC Chatbot SDK

A React component for integrating the Stoxkart Chat Widget into your web application. This SDK provides a customizable and easy-to-use chat interface for seamless user interaction.

[![NPM Version](https://img.shields.io://www.npmjs.com/package/s Features

Easy Integration: Embed the Stoxkart chat widget into your React application with minimal setup.
Customizable Appearance: Modify themes, colors, icons, and text to match your branding.
Secure Session Handling: Manage user sessions securely with dynamic configuration.
Responsive Design: Optimized for all devices and screen sizes.
Real-time Communication: Enable interactive conversations with users.

Installation

Install the package via npm:

npm install smc-chatbot

Usage Example

Here’s how to integrate the chat widget into your React app:

import { SmcChatWidget } from 'smc-chatbot';

function App() {
  const session = {
    "x-platform-agent": "web",
    "x-prompt-session-attribute": {
      oauthToken: "your-oauth-token",
      clientCode: "your-client-code"
    },
    "x-session-attribute": {
      oauthToken: "your-oauth-token",
      clientCode: "your-client-code"
    },
    "x-api-key": "your-api-key"
  };

  return (
          <SmcChatWidget 
        userName="You"
        headerIcon="logo"
        headerText="Stoxkart Assistant"
        theme="light"
        welcomeMessage="Welcome to Stoxkart! How can I help you today?"
        startChatLogo="https://cdn-icons-png.flaticon.com/512/17799/17799803.png"
        primaryColor="#0ca750"
        secondaryColor="gray"
        position="right"
        apiUrl="https://ysq3ajcubf.execute-api.ap-south-1.amazonaws.com/prod/chat"
        inputPlaceholder="Type your Question here..."
        session={session}
      /> 
  );
}

Props Description

| Prop | Type | Required | Default | Description | |-------------------|-------------------|----------|-----------------------|-----------------------------------------------------------------------------| | apiUrl | string | Yes | - | API endpoint for chat interactions. | | session | object | Yes | - | Session configuration object. See "Session Configuration" below. | | userName | string | No | "You" | Display name for the user in the chat. | | headerIcon | string | No | "" | URL for an icon displayed in the header. | | headerText | string | No | "Chatbot Assistant" | Text displayed in the widget header. | | theme | "light" \| "dark" | No | "light" | Theme of the chat widget. | | welcomeMessage | string | No | "Welcome..." | Initial message displayed by the bot. | | startChatLogo | string | No | Default Logo | URL for the logo displayed on the chat toggle button. | | primaryColor | string | No | "#2196f3" | Primary color for widget elements. | | secondaryColor | string | No | "#1976d2" | Secondary color for widget elements. | | position | "left" \| "right"| No | "right" | Position of the widget on the screen. | | inputPlaceholder| string | No | "Type your message..."| Placeholder text in the input field. |

Session Configuration

The session object is essential for authentication and managing user sessions securely. Below is its structure:

interface Session {
  "x-platform-agent": string; // Indicates the platform (e.g., "web", "ios", or "android").
  "x-prompt-session-attribute": {
    oauthToken: string;       // OAuth token for authentication.
    clientCode: string;       // Unique identifier for the client.
  };
  "x-session-attribute": {
    oauthToken: string;       // OAuth token specific to the session.
    clientCode: string;       // Session-specific client identifier.
  };
  "x-api-key": string;        // API key for secure communication.
}

Explanation of Each Variable

x-platform-agent: Specifies the platform initiating the request (e.g., "web").
x-prompt-session-attribute.oauthToken: Token used to authenticate requests at a global level.
x-prompt-session-attribute.clientCode: A unique code identifying the client making requests.
x-session-attribute.oauthToken: Token specific to an individual session, ensuring secure communication during active chats.
x-session-attribute.clientCode: Identifier tied to a specific session instance.
x-api-key: API key required to authorize requests to the backend server.

Framework Support

Next.js (App Router)

'use client';
import { SmcChatWidget } from 'smc-chatbot';

Create React App

import { SmcChatWidget } from 'smc-chatbot';

Vite

import { SmcChatWidget } from 'smc-chatbot';

Features

🎨 Theme Support: Choose between light and dark themes to suit your application design.
📱 Responsive Design: Adapts seamlessly across devices of all sizes.
💬 Real-time Chat: Enables dynamic and interactive conversations with users.
🔒 Secure Sessions: Ensures data privacy with robust authentication mechanisms.
📍 Customizable Positioning: Place the chat widget on either side of the screen.
🌈 Customizable Colors and Icons: Tailor colors and icons to match your brand identity.

Browser Compatibility

The SMC Chatbot SDK is compatible with modern browsers:

Chrome (latest version)
Firefox (latest version)
Safari (latest version)
Edge (latest version)

Contributing

We welcome contributions! Please read CONTRIBUTING.md for details on our code of conduct and how to submit pull requests.

License

This project is licensed under the MIT License - see LICENSE file for more details.

Support

For support, contact us at [email protected] or open an issue on our GitHub issue tracker.

This README provides a comprehensive guide for developers using the SMC Chatbot SDK, explaining each variable, prop, and configuration option in detail while maintaining clarity and professionalism.

Citations: [1] https://ppl-ai-file-upload.s3.amazonaws.com/web/direct-files/47227115/e00c47eb-d16a-4ce2-9716-da5d588fdc1c/paste.txt [2] https://cdn-icons-png.flaticon.com/512/17799/17799803.png [3] https://developers.google.com/workspace/chat/identify-reference-users [4] https://smartclient.com/smartgwt-6.0/javadoc/com/smartgwt/client/widgets/HeaderControl.html [5] https://developers.google.com/workspace/chat/create-messages [6] https://mui.com/material-ui/customization/css-theme-variables/usage/ [7] https://developers.google.com/business-communications/business-messages/reference/business-communications/rest/v1/WelcomeMessage [8] https://www.smashingmagazine.com/2020/08/application-color-schemes-css-custom-properties/ [9] https://docs.oracle.com/cd/E19199-01/816-6743-10/AuthCst.html [10] https://www.infragistics.com/community/forums/f/ultimate-ui-for-wpf/43656/dynamically-setting-the-header-icon-on-a-dialog-defined-in-a-control-template [11] https://api.slack.com/reference/surfaces/formatting [12] https://cloud.google.com/dotnet/docs/reference/Google.Apps.Script.Type/latest/Google.Apps.Script.Type.LayoutProperties [13] https://en.wikipedia.org/wiki/X-Frame-Options [14] https://mui.com/system/experimental-api/css-theme-variables/ [15] https://learn.microsoft.com/en-us/azure/bot-service/bot-builder-send-welcome-message?view=azure-bot-service-4.0&tabs=csharp [16] https://api.slack.com/messaging/modifying [17] https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/ [18] https://cloud.google.com/dotnet/docs/reference/Google.Apps.Script.Type/2.2.0/Google.Apps.Script.Type.LayoutProperties [19] https://developer.android.com/reference/android/telephony/SmsManager.html [20] https://learn.microsoft.com/en-us/dynamics365/customer-service/develop/customize-chat-widget [21] https://platform.text.com/docs/extending-chat-widget/javascript-api/v1.0 [22] https://mui.com/material-ui/customization/css-theme-variables/configuration/