```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 `

A commitment to innovation and sustainability

Études is a pioneering firm that seamlessly merges creativity and functionality to redefine architectural excellence.

Building exterior in Toronto, Canada

A passion for creating spaces

Our comprehensive suite of professional services caters to a diverse clientele, ranging from homeowners to commercial developers.

Renovation and restoration

Experience the fusion of imagination and expertise with Études Architectural Solutions.

Continuous Support

Experience the fusion of imagination and expertise with Études Architectural Solutions.

App Access

Experience the fusion of imagination and expertise with Études Architectural Solutions.

Consulting

Experience the fusion of imagination and expertise with Études Architectural Solutions.

Project Management

Experience the fusion of imagination and expertise with Études Architectural Solutions.

Architectural Solutions

Experience the fusion of imagination and expertise with Études Architectural Solutions.

An array of resources

Our comprehensive suite of professional services caters to a diverse clientele, ranging from homeowners to commercial developers.

Études Architect App

  • Collaborate with fellow architects.
  • Showcase your projects.
  • Experience the world of architecture.
Tourist taking photo of a building
Windows of a building in Nuremberg, Germany

Études Newsletter

  • A world of thought-provoking articles.
  • Case studies that celebrate architecture.
  • Exclusive access to design insights.

“Études has saved us thousands of hours of work and has unlocked insights we never thought possible.”

Annie Steiner

CEO, Greenprint

Watch, Read, Listen

Join 900+ subscribers

Stay in the loop with everything you need to know.

JoeBot - Your AI Mentor
[joebot] });