```php ``` ### Key Updates in `joebot.php` - **Enqueue Function**: The `joebot_enqueue_scripts` function uses `wp_enqueue_style` and `wp_enqueue_script` to load `joebot-styles.css` and `joebot-scripts.js` from the plugin directory (`plugin_dir_url(__FILE__)` ensures correct file paths). - **Nonce for Security**: Added a nonce (`wp_create_nonce('joebot_nonce')`) to the `joebot_ajax` object and included `check_ajax_referer` in the AJAX handlers to enhance security. - **Default Motivational Text**: Added a fallback text (`Stay inspired and keep pushing forward!`) in the `joebot_get_motivational_text` function for consistency with the JavaScript fallback. - **Shortcode**: Kept the `[joebot]` shortcode, which outputs the chatbot HTML structure, making it compatible with Elementor’s Shortcode widget. ### Steps to Install on Your Elementor-Based Website 1. **Create Plugin Directory and Upload Files**: - Access your WordPress site via FTP (e.g., FileZilla) or a file manager plugin (e.g., WP File Manager). - Navigate to `wp-content/plugins/`. - Create a folder named `joebot`. - Upload the following files to `wp-content/plugins/joebot/`: - `joebot.php` (use the content above). - `joebot-scripts.js` (from the previous response with `bottom: 80px` and `left: -10px`). - `joebot-styles.css` (from the previous response with `bottom: 80px` and `left: -10px`). - Ensure file permissions are set to 644 for files and 755 for the directory. 2. **Activate the Plugin**: - Log in to your WordPress admin dashboard. - Go to **Plugins > Installed Plugins**. - Find **JoeBot Chatbot** in the list and click **Activate**. 3. **Add the Chatbot to Your Elementor Page**: - **Using the Shortcode** (Recommended for Elementor): - Edit the page where you want the chatbot to appear in Elementor (e.g., **Pages > All Pages > Edit with Elementor**). - Drag the **Shortcode** widget from the Elementor sidebar to the desired section. - In the Shortcode widget settings, enter `[joebot]`. - Save and publish the page. - **Alternative: Using Custom HTML** (if you prefer manual HTML): - Drag the **HTML** widget to the page. - Paste the HTML from the `joebot_shortcode` function (as shown in the previous response): ```html
JoeBot - Your AI Mentor
``` - Save and publish the page. - **Site-Wide (Elementor Pro)**: - Go to **Templates > Theme Builder > Footer > Add New**. - Add the Shortcode widget with `[joebot]` or the HTML widget with the code above. - Publish the template with conditions set to “Entire Site” or specific pages. 4. **Configure Motivational Text (Optional)**: - Go to **Settings > JoeBot Settings** in the WordPress dashboard. - Enter a custom motivational text (e.g., “Empower your dreams!”) and save changes. 5. **Test the Chatbot**: - Visit the front end of your site where the shortcode or HTML was added. - Verify that: - The chatbot icon appears in the bottom-right corner. - Clicking the icon opens the chatbot window with the welcome message (updated for 10:09 AM SAST, May 27, 2025). - The motivational line appears at `bottom: 80px` and `left: -10px` and animates correctly. - The typing indicator doesn’t flash unexpectedly. - Use browser developer tools (F12) to check for errors in the console and inspect the `.motivational-line` positioning. ### Important Notes - **No Need to Add JavaScript Directly**: The `joebot.php` file enqueues `joebot-scripts.js` using `wp_enqueue_script`, so you don’t need to add the JavaScript code directly to `joebot.php` or anywhere else. - **File Placement**: Ensure `joebot-scripts.js` and `joebot-styles.css` are in the `wp-content/plugins/joebot/` directory alongside `joebot.php`. The `plugin_dir_url(__FILE__)` function in the enqueue script points to these files. - **Elementor Compatibility**: The `[joebot]` shortcode or HTML widget works seamlessly with Elementor Free or Pro. The Shortcode widget is preferred for simplicity. - **Image URL**: The `.chatbot-icon` in `joebot-styles.css` references an image (`https://edtreprenuer.com/wp-content/uploads/2025/05/Picture3.png`). If this image isn’t accessible on your new site, upload a new image to your WordPress media library and update the `background` property in `joebot-styles.css`: ```css .chatbot-icon { background: url('YOUR_NEW_IMAGE_URL') center/cover; /* ... other styles ... */ } ``` - **Troubleshooting**: - If the chatbot doesn’t load, check that the plugin is activated and the shortcode `[joebot]` is added correctly. - Verify that `joebot-scripts.js` and `joebot-styles.css` are loading by viewing the page source (look for `

Category: Blog

JoeBot - Your AI Mentor
[joebot] });