ChatBot-UI

ChatBot UI is just a basic user interface piece for chatbot. Feel free to use this code in your chatbots.

---

Directions to use ChatBot-UI

• Download the complete project

  Download the complete project and extract the zip file. It comes with all the files required for this chatbot implementation.

• Add following Html piece

  Copy the following piece of code to your Html files ( at the very bottom, just before </body> ) where you want to add this chatbot feature.

<div class="chatBot">
    <div class="chatBotHeading">
        <label for="chatTextBox" id="chatOpenTrigger" class="">Any Queries? Ask Me!</label>
    </div>
    <hr class="">
    <div class="chatBody">
        <div class="chatSession">
        </div>
    </div>
    <form class="chatForm" autocomplete="off">
        <div class="typingArea">
            <textarea name="chatInput" id="chatTextBox" class="textArea" onblur="if(!validateMessage()) this.value = 'Type here...'" onfocus="if(!validateMessage()) this.value = ''"></textarea>
            <button type="submit" class="sendButton" id="sendButton"><img src="./Gfx/send.svg" alt="Send" srcset=""></button>
        </div>
        <button type="button" id="chatCloseTrigger">Close Chat!</button>
    </form>
</div>
<script src="./Js/chatBotConversation.js"></script>
<script src="./Js/chatBotValidate.js"></script>
<script src="./Js/chatBotAnimate.js"></script>

• Copy the Css & Js files

  Copy the extracted files ( except index.html ) to your project directory.

  You would need to place all the Css & Js files in your Css & Js folders respectively.

  You can skip the following files:

  • main.css present in Css folder.
  • chatBotLiveCustom.js & customSettingsDownload.js present in Js folder.
  • customUI.json & chatBotCustom.js present in the Misc & Js folders respectively ( Keep it in case of custom UI ).
  • All files in Gfx folder ( except send.svg, as it is part of the UI but you can replace the default graphics with your graphics. Just make sure the new files should be named as their default counterparts and are placed in appropriate directories. )

• Get your Custom UI

  Customize the ChatBot and download the settings from the following link.

  Customize your ChatBot here.

  The downloaded customUI.json file would contain all your preferences. Create a Misc folder in your project directory and place this customUI.json file into it. Link the chatBotCustom.js present in the Js folder along with other js links.

---