Chat Widget

About

This is a simple chat widget that can be embedded into any website. It is built with React and uses Socket.io for communication with the server.

Usage

To use this widget, you need to have a server running. You can find instructions on how to set up the server here. Add the following code to your website:

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/iaigroup-chatwidget@latest/build/bundle.min.js"
></script>

The widget can be initialized in one of two ways:

• Add the following div to your website: <div id="chatWidgetContainer"></div>
• Add the following script to your website: <script>ChatWidget()</script>

There is configuration associated with the widget. You can pass it to the ChatWidget function as an object or to the div element as attributes.

Attribute	Description	Default value
data-name	Name of the chat bot	Chatbot
data-server-url	URL of the server	http://127.0.0.1:5000
data-socketio-path	Path on the server	/socket.io/
data-use-feedback	Whether to use feedback	false
data-use-login	Whether to login users	false
data-use-widget	Whether to use widget version	false

Example usage:

<div
  id="chatWidgetContainer"
  data-name="Chatbot"
  data-server-url="http://127.0.0.1:5000"
  data-use-feedback
  data-use-login
></div>

<script>
  ChatWidget({
    name: "Chatbot",
    serverUrl: "http://127.0.0.1:5000",
    useFeedback: true,
    useLogin: true,
  }, "customContainerId");
</script>

After initialization, the widget can be opened by clicking on the button in the bottom right corner of the screen.

Development

This project was bootstrapped with Create React App.

Available Scripts

To install all necessary packages, run the following command:

npm install

This should generate node_modules folder.

To run the app in the development mode, use the following command:

npm start

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified, and the filenames include the hashes.
Your app is ready to be deployed!

NB! Remember to change the path to the compiled files you just built in the index.html file.

See the section about deployment for more information.