da-web-chat v2.1.9

DialAfrika Web-Chat Web Component

This web component allows your clients visiting your web platforms interact with your customer support real-time with access to FAQs, and other knowledge bases from our robust multichannel ticketing system Bonga.

Features

• Live Chat: Engage in live conversations with customer support agents in real time.
• User-Friendly Interface: Intuitive and user-friendly chat interface for effortless interaction.
• Multi-Channel Support: this component interfaces with your clients as one of the channels supported by our ticketing software Bonga.
• Customizable Appearance: Customize the component's appearance to match your website's branding.
• Real-Time Notifications: Receive instant notifications for new messages from support agents.
• File Sharing: Easily share files, screenshots, or other relevant media with support agents.

Benefits

• Enhanced User Experience: Receive immediate assistance without leaving the website.
• Increased Customer Satisfaction: Foster a sense of care and attention with real-time communication.
• Efficient Issue Resolution: Exchange messages, share files, and engage in voice/video calls for faster issue resolution.
• Reduced Support Costs: Automate and streamline customer support, potentially reducing support staff or external chat platforms.
• Analytics and Insights: Gain valuable insights into user behavior and common support queries.

Integration

This Web Component can be easily integrated into any website or web application. Simply follow the provided installation and integration instructions for your preferred framework or Vanilla.js project.

Note: The exact integration steps may vary depending on the specific technologies and frameworks you are using.

Requirements

Please refer to the documentation or provided instructions for specific requirements and configuration details based on the chosen implementation.

Example Usage

HTML

Include the following script to your code to add the <da-web-chat/> element.

<script  src="https://cdn.jsdelivr.net/npm/da-web-chat@1.0.2/"></script>

• If you prefer to take advantage of the es2017 modules, use the following script instead.

<script type="module">
        import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/da-web-chat@1.0.2/loader/index.es2017.js';
        defineCustomElements();
</script>

• Add the component and its attributes.
• You will be required to get an apikey from Bonga software

<da-web-chat greetings="string" message="string" apikey="string" />

React.js

First, install the web chat component in to your React project.

Using npm:

npm i da-web-chat

Using yarn

yarn add da-web-chat

After the installation, add defineCustomElements and pass the window object in your main project entry file i.e. index.js as shown below.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import {defineCustomElements} from 'da-web-chat/loader'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

defineCustomElements(window)

Then add the <da-web-chat/> element to render the web-chat.

import {defineCustomElements} from 'da-web-chat'

const MyWebChatComponent =()=>{
    return(
        <>
            {@ts-ignore}
            <da-web-chat greetings="string" message="string" apikey="string" />
        </>
    )
}

Please note that you need to pass some attributes to customize your component.

 <da-web-chat 
    greetings="Hey!," 
    message="How can i help you today," 
    apikey="HgjGfd_786BJNhgVj"
 />

Note

• Please note that react projects set up with builders other than create-react-app might require a different setup to achieve the render.
• You can also use the CDN Link in your index.html and render it directly in the DOM outside your project root node.

Angular

First, install the web chat component in to your Angular project.

Using npm:

npm i da-web-chat

Using yarn:

yarn add da-web-chat

After the installation, add defineCustomElements and pass the window object in your main project entry file at app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

next, go to main.ts and import defineCustomElements. the code should look like this.

import { defineCustomElements } from 'da-web-chat/loader';

defineCustomElements(window);

finally, define the webchat components in app.component.html. Should looklike the code below.

<da-web-chat greetings="string" message="string" apikey="string" />