ChatConnect

---

Please Download the project to use and Run it in any code editor you like. No need to signup or login. Directly head to the dashboard/adminpanel.html to create chtbot in your local system. Sorry for the inconvenience.

---

We are team ChatConnect. This is a Final Year project at Rajiv Gandhi College of Engineering Research and Technology, Chandrapur, Maharashtra. This is a open source project, which helps user to create simple conversational chatbot using JSON format. We would love to welcome contributions from peers worldwide to make this project more secure, reliable, advanced and easy to use.

Below are the details about the project.

How to use this project?

Let's not make it complex from the very start. We will divide it into steps as follows:

• Go to our official webiste first.
• Explore the website for your how's and what 🤔.
• Here you can have a demo of chatbot , you will be getting after all procedure. Window is popped-up when you load the website.
• Now head towards signup/login feature.
• Signup and then login to get access to our admin panel. 🛠️

That's it for this section. Next steps on how to use admin panel.....

---

How to use admin panel for creating the chatbot?

So once you did all necessary steps from the above section. Well, you are now good to go for next steps 🥳.

• To use admin panel , you need to be logged in.
• You will be automatically, redireted to profile section of dashboard. ➡️
  • Here you can see following type of boxes to be filled.
    
    
    
    
  • Main purpose of these fields is to gather the business details 🔂 of the user, who is going to make the chatbot 📇. If any user don't have any business (🧑🏽‍)💼 and is a student (🧑🏾‍💻) then he can add college details or project details accordingly.
  • This gathering of details is all about the future enhancements in the project for business profile section..🔜
  • Here the first section is Business Details and other one is Business User Role, what does it define?
    
    

  Business Details	Business User Role
  This section defines details of the business or project the user is going to integrate this chatbot on.	This section defines the person who is going to build and handle this chatbot on behalf of business or project as admin or employee.

---

Now let's go to next section Information 📌

• In this section , all the necessary steps are explained with the help of steps, as follows...
  ▶ Quick links for quick navigation, at the top of the section.
  ▶ Steps to enter data for chatbot in JSON format.
  ▶ Explanation about each terms included JSON format, for easy understanding.
  
  
  
  ▶ Again for better understanding and live genration and integration of chatbot , please see this Live Demo
  

---

Now move to next section Generate 📌

• In this section you will find a Notepad like editor, where you have to follow below steps.
  ▶ Start writing the data for chatbot, as displayed on example template in Information Section.
  ▶ For simple generation, you can use our pre-designed JSON data template. Copy and Paste it in editor and start editing accordingly.
  ▶ To copy and edit the demo data file, Copy & Paste Me
  ▶ After writing data, follow screenshots you see below
  
  

  Step-1: Copy the sample data from GitHub.	Step-2: Paste the data in editor, given in admin panel.
  Step-3: Edit the data according to your need.	Step-4: Copy all the edited data, Open Notepad and paste the data.
  Step-5: Save the file as data.json	Step-6: Now the next step is integration

---

Now let's integrate the chatbot on the website, Integrate Section 📌

Step-1: Download Zip Folder from here.	Step-2: Unzip it, and paste the two folders **demo-data** and **src** in your project folder.
Step-2: Unzip it, and paste the two folders **demo-data** and **src** in your project folder.	Step-3: Copy the **demo** and **src** folder.
Step-4: Paste those two folder in project folder.	Step-5: Now copy the **data.json** file and paste in inside **demo-data** folder.
Step-6: Now copy link tags,paste it inside tag of the page, where you want to integrate chatbot widget.	Step-7: Now copy script tags,paste it inside tag of the page, where you want to integrate chatbot widget.
Step-8: Now refresh & run the page where you have place the above tags.

---

<link rel="stylesheet" href="src/flow.css">
<link rel="stylesheet" href="src/flowchat.css">

<script src="src/flowchat.js"></script>
<script src="src/flowchatui.js"></script>
<script>
        $(function() {

            $.getJSON("demo-data/data.json", function(dataJSON) {
                $('#flowchat').flowchat({
                    dataJSON: dataJSON,
                    autoStart: false
                });
            });
        });
</script>

---

Tech Stack Behind this Project

• HTML,CSS, Bootstrap
• JavaScript, jQuery
• PHP,etc.

---

People Behind this Project

🧑🏼‍💻 Rutik Bhoyar | LinkedIn
🧑🏼‍💻 Pranay Haramwar |
🧑🏼‍💻 Dipak Vaidya |
🧑🏼‍💻 Yogesh Dongarwar |

Future Scope

🔓 Make it available for open source contributors.
🔓 Secure backend modules, Database and additon of authentication and authorization.
🔓 Enhance UI of product website.
🔓 Enhance UI of Chatbot.
🔓 Validation of data inserted for chatbot.
🔓 Admin Dashboard validation and UI enhancements.

---

Note: All images,cdn,required libraries used in this project are open-sourced and do not violate their terms and regulations

Thank You !