iDEW Chatbot

# Getting Started {% embed url="" %} The code below will get you started with the iDEW chatbot template. It is a minimum starting point for a working chatbot that you will later modify and refine towards your design goals. There is a [**live example**](https://chatbot2018--jimlyst.repl.co/) which doesn't do anything exciting -- that's up to you to change. ## HTML Below is the core html for the chatbot. The *div* element with an *id="dialogue"* is the block that contains the back-and-forth messages like you see in common messaging interfaces. The *form* element handles the user's text input at the bottom of the interface. The required libraries are also loaded. *PapaParse.js* enables you to use a back-end database using Google Sheets. *JQuery* is a common library for Javascript programmers. *Rivescript* is the chatbot scripting language you will use (more on this later). *Chatbot.js* is the iDEW library that makes your programming easier. {% hint style="info" %} **Update February 11, 2022**: The PapaParse library is now used, instead of the Tabletop library, to **optionally** import data from a spreadsheet. The change is seen at line 21 below. {% endhint %} {% code title="HTML - (index.html)" %} ```markup iDEW Chatbot

``` {% endcode %} ## Javascript Below is the minimal Javascript needed to get started. The `setup ()`function starts automatically once the page loads in the browser and simply loads the *Rivescript* file as your chatbot script to get things started. {% code title="JS (script.js)" %} ```javascript function setup() { chatbot.loadFiles(['bot.rive']); } window.onload = setup; ``` {% endcode %} ## Rivescript The script below determines how your chatbot will converse with a visitor. The `+ start` is automatically started to get the conversation going. The `+ *` is a wildcard that catches anything that you have not programmed your chatbot to recognize. At first your chatbot recognizes little, but we will work on that soon. {% code title="Rivescript (bot.rive)" %} ```javascript // conversation script is below // "start" auto-runs to begin the bot conversation + start - Hello. I am a brand new bot with little to say. + * - Sorry, I don't understand that. ``` {% endcode %} ## CSS There is a lot going on here with the styling of the chatbot. Use the code below as your starting point, but you may choose to change some elements later. A simple way to customize the look would be to change the *background*, *font-family*, and *color* of the body element. {% code title="CSS (style.css)" %} ```css body { background: linear-gradient(#A90329, #6d0019); font-family: Verdana,Arial,Helvetica,sans-serif; font-size: small; color: #000000; padding: 0; margin: 0; line-height: 1.7em; } button { background-color: rgba(255,255,255,.5); padding: 5px; outline: none; border: 1px solid rgba(0,0,0,.3); border-radius: 5px; } .wrapper { max-width: 450px; height: 100vh; box-sizing: border-box; margin: auto; padding: 0; background-color: rgba(255,255,255,.1); display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,.2); border-right: 1px solid rgba(255,255,255,.2); } form { flex: 5; display: block; padding: 15px; } .text-box { font-size: 16px; display: flex; width: 100%; } input#message { padding-left: 11px; padding-right: 9px; font-size: 16px; height: 27px; display: block; flex: 10; outline: none; margin: 0 10px 0 0; box-sizing: border-box; border: 1px solid #aaa; border-radius: 13px; } input.send-button { display: block; background-color: rgba(255,255,255,.6); flex: 1; border: 1px solid rgba(0,0,0,.2); height: 27px; box-sizing: border-box; font-size: 16px; line-height: 25px; padding: 0; border-radius: 13px; } div#dialogue { overflow-x: none; overflow-y: auto; display: block; flex: 95; box-sizing: border-box; width: 100%; padding: 15px; } .bot-row, .user-row { padding: 1px 0 10px 0; display: block; postion: relative; } .user-row { text-align: right; } .user, .bot { font-size: 16px; padding: 5px 8px; margin: 1px; border-radius: 12px; display: inline-block; postion: relative; } .bot { margin-right: 50px; background-color: rgba(255,255,255,.85); border-bottom-left-radius: 0; } .user { margin-left: 50px; color: white; background-color: #3b3; border-bottom-right-radius: 0; } ``` {% endcode %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.idew.org/code-chatbot/core-template.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.