@inleads/inleads-widgets/README.md

Widgets for chatbot, WhatsApp, nps, contact-form

# InLeads

Resuable Web components for [InLeads](https://inleads.ai) AI Driven Smart Sales Management System.


## Getting Started

- [InLeads](#inleads)
  - [Getting Started](#getting-started)
  - [Installation](#installation)
    - [NPM](#npm)
    - [Yarn](#yarn)
  - [Usage](#usage)
    - [Angular](#using-inleads-widgets-components-in-angular)
    - [Next.js](#using-inleads-widgets-components-in-nextjs)
    - [React.js](#using-inleads-widgets-components-in-reactjs)
    - [Integration in HTML](#using-inleads-widgets-components-integration-in-html)
  - [Functions Reference](#functions-reference)

## Installation
To use the Inleads Widgets in your project, install the package using npm:

### NPM

```bash
npm install @inleads/inleads-widgets --save
```

### Yarn

```bash
yarn add @inleads/inleads-widgets
```


## Usage
### Using Inleads widgets Components in Angular

#### Step 1: Install the Inleads Widgets Package
**Install** the Inleads Widgets Package in your Angular project:

#### NPM

```bash
npm install @inleads/inleads-widgets --save
```

#### Yarn

```bash
yarn add @inleads/inleads-widgets
```

#### Step 2: Define Custom Elements in Angular

In **main.ts**, import and define the custom elements:

```typescript
import { defineCustomElements } from '@inleads/inleads-widgets/loader'; // Add this
defineCustomElements(window); // Add this
```
#### Step 3: Add CUSTOM_ELEMENTS_SCHEMA

In your **app.module.ts**, add CUSTOM_ELEMENTS_SCHEMA to avoid errors for unknown elements:

```typescript
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule {}
```
#### Step 4: Use the Inleads Widgets in Templates

Once configured, you can utilize the Inleads Widgets components directly within your Angular templates. Below are the available components:
- [Chatbot Widget](#chatbot-widget)
- [Whatsapp Widget](#whatsapp-widget)
- [Contact Form Widget](#contact-form-widget)
- [NPS Widget](#nps-widget)


##
### Using Inleads Widgets Components in Next.js
Next.js, being a React framework, requires some attention to server-side rendering (SSR) when 
using Web Components.

#### Step 1: Install the Inleads Widgets Package
**Install** the Inleads Widgets package in your Next.js project:

### NPM

```bash
npm install @inleads/inleads-widgets --save
```

### Yarn

```bash
yarn add @inleads/inleads-widgets
```

#### Step 2: Load Web Components in Browser (Avoid SSR Issues)
First, in your **next.config.js**, add the transpilePackages option to ensure the Inleads Widgets are transpiled:
``` typescript
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
transpilePackages: ["@inleads/inleads-widgets"], // Add this line
}
module.exports = nextConfig
```

Then, In your **pages/_app.js**, you need to conditionally load the Inleads Widgets only in the browser, not during SSR:
``` typescript
import { useEffect } from 'react';
import { defineCustomElements } from '@inleads/inleads-widgets/loader'; // Add this
function MyApp({pageProps }) {
useEffect(() => { // Add this
if (typeof window !== 'undefined') {
defineCustomElements(window);
}
}, []);
return <Component {...pageProps} />;
}
export default MyApp;
```

#### Step 3: Use Widgets in Pages
Once configured, you can utilize the Inleads Widgets components directly within your Next.js Pages. Below are the available components:
- [Chatbot Widget](#chatbot-widget)
- [Whatsapp Widget](#whatsapp-widget)
- [Contact Form Widget](#contact-form-widget)
- [NPS Widget](#nps-widget)
##
### Using Inleads Widgets Components in React.js
Since Next.js is built on React, the process is similar, but you don’t need to worry about SSR in 
plain React.
#### Step 1: Install the Inleads Widgets Package
**Install** the Inleads Widgets package in your React.js project:

### NPM

```bash
npm install @inleads/inleads-widget --save
```

### Yarn

```bash
yarn add @inleads/inleads-widget
```
#### Step 2: Load Inleads Widgets Components
To ensure that your Inleads Widgets components work correctly, you need to load them in your main 
React file **index.js**. Use the following code snippet:
``` typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { defineCustomElements } from '@inleads/inleads-widgets/loader'; // Add this
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
defineCustomElements(window) // Add this

```
#### Step 3: Use Widgets in Components
Once configured, you can utilize the Inleads Widgets components directly within your React.js templates. Below are the available components:
- [Chatbot Widget](#chatbot-widget)
- [Whatsapp Widget](#whatsapp-widget)
- [Contact Form Widget](#contact-form-widget)
- [NPS Widget](#nps-widget)

##

### Using Inleads Widgets Components Integration in HTML
Easily integrate Inleads Widgets directly into an HTML file using the following script tags. This approach allows you to add Inleads Widgets without using any framework.

#### Step 1: Add Inleads Widgets Scripts
Include the following scripts in the **<head>** section of your HTML file to load the Inleads Widgets components:

``` HTML
<head>
  <!-- Import the Inleads Widgets Module -->
  <script type="module" src="https://unpkg.com/@inleads/inleads-widgets@latest/dist/inleads-widgets/inleads-widgets.esm.js"></script>
  <script nomodule src="https://unpkg.com/@inleads/inleads-widgets@latest/dist/inleads-widgets/inleads-widgets.js"></script>
</head>
```

#### Step 2: Add the Widget to Your HTML Body
Once the scripts are included, you can add the Inleads Widgets directly to the HTML body as custom HTML tags. Below are the available components:
- [Chatbot Widget](#chatbot-widget)
- [Whatsapp Widget](#whatsapp-widget)
- [Contact Form Widget](#contact-form-widget)
- [NPS Widget](#nps-widget)



##
### Chatbot Widget
Before integrating the Inleads Widgets components in your project, follow these steps based on your application framework.

  - [Angular](#using-inleads-widgets-components-in-angular)
  - [Next.js](#using-inleads-widgets-components-in-nextjs)
  - [React.js](#using-inleads-widgets-components-in-reactjs)
  - [Integration in HTML](#using-inleads-widgets-components-integration-in-html)

Then,
``` typescript
<div>
// Insert the Chatbot Widget
<chatbot-widget api-key="" agent-id="" email-id="" user-name=""></chatbot-widget>
</div>
```
##
### Whatsapp Widget
Before integrating the Inleads Widgets components in your project, follow these steps based on your application framework.

  - [Angular](#using-inleads-widgets-components-in-angular)
  - [Next.js](#using-inleads-widgets-components-in-nextjs)
  - [React.js](#using-inleads-widgets-components-in-reactjs)
  - [Integration in HTML](#using-inleads-widgets-components-integration-in-html)

Then,

``` typescript
<div>
// Insert the Whatsapp Widget
<whatsapp-widget api-key="" phone-number="" ></whatsapp-widget>
</div>
```
##
### Contact Form Widget
Before integrating the Inleads Widgets components in your project, follow these steps based on your application framework.

  - [Angular](#using-inleads-widgets-components-in-angular)
  - [Next.js](#using-inleads-widgets-components-in-nextjs)
  - [React.js](#using-inleads-widgets-components-in-reactjs)
  - [Integration in HTML](#using-inleads-widgets-components-in-HTML-integration)

Then,

``` typescript
<div>
// Insert the Contact Form Widget
<contact-form-widget api-key=""></contact-form-widget>
</div>
```
##
### NPS Widget
Before integrating the Inleads Widgets components in your project, follow these steps based on your application framework.

  - [Angular](#using-inleads-widgets-components-in-angular)
  - [Next.js](#using-inleads-widgets-components-in-nextjs)
  - [React.js](#using-inleads-widgets-components-in-reactjs)
  - [Integration in HTML](#using-inleads-widgets-components-integration-in-html)

Then,

``` typescript
<div>
// Insert the NPS Widget
<nps-widget api-key="" background-color="" text-color="" ></nps-widget>
</div>
```

## Functions Reference

### Inleads Widgets :-

#### Whatsapp Widget

```bash
<whatsapp-widget api-key="" phone-number="" ></whatsapp-widget>
```

#### Properties

| Property      | Attribute      | Type     | Default     |  Required  |
| ------------- | -------------- | -------- | ----------- | ---------- |
| `apiKey`      | `api-key`      | `string` | `undefined` | `Yes`      | 
| `phoneNumber` | `phone-number` | `string` | `undefined` | `Yes`      | 


#### Contact Widget
```bash
<contact-form-widget api-key=""></contact-form-widget>
```
#### Properties

| Property | Attribute | Type     | Default     | Required   |
| -------- | --------- | -------- | ----------- | ---------- |
| `apiKey` | `api-key` | `string` | `undefined` | `Yes`      | 


#### Chatbot Widget
```bash
<chatbot-widget api-key="" agent-id="" email-id="" user-name=""></chatbot-widget>
```

#### Properties
| Property   | Attribute   | Type     | Default     | Required   |
| ---------- | ----------- | -------- | ----------- | ---------- |
| `apiKey`   | `api-key`   | `string` | `undefined` | `Yes`      | 
| `agentId`  | `agent-id`  | `string` | `undefined` | `Yes`      | 
| `emailId`  | `email-id`  | `string` | `undefined` | `Optional` | 
| `userName` | `user-name` | `string` | `undefined` | `Optional` | 

#### NPS Widget

``` bash
<nps-widget api-key="" background-color="" text-color="" ></nps-widget>
```
#### Properties
| Property          | Attribute          | Type     | Default     | Required   |
| ----------------- | ------------------ | -------- | ----------- | ---------- |
| `apiKey`          | `api-key`          | `string` | `undefined` | `Yes`      |
| `backgroundColor` | `background-color` | `string` | `#1B1464`   | `Optional` |
| `textColor`       | `text-color`       | `string` | `#ffffff`   | `Optional` |