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 loadingJavaScriptandCSSresources 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 theJavaScriptandCSSfiles after building your React application using thenpm run buildcommand. 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.
Top comments (0)