Quick chatbot integration

To embed the Ask Extension chatbot into your website, you must minimally include the following in your HTML:

            
                <!-- Begin Ask Extension Widget embed code -->
                <div id="ae-chatbot-widget" style=""></div>
                <script src="https://chat.ask.eduworks.com/static/js/widget-loader.js"></script>
                <!-- End Ask Extension Widget embed code -->

Branding and styling

To style the chatbot to match your site’s theme you can pass custom CSS styles. All of these settings are optional, but each one will override part of the default look and feel. All of the settings must be added inside the style="" property, each separated by a semi-colon.

At minimum, set the --chatbot-brand-primary-color to your theme’s main color. This can be a hex color, rbg, or other standard CSS color value. For example:

            
                <!-- Begin Ask Extension Widget embed code -->
                <div id="ae-chatbot-widget" style="--chatbot-brand-primary-color: #f0721f;"></div>
                <script src="https://chat.ask.eduworks.com/static/js/widget-loader.js"></script>
                <!-- End Ask Extension Widget embed code -->

--chatbot-brand-primary-color: Can be any color value such as hex, rgb, etc. For example #22499c

The following styles apply to the chatbot icon that appears in the corner of the screen.

--chatbot-icon-img: URL to icon image. Square images work best because the icon is scaled to fit inside a square area. If the image is a PNG or GIF with a transparent background then the --chatbot-icon-background-color will show through. Any common image format should work but .PNG or .SVG are recommended. For example: url(https://example.com/chatbotAvatar.png)
--chatbot-icon-background-color: Color fill behind the icon. Can be any standard CSS color value such as #22499c
--chatbot-icon-size: Icon container size on screen. This can be any CSS value such as px, %, em, ch, etc. For example 50px
--chatbot-icon-roundness: Roundness of the icon container. Use % or px values. For sharp corners use 0. Any value greater than 50% or the --chatbot-icon-size value will be a circle. To round each corner separately you can pass 2 or 4 values. For example 0 50% or 0 10px 20px 5px
--chatbot-icon-border: Border around the icon. The default is none. To apply a border use the CSS border syntax, for example 3px solid orange or 1px dashed #22499c
--chatbot-icon-shadow: Drop shadow behind the icon. The default is none. Use CSS box-shadow syntax, for example -2px 4px 2px rgba(0, 0, 0, 0.2)
--chatbot-icon-offset: The distance from bottom right corner of the screen. The default is 1rem but this can be any value such as px, %, em, ch, vw, etc.
--chatbot-icon-hover-color: Background fill color on hover. This can be any standard color or CSS variable, such as #22499c or var(--chatbot-brand-primary-color)
--chatbot-icon-hover-border: The border that appears around the icon on hover. The default is none. To apply a border use the CSS border syntax, for example 3px solid #000 or 1px dashed #22499c
--chatbot-icon-hover-shadow: Drop shadow that appears on hover. Use none to hide this. The default is -2px 4px 2px rgba(0, 0, 0, 0.2)

The following styles apply to the open chatbot window and its contents.

--chatbot-modal-width: Width of the open chat window. This can be any CSS value such as px, %, rem, vw, etc. The default is 30rem
--chatbot-modal-margin: Distance from edges of screen. Only a single value is supported, for example 50px. This can be any value: px, %, rem, vw, etc. The default is 0
--chatbot-modal-radius: Window corner radius. Can be any value such as px, %, px, rem, etc. The default is 0
--chatbot-modal-border: Adds an outline border around the chat window. Use CSS border syntax such as 3px solid orange or 1px dashed var(--chatbot-brand-primary-color). The default is none
--chatbot-modal-background: Main background fill color. The default is white
--chatbot-modal-shadow: Drop shadow behind the window. Use none for no shadow. The default is -2px 4px 8px rgba(0, 0, 0, 0.1)
--chatbot-modal-button-radius: Corner radius on any buttons inside the chat window. This can be any format such as px, %, px, rem, etc. The default is 4px
--chatbot-message-radius: Corner roundness for all text message areas. Can be any value: px, %, px, rem, etc. The default is 1rem
--chatbot-bot-text-color: Text color for all bot generated messages. Be sure to use a color with good contrast. The default is black
--chatbot-bot-text-background: Background fill color for bot messages. Use any CSS color value such as hex or rgb. The default is hsl(0, 0%, 96%)
--chatbot-user-text-color: Text color for all user generated messages. Be sure to use a color with good contrast. The default is white
--chatbot-user-text-background: Background fill color for user messages. Use any CSS color value such as hex or rgb. The default is the primary color var(--chatbot-brand-primary-color)

Example of a restyled chatbot:

            
                <!-- Begin Ask Extension Widget embed code -->
                <div id="ae-chatbot-widget" style="
                --chatbot-brand-primary-color: orange;
                --chatbot-modal-margin: 2rem;
                --chatbot-modal-radius: 8px;
                --chatbot-modal-border: 3px solid orange;
                "></div>
                <script src="http://localhost:8081/static/js/widget-loader.js"></script>
                <!-- End Ask Extension Widget embed code -->

Customizing chatbot behavior

To modify the chatbot's behavior for your integration, you need to also define a constant called "ae_widget_config_params". This allows you to filter by state and, in the future, institution.

            
                <!-- Begin Ask Extension Widget embed code -->
                <div id="ae-chatbot-widget" style=""></div>
                <script>
                // The following const definition is optional, but allows you to configure the chatbot.
                // If any settings are not provided, default values will be used.
                const ae_widget_config_params = {
                    list_of_states: ["Texas", "Oklahoma", "Kansas", "Arkansas", "Missouri"],
                    state_downweight: 0.9,
                    source: "oklahoma state",
                    source_downweight: 0.9,
                    extension_office_url: "https://extension.okstate.edu/county/",
                    state: "Oklahoma",
                }
                </script>
                <script src="https://chat.ask.eduworks.com/static/js/widget-loader.js"></script>
                <!-- End Ask Extension Widget embed code -->

About the configuration parameters

source: the "source" parameter should match the institution field in your JSON dump. This allows to filter using only your own data.
source_downweight: This is designed to allow you control how much you favor your own data. It works by multiplying the score from other data sources by the value set.

If set to 1, there is no filtering done by source.
If set to 0, you're completely filtering out data sources that aren't from the set client.
If somewhere in-between, the similarity score in the backend is multiplied by this value. Effectively reducing the probability of it showing. If you go the in-between route, this number should be relatively high. (0.8-0.95). Any lower and data from other sources are unlikely to be shown at all.

list_of_states: This allows you to filter the resources available to the model by state. It can be a list of quoted state names or an empty array. If a list of states is provided, this allows you to filter out data from other states.
state_downweight: As with source_downweight, this allows you to control how much you're favoring data from your list of states.

If set to 1, there is no filtering done by state (default).
If set to 0, you're completely filtering out data from states not in your list of states.
If somewhere in-between, the similarity score in the backend is multiplied by this value. Effectively reducing the probability of it showing

extension_office_url: Used to redirect the user to a URL that contains information on how to contact your extension office. If not provided, it'll ask the user's state and then give them a list of extension branches in that state. You can effectively bypass this and just give your own with this parameter.
state: This tells the backend what state you're located in. It can help with the following:
1. Redirecting to the list of extension branches in your state (this is only if extension_office_url is not provided)
2. Help with data retrieval from your area (if you don't provide a list of states).