There are two versions of the chatbot widget available:
<div id="ae-chatbot-widget" style="--chatbot-brand-primary-color: green;" ></div>
<script>
const ae_widget_config_params = {
botname: "YourBotName",
widget_popup_text: "Hello! How can I help you today?"
}
</script>
<script src="https://qa.chat.ask.eduworks.com/static/js/widget-loader.js"></script><div id="ae-chatbot-fullscreen"></div>
<script>
const ae_widget_config_params = {
botname: "YourBotName",
widget_popup_text: "Hello! How can I help you today?"
}
</script>
<script src="https://qa.chat.ask.eduworks.com/static/js/fullscreen-loader.js"></script>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 |
| 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?", }, ] |