Circle Button Customization

Circle Button Customization

The floating "Circle Button" serves as the primary launcher for your Supervised AI Chatbot. By default, it appears as a blue circular button in the bottom-right corner of your website. You can customize its appearance and positioning by adding CSS to your theme's stylesheet or the WordPress Additional CSS customizer.

Changing the Button Color and Size

You can modify the background color, icon color, and dimensions of the button by targeting the .circle-button class.

/* Change the button's background and size */
.circle-button {
    background-color: #28a745; /* Change to your brand color */
    width: 70px;               /* Default is 60px */
    height: 70px;              /* Default is 60px */
    line-height: 70px;         /* Should match height to center text/icon */
    font-size: 30px;           /* Adjust icon/text size */
}

Adjusting the Position

By default, the button is fixed 20px from the bottom and 20px from the right. You can move it to the left side of the screen or adjust the offset to avoid overlapping with other elements (like "Back to Top" buttons).

To move the button to the bottom-left:

.circle-button {
    right: auto;               /* Reset default right position */
    left: 20px;                /* Position 20px from the left */
}

/* Ensure the popup also opens on the left side */
.popup-container {
    right: auto;
    left: 20px;
}

To increase the bottom offset:

.circle-button {
    bottom: 50px;              /* Lift the button higher from the bottom */
}

Customizing the Icon or Text

The button displays text or icons placed within the element. To change the visual indicator (for example, to use an emoji or a specific character), you would modify the HTML output or use CSS pseudo-elements if you do not wish to edit the plugin files directly.

/* Replacing the default text with a custom emoji via CSS */
.circle-button {
    font-size: 0; /* Hide existing text */
}

.circle-button::after {
    content: "💬"; /* Insert your preferred icon/emoji */
    font-size: 24px;
}

Layering (Z-Index)

The button is set to a z-index of 9999 to ensure it stays above most website content. If the button is being hidden by your theme's header or other overlays, you can increase this value:

.circle-button {
    z-index: 999999; /* Higher priority */
}

Visibility Behavior

The button triggers the togglePopup() function when clicked. If you wish to hide the button on specific pages while keeping the chatbot active (for instance, to trigger it via a custom link instead), you can use:

/* Hide the button on specific mobile devices or pages */
.circle-button {
    display: none !important;
}

Note: If you hide the button, you must provide an alternative way for users to call the togglePopup() JavaScript function to interact with the chatbot.