InLeads

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

Getting Started

• InLeads
  • Getting Started
  • Installation
    • NPM
    • Yarn
  • Usage
    • Angular
    • Next.js
    • React.js
  • 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

Now, you can use the Inleads Widgets components in Angular templates:

<div class="container">
<h1>Inleads Widgets</h1>
<!-- Insert the Inleads Widget -->
<whatsapp-widget phone-number="+1234567890" api-key="your-api-key"></whatsapp-
 widget>
</div>

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

You can now use the Inleads Widgets components in your Next.js pages:

export default function HomePage() {
return (
<div>
// Insert the Inleads widgets
<whatsapp-widget phone-number="+1234567890" api-key="your-api-
 key"></whatsapp-widget>
</div>
);
}

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

You can now use the Inleads Widgets directly in your React components:

function App() {
return (
<div>
// Insert the Inleads Whatsapp Widget component
<whatsapp-widget phone-number="+1234567890" api-key="your-api-key">
 </whatsapp-widget>
</div>
);
}
export default App;

Functions Reference

Inleads Widgets :-

Whatsapp Widget

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

Properties

| Property | Attribute | Description | Type | Default | | ------------- | -------------- | ----------- | -------- | ----------- | | apiKey | api-key | | string | undefined | | phoneNumber | phone-number | | string | undefined |

Contact Widget

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

Properties

| Property | Attribute | Description | Type | Default | | -------- | --------- | ----------- | -------- | ----------- | | apiKey | api-key | | string | undefined |

Chatbot Widget

<chatbot-widget api-key="" agent-id=""></chatbot-widget>

Properties

| Property | Attribute | Description | Type | Default | | ---------- | ----------- | ----------- | -------- | ----------- | | agentId | agent-id | | string | undefined | | apiKey | api-key | | string | undefined | | emailId | email-id | | string | undefined | | userName | user-name | | string | undefined |

NPS Widget

<nps-widget background-color="" text-color="" api-key=""></nps-widget>

Properties

| Property | Attribute | Description | Type | Default | | ----------------- | ------------------ | ----------- | -------- | ----------- | | apiKey | api-key | | string | undefined | | backgroundColor | background-color | | string | undefined | | textColor | text-color | | string | undefined |