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
  • 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%")|

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;

🧩 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