Chatbot Widget Documentation

Basic Implementation

There are two versions of the chatbot widget available:

1. Side Widget

<div id="ae-chatbot-widget" ></div>
<script>
    const ae_widget_config_params = {
        botname: "YourBotName",
        widget_popup_text: "Hello! How can I help you today?",
        styles: {
            "chatbot-brand-primary-color": "#000000",
        },
    }
</script>
<script src="https://chat.ask.thiaplatform.ai/static/js/widget-loader.js"></script>

2. Fullscreen Version

<div id="ae-chatbot-fullscreen"></div>
<script>
    const ae_widget_config_params = {
        botname: "YourBotName",
        widget_popup_text: "Hello! How can I help you today?",
        styles: {
            "chatbot-brand-primary-color": "green",
          },
    }
</script>
<script src="https://chat.ask.thiaplatform.ai/static/js/fullscreen-loader.js"></script>

Style Parameters

Customize the appearance of your chatbot widget using these CSS variables:

Parameter Description Default/Example
--chatbot-brand-primary-color Primary brand color used throughout the widget #f47b28
--chatbot-font-size Base font size for the widget 15px
--chatbot-icon-img URL to the chatbot's avatar image url(./assets/chatbotAvatar.png)
--chatbot-icon-background-color Color fill behind the icon var(--chatbot-brand-primary-color)
--chatbot-icon-size Size of the chat icon 50px
--chatbot-icon-roundness Corner radius of the icon 20%
--chatbot-icon-border Border style for the icon none
--chatbot-icon-shadow Drop shadow for the icon none
--chatbot-icon-offset Distance from bottom and right sides var(--chatbot-font-size)
--chatbot-icon-hover-color Fill color on hover var(--chatbot-brand-primary-color)
--chatbot-icon-hover-border Border style on hover none
--chatbot-icon-hover-shadow Drop shadow on hover -2px 4px 2px rgba(0, 0, 0, 0.2)
--chatbot-modal-width Chat window width 450px
--chatbot-modal-margin Distance from screen edges 0px
--chatbot-modal-radius Window corner radius 0
--chatbot-modal-border Window border style none
--chatbot-modal-background Main window background color white
--chatbot-modal-shadow Window drop shadow -2px 4px 8px rgba(0, 0, 0, 0.1)
--chatbot-modal-button-radius Button corner radius 4px
--chatbot-message-radius Message bubble corner radius var(--chatbot-font-size)
--chatbot-bot-text-color Bot message text color black
--chatbot-bot-text-background Bot message background color hsl(0, 0%, 96%)
--chatbot-user-text-color User message text color white
--chatbot-user-text-background User message background color var(--chatbot-brand-primary-color)
--chatbot-icon-face-color Fullscreen icon face color #f47b28
--chatbot-icon-hat-color Fullscreen icon hat color #81858b
--chatbot-icon-eye-color Fullscreen icon eye color #045db3

Configuration Parameters

Parameter Description Default/Options
botname Name of your chatbot "ExtensionBot"
widget_popup_text Initial greeting text shown in the widget popup "Hi, I'm ${botname}. 👋 How can I help you?"
greeting_text Initial message sent by the bot when chat starts Hi! My name is ${botname}. I can help you with your extension-related questions. I am still under development so my responses might not always be reliable. What can I help you with today?
local_weighting How much to favor data from specified states/sources. "Complete" indicates you only use data from your list of states or sources. "None" indicates there is no filtering, and all data from ExtensionBot's database is available. "None", "Slight", "Moderate", "Strong", "Complete"
state User's state (fully spelled out). (e.g., "oklahoma"). ""
source User's source. Can either be your institution name in your JSON dump or your root domain. Root domain is probably easiest. (e.g., "okstate.edu"). ""
date_weighting Preference for recent content. Options: None, Slight, Moderate. None indicates no prefernce for more recent content. Moderate indicates a stronger preference for more recent data. "Slight"
list_of_states Array of strings where each string is a state. Please spell out each state. Case does not matter. []
extension_office_url URL for extension office contact page ""
fullscreen_default_questions Default questions shown in fullscreen mode. Should be an array of JSON objects. Each should contain a header and a question. [ { header: "Lawn and Garden", question: "What is the best fertilizer to use on my lawn?" }, { header: "Local Extension Office", question: "How do I contact my local extension office?" }, { header: "Crop Management", question: "What are some effective ways to manage my crops?" }, { header: "Pest Management", question: "I use Bacillus thuringiensis and spinosad together in a non-chemical form?", }, ]

Widget Playground

Style Parameters

Message Appearance

Configuration Parameters

Bot Identity

Content Settings

Location Settings

Generated Code

About

ExtensionBot is a LLM Agnostic chatbot that is built and deployed by the Extension Foundation. We are working closely with Thia Corporation on the development and deployment of the technology. ExtensionBot is backed by an LLM (Large Language Model) that is trained exclusively on data provided by Cooperative Extension institutions and Ask Extension. Learn more at https://extension.org/tools/extbot/