Real-time chatbot widget with script-based deployment

Thanushkanth Shan — Fri, 03 Nov 2023 09:10:09 +0000

Repository link - https://github.com/Dev-efil/chatbot-widget

Description

Real-time chatbot widget with script-based deployment for multiple sites, built using React.js, Node.js, and Socket.io.

How to setup the chat widget in your client/your site

First Step

Add this to the end of the <head> tag.
chatAccountKey is unique for every client, and it is used to track which client's user is chatting.

<script type="text/javascript"> 
    var chatAccountKey = 'xxxxxxxxxxxx';
    (function() {
        var x = document.createElement('script');
        x.type = 'text/javascript',
        x.async = !0,
        x.src = 'https://chat.example.com/chat-source/source.js',
        x.charset = 'UTF-8',
        x.setAttribute('crossorigin', '*');
        var e = document.getElementsByTagName('script')[0];
        e.parentNode.insertBefore(x, e);
    })();
</script>

Second Step

Add this below the opening of the <body> tag.

<body>
    <div id="chatbot"></div>
</body>

How to setup the project

In order to run this project, you will need to make sure that the following steps are configured:

https://chat.example.com/chat-source/source.js : Dynamically loading JavaScript and CSS resources and initializing a React application, this sets up the environment and dependencies for a chatbot application.

In source.js - https://chat.example.com/chat/static/js/main.xxxxxxxx.js & https://chat.example.com/chat/static/css/main.xxxxxxxx.css : You will obtain the JavaScript and CSS files after building your React application using the npm run build command. Update it with exact file names(main.xxxxxxxx.js & main.xxxxxxxx.css).

Step 01

Clone the project, navigate to the project folder, and run the following command to install dependencies in both the client and server directories. PATH /client & PATH /server

npm install

Step 02

In your source.js file, add below the code block to load the necessary JavaScript and CSS resources from your hosted React application. Make sure to use the correct file names and URLs (main.xxxxxxxx.js & main.xxxxxxxx.css).

(function (global) {
  var linkJS = [
    'https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js',
    'https://chat.example.com/chat/static/js/main.xxxxxxxx.js'
  ];
  var x1 = document.getElementsByTagName('script')[0];
  for (var i = 0; i < linkJS.length; i++) {
    var x2 = document.createElement('script');
    x2.src = linkJS[i];
    x2.charset = 'UTF-8';
    x2.setAttribute('crossorigin', '*');
    x1.parentNode.insertBefore(x2, x1);
  }
  var linkCSS = document.createElement('link');
  linkCSS.rel = 'stylesheet';
  linkCSS.href = 'https://chat.example.com/chat/static/css/main.xxxxxxxx.css';
  document.head.appendChild(linkCSS);
  ReactDOM.render(
    React.createElement(App),
    document.getElementById('chatbot')
  );
})(window);

Step 03

In the PATH /client/src/api/base.js file, set the base URL of your hosted Node.js server.

// server url
export const chatSocket = io.connect('https://chatbot.host.com');

Step 04

This chat widget was developed to get message responses from an API. You can send the client's response to the API and get the reply from the API. This allows you to manually set up your customized response structure or you can add an AI-based API like ChatGPT to handle the response & reply. Update the API base URL in PATH /server/config/routeConfig.js.

const BASE_URL = 'https://api.example.com';

Step 05

In the PATH /client/src/index.css file, after running the npm run build command, add the generated font file name to your index.css for @font-face, and link it accordingly as shown below. Afterward, re-run the build command and use that build for deployment.

 @font-face {
    font-family: "chatbot";
    src: url("https://chat.example.com/chat/static/media/Exo2-Bold.xxxxxxxx.ttf") format("truetype");
  }

Your feedback is highly valued and greatly appreciated. Please don't hesitate to share your feedback with me 🥳 cheers.

DEV Community: Thanushkanth Shan