Circle Button Customization

Circle Button Customization

The Circle Button serves as the floating action button (FAB) that visitors use to toggle the chatbot interface on your WordPress site. By default, it appears as a blue circular icon in the bottom-right corner of the screen.

You can customize the appearance of this button by adding custom CSS to your WordPress theme or via the plugin's styling options.

Default Styles

The button is defined by the .circle-button class. Below are the default properties:

| Property | Default Value | Description | | :--- | :--- | :--- | | Position | fixed | Stays in place while the user scrolls. | | Placement | bottom: 20px, right: 20px | Distance from the screen edges. | | Size | 60px x 60px | The diameter of the button. | | Background | #007bff | The brand color of the launcher. | | Z-Index | 9999 | Ensures the button stays above other page elements. |

Customizing via CSS

To override the default styling, target the .circle-button selector in your stylesheet.

Changing the Color and Size

If you want to change the color to match your brand and increase the size of the button, use the following snippet:

/* Customizing the chatbot launcher */
.circle-button {
    background-color: #28a745; /* Change to your brand color */
    width: 70px;
    height: 70px;
    line-height: 70px; /* Match height to center the icon/text */
    font-size: 30px;    /* Adjust icon size */
}

Changing Position

To move the button to the bottom-left corner of the screen:

.circle-button {
    right: auto;
    left: 20px;
}

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

Hover Effects

You can add interactivity to the button by defining hover states:

.circle-button:hover {
    background-color: #0056b3;
    transform: scale(1.1);
    transition: all 0.3s ease;
}

Triggering the Popup Manually

The button uses a internal JavaScript function togglePopup() to display the chatbot. While this is handled automatically by the button click, you can call this function from other custom elements on your page:

<!-- Example of a custom text link to open the bot -->
<a href="javascript:void(0);" onclick="togglePopup()">Chat with us!</a>

Note: The button visibility is global by default once the plugin is activated. If you need to hide the button on specific pages while keeping the chatbot active, you can use CSS display rules or WordPress conditional tags to target the .circle-button class.