TheLoops Widget Components

A comprehensive React component library for seamlessly integrating TheLoops widgets into your applications. This package provides ready-to-use components for embedding AI-powered widgets with customizable layouts and user information.

📋 Table of Contents

• Features
• Prerequisites
• Installation
• Quick Start
• Usage
  • React Integration
  • Component Props
  • Continue chat
  • Example
• Available Components
• Support

✨ Features

• 🚀 Easy-to-use React components for TheLoops widgets
• 🎨 Customizable layout and user information
• 🔗 Seamless integration with TheLoops workspaces
• 📦 Lightweight and performant
• 🔒 Secure token-based authentication
• 📱 Responsive design support

📦 Prerequisites

• Node.js (version 14 or higher)
• npm or yarn package manager
• React 16.14.0 or higher

🚀 Installation

Install the package using npm:

npm install theloops-widgets

Or using yarn:

yarn add theloops-widgets

🎯 Quick Start

import { AskIframeWidget } from 'theloops-widgets'

function App() {
  return (
    <AskIframeWidget 
      searchKeyword=""
      token="your-token"
      tokenType="JWE"
      userId="user-id"
      userName="User Name"
      userEmail="[email protected]"
      widgetId="your-widget-id"
      tenantId="your-tenant-id"
      width="1000px"
      height="900px"
    />
  )
}

📖 Usage

React Integration

Import the component in your React application:

import { AskIframeWidget } from 'theloops-widgets'

Note: The tokenType prop defaults to "JWE" which is the recommended authentication method. Only change this to "JWT" if your specific use case requires it.

Component Props

The AskIframeWidget component accepts the following required props:

| Prop | Type | Description | | -------------- | ------ | ---------------------------------------------- | | searchKeyword| string | Initial search keyword for the widget | | token | string | Authentication token for TheLoops API | | tokenType | string | Type of token - default is "JWE" (use "JWT" only if specifically required) | | userId | string | Unique identifier for the user | | userName | string | Display name of the user | | userEmail | string | Email address of the user | | widgetId | string | Unique identifier for the widget instance | | tenantId | string | Tenant identifier for multi-tenant setups | | width | string | Width of the widget (e.g., "1000px" or "100%")| | height | string | Height of the widget (e.g., "900px" or "100%")|

Optional props (chat continuation)

| Prop | Type | Default | Description | | --------------- | ----------------- | ------- | ----------- | | continueChat | boolean | false | When true and searchKeyword is present, new responses are appended and the chat continues in the same active conversation (see Continue chat). | | id | string | number | — | Optional reference (for example a ticket or thread id) for continuation context. |

Optional props (theming)

| Prop | Type | Default | Description | | ------- | ------ | ------- | ----------- | | theme | string | — | Widget theme (for example "dark" or "light"). Updates when the prop changes. |

Other optional props supported by the component include onMessage, data, layoutType, widgetWidth, widgetHeight, isDemo, and externalTicketId.

Continue chat

If continueChat is true and searchKeyword is provided, new responses are appended and the conversation continues in the same active thread instead of starting a separate one.

Example

Here's a complete example of how to use the AskIframeWidget component:

import React from 'react';
import { AskIframeWidget } from 'theloops-widgets'

function App() {
  return (
    <div className="app-container">
      <h1>My Application</h1>
      <AskIframeWidget 
        searchKeyword=""
        token="your-token"
        tokenType="JWE"
        userId="user-id"
        userName="User Name"
        userEmail="[email protected]"
        widgetId="your-widget-id"
        tenantId="your-tenant-id"
        width="1000px"
        height="900px"
      />
    </div>
  )
}

export default App;

Example with continuation enabled (optional id):

<AskIframeWidget
  continueChat={true}
  searchKeyword="Follow-up question text"
  id="optional-ticket-or-thread-id"
  token="your-token"
  tokenType="JWE"
  userId="user-id"
  userName="User Name"
  userEmail="[email protected]"
  widgetId="your-widget-id"
  tenantId="your-tenant-id"
  width="1000px"
  height="900px"
/>

Example with theme:

<AskIframeWidget
  theme="dark"
  token="your-token"
  tokenType="JWE"
  userId="user-id"
  userName="User Name"
  userEmail="[email protected]"
  widgetId="your-widget-id"
  tenantId="your-tenant-id"
  width="1000px"
  height="900px"
/>

🧩 Available Components

This package exports the following components:

• AskIframeWidget - Main widget component for embedding TheLoops Ask widget
• AskIframeWidgetLocal - Local version of the Ask widget for test environment

Import them as needed:

import { 
  AskIframeWidget, 
  AskIframeWidgetLocal,
} from 'theloops-widgets'

💡 Tips

• Make sure to provide valid credentials and widget IDs from your TheLoops workspace
• Default tokenType is "JWE" - use this unless you have a specific requirement to use "JWT"
• Use percentage-based widths and heights for responsive layouts
• Keep your tokens secure and never commit them to version control

🔧 Support

For issues, questions, or contributions, please contact the package maintainer or visit the repository.

📄 License

This package is licensed under the terms specified in the npm package.

Made with ❤️ by TheLoops team