@lucents-technology/copilot

🦜 Lucents Copilot Widget

Lucents Copilot is an AI assistant for your own product. It can be interated throughout your website to provide helpful conversation to your users.

👨‍💻 Getting Started

Install the package:

# yarn
yarn add @lucents-technology/copilot

Add CopilotWidget component to the root of your application

import React from 'react';
import { CopilotWidget } from '@lucents-technology/copilot';

function App() {
  return (
    <div>
      <CopilotWidget
        projectId="your_project_id"
        botName="name_of_your_copilot"
        productName="your_product_or_company_name"
        logo="https://your-product-or-company-logo.png"
        enableDisclaimer={true}
        backgroundColor="#your_color"
        textColor="#ffffff"
        externalId="your_end_user_id"
        blocked={false}
        blockedCallback={() => console.log('unblock')}
      />
    </div>
  );
}

export default App;

Now CopilotWidget is enabled throughout your entire application.

CopilotWidget Props

Prop	Type	Description
projectId	string	Your project id
botName	string	Name of your Copilot bot
productName	string	Name of your product or company
logo	string	URL of your product or company logo
enableDisclaimer	boolean	Enable or disable the disclaimer
backgroundColor	string	Background color of the widget
textColor	string	Text color of the widget
externalId	string	Unique identifier of the end user
blocked	boolean	Whether chat box of the widget should be opened
blockedCallback	function	Use this callback to call an action when the widget is blocked

Block and Unblock the widget

You can control whether the widget should be active or not. For example, you can require the user to do certain actions before the widget is active.

import React from 'react';
import { CopilotWidget } from '@lucents-technology/copilot';

function App() {
  const [blocked, setBlocked] = React.useState(true);

  return (
    <div>
      <CopilotWidget
        projectId="your_project_id"
        botName="name_of_your_copilot"
        productName="your_product_or_company_name"
        logo="https://your-product-or-company-logo.png"
        enableDisclaimer={true}
        backgroundColor="#your_color"
        textColor="#ffffff"
        externalId="your_end_user_id"
        blocked={blocked}
        blockedCallback={() => {
          // Your action here
          setBlocked(false);
          console.log('unblock')
        }}
      />
    </div>
  );
}

export default App;