@inleads/inleads-widgets
v0.0.13
Published
Widgets for chatbot, WhatsApp, nps, contact-form
Downloads
2,243
Maintainers
Readme
InLeads
Resuable Web components for InLeads AI Driven Smart Sales Management System.
Getting Started
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:
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:
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:
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
Before integrating the Inleads Widgets components in your project, follow these steps based on your application framework.
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.
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.
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.
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
|