@inleads/inleads-widgets

InLeads

Resuable Web components for InLeads AI Driven Smart Sales Management System.

Getting Started

• InLeads
  • Getting Started
  • Installation
    • NPM
    • Yarn
  • Usage
    • Angular
    • Next.js
    • React.js
    • Integration in HTML
  • Functions Reference

Installation

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

NPM

npm install @inleads/inleads-widgets --save

Yarn

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

npm install @inleads/inleads-widgets --save

Yarn

yarn add @inleads/inleads-widgets

Step 2: Define Custom Elements in Angular

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

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:

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
• Whatsapp Widget
• Contact Form 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

npm install @inleads/inleads-widgets --save

Yarn

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:

/** @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:

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
• Whatsapp Widget
• Contact Form 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

npm install @inleads/inleads-widget --save

Yarn

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:

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
• Whatsapp Widget
• Contact Form 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 section of your HTML file to load the Inleads Widgets components:

<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
• Whatsapp Widget
• Contact Form Widget
• NPS Widget

Chatbot Widget

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

• Angular
• Next.js
• React.js
• Integration in HTML

Then,

<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
• Next.js
• React.js
• Integration in HTML

Then,

<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
• Next.js
• React.js
• Integration in HTML

Then,

<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
• Next.js
• React.js
• Integration in HTML

Then,

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

Functions Reference

Inleads Widgets :-

Whatsapp Widget

<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

<contact-form-widget api-key=""></contact-form-widget>

Properties

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

Chatbot Widget

<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

<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