The Trigger Button

The Trigger Button is the floating interface element that allows visitors to launch the Supervised AI chatbot. By default, it appears as a blue circular icon positioned at the bottom-right corner of your WordPress site.

Default Styling

The plugin applies a standard set of styles to ensure the button is visible and accessible. The button is defined by the .circle-button CSS class with the following default properties:

Position: Fixed at 20px from the bottom and 20px from the right.
Dimensions: 60px x 60px.
Background Color: #007bff (Bright Blue).
Icon Color: #ffffff (White).
Z-Index: 9999 (Ensures it stays above other site elements).

Customizing the Button Appearance

To match the button with your brand identity, you can override the default CSS by adding custom styles to your theme's stylesheet or via the Additional CSS section in the WordPress Customizer.

Example: Changing Color and Position

If you want to change the button to a green color and move it to the left side of the screen, use the following code:

/* Move the button to the bottom-left and change color */
.circle-button {
    right: auto !important;
    left: 20px !important;
    background-color: #28a745 !important; /* Green */
}

Example: Adjusting Button Size

To make the trigger button smaller for mobile-centric designs:

.circle-button {
    width: 50px !important;
    height: 50px !important;
    line-height: 50px !important;
    font-size: 20px !important;
}

Interaction Logic

The button functions as a toggle for the chatbot interface. The interaction is handled via internal JavaScript functions:

togglePopup(): This function is triggered when a user clicks the circle button. It switches the chatbot window visibility between display: block and display: none.
closePopup(): An internal utility used to explicitly hide the chatbot window.

Visibility Control

The trigger button and the associated chatbot window (.popup-container) are automatically injected into the page when the [supervised_ai_bot] shortcode is used.