Gutenbot - BettyBot Block

A WordPress Gutenberg block for embedding BettyBot AI chatbot widget with customizable settings.

🚀 Features

• Easy-to-use Gutenberg block interface - Seamlessly integrate BettyBot into your WordPress content
• Comprehensive customization options - Configure API settings, user preferences, and content
• WordPress media library integration - Upload and manage images directly from WordPress
• Advanced Info HTML editor - Visual editor for hero images, titles, and sample questions
• Responsive design - Works perfectly on all devices and screen sizes
• Accessibility features - WCAG 2.1 AA compliant with full keyboard navigation and screen reader support
• Security enhancements - Nonce verification and proper input sanitization
• Conditional asset loading - Only loads BettyBot assets when the block is present

📦 Installation

Method 1: WordPress Admin (Recommended)

1. Download gutenbot-plugin.zip
2. Go to WordPress Admin → Plugins → Add New → Upload Plugin
3. Choose the zip file and click "Install Now"
4. Activate the plugin

Method 2: Manual Upload

1. Extract the gutenbot folder from the zip file
2. Upload the folder to /wp-content/plugins/
3. Activate the plugin through the 'Plugins' screen

🎯 Usage

1. Add the Block:

   • Edit any post or page
   • Click the "+" button to add a block
   • Search for "BettyBot Chat" or find it in the "Widgets" category

2. Configure Settings:

   • API Configuration: Enter your BettyBot API endpoint token
   • User Configuration: Set user ID or use current WordPress user
   • Content Configuration: Customize info content, HTML, and placeholders
   • Images: Upload assistant and user images
   • Advanced Settings: Configure terms, conversation list, and references

3. Customize Info Content:

   • Click "Edit Info Content" to open the visual editor
   • Upload hero images with proper alt text
   • Set titles and add sample questions
   • Preview your content in real-time

⚙️ Configuration Options

API Settings

• API URL: BettyBot API endpoint (default: https://betty-api.tasio.co/)
• API Endpoint Token: Your organization identifier token
• Streaming: Enable real-time response streaming

User Settings

• User ID: Custom identifier or auto-use WordPress user email
• Current User Integration: Automatically detect and use logged-in user

Content Settings

• Info HTML: Custom content for the chat widget
• Lower HTML: HTML content below the input box
• Input Placeholder: Custom placeholder text
• Sample Questions: Interactive questions users can click

Image Settings

• Assistant Image: Custom image for the AI assistant
• User Image: Custom image for user messages
• Hero Image: Main image displayed in the widget

Advanced Settings

• Terms URL: Link to terms of service
• Conversation List: Show/hide conversation history
• Download Options: Enable/disable download features
• References Section: Configure references display

🔧 Requirements

• WordPress: 5.0 or higher (Gutenberg support required)
• PHP: 7.4 or higher
• BettyBot Account: API endpoint token from BettyBot team

🛡️ Security Features

• Nonce Verification: All API calls are protected with WordPress nonces
• Input Sanitization: All user inputs are properly escaped and sanitized
• Capability Checks: Proper user permission validation
• Secure Asset Loading: Conditional loading prevents unnecessary resource usage

♿ Accessibility Features

• WCAG 2.1 AA Compliant: Meets web accessibility standards
• Keyboard Navigation: Full keyboard support for all interactions
• Screen Reader Support: Comprehensive ARIA labels and descriptions
• Focus Management: Proper focus indicators and tab order
• High Contrast Support: Works with high contrast mode
• Reduced Motion Support: Respects user motion preferences

🎨 Customization

The plugin includes comprehensive styling that works with most WordPress themes. Key CSS classes:

• .wp-block-gutenbot-bettybot - Main block container
• .gutenbot-betty - BettyBot widget container
• .gutenbot-info-modal - Info editor modal
• .gutenbot-section - Content sections

🔍 Troubleshooting

Common Issues

1. Block not appearing:

   • Ensure WordPress 5.0+ is installed
   • Check that Gutenberg is enabled
   • Verify plugin is activated

2. API errors:

   • Verify your API endpoint token is correct
   • Check that the API URL is accessible
   • Ensure your BettyBot account is active

3. Images not loading:

   • Check file permissions
   • Verify image URLs are accessible
   • Ensure proper alt text is provided

Debug Mode

Enable WordPress debug mode to see detailed error logs:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);

🤝 Support

• Documentation: BettyBot.ai
• Support: No support is offered through CodeThatFits.com

📄 License

GPLv2 or later - Same as WordPress

License URI: https://www.gnu.org/licenses/gpl-2.0.html

🏆 Credits

Developed by the CodeThatFits.com team with accessibility and security best practices.