WordPress Hooks

WordPress Hooks

The Supervised AI Bots plugin integrates with the WordPress core using standard action and filter hooks to manage asset delivery and content rendering. Understanding these hooks is essential for developers looking to extend or troubleshoot the chatbot integration.

Shortcode Registration

The plugin registers a primary shortcode to handle the embedding of chatbot interfaces within posts, pages, or widget areas.

[supervised_ai_bot]

This shortcode fetches the configured bot URL based on the provided ID and generates the necessary HTML markup and trigger button.

Attributes:

• id (string|int): The row number of the chatbot URL as defined in the plugin settings page.

Example Usage:

<!-- Display the chatbot corresponding to the first URL in settings -->
[supervised_ai_bot id="1"]

<!-- Display the chatbot corresponding to the second URL in settings -->
[supervised_ai_bot id="2"]

Asset Enqueuing

The plugin utilizes the wp_enqueue_scripts hook to load the necessary CSS and JavaScript files required for the popup functionality and layout.

Stylesheets

The plugin enqueues a custom stylesheet to handle the positioning, responsiveness, and aesthetic of the chatbot container.

• Handle: custom-popup-style
• File: custom-popup-style.css
• Scope: Frontend only.
• Key Classes: .popup-container, .circle-button, .iframe-container.

JavaScripts

The plugin enqueues a lightweight script to handle user interactions, such as opening and closing the chatbot window.

• Handle: custom-popup-script
• File: custom-popup-script.js
• Scope: Frontend only.
• Dependencies: None (Native JS).

Admin Integration (Internal)

While these hooks are handled internally, they define how the plugin interacts with the WordPress Dashboard:

admin_menu

The plugin hooks into admin_menu to create the Supervised AI Bots settings page. This is where users input the chatbot URLs that are later retrieved by the shortcode.

admin_init

Used to register plugin settings and sanitize the textarea input containing the chatbot URLs to ensure secure data storage in the WordPress database.

Overriding Styles

If you need to modify the appearance of the chatbot popup (e.g., changing the button color or position), you can use the WordPress wp_head hook or a child theme's style.css to override the default plugin styles.

Example: Changing the Launcher Button Color

/* Add to your theme's custom CSS */
.circle-button {
    background-color: #ff5733 !important; /* Custom Brand Color */
    right: 30px !important; /* Adjust horizontal offset */
}