Configuration

Customize BrowseAid Widget to match your website's needs and your users' preferences with our comprehensive configuration options.

Configuration Methods

1. Global Configuration Object

Set configuration before the widget loads by defining a global options object:

// Define configuration before loading the widget
window.BrowseAidOptions = {
    theme: 'v2',
    position: {
        button: 'right-bottom',
        widget: 'right'
    }
};

// Then load the widget script
<script src="https://storage.browseaid.com/latest/assets/index.js" type="module"></script>

2. Programmatic API Configuration

Use the widget API after initialization:

// Wait for widget to be ready
document.addEventListener('browseaid:init', function() {
    // Enable specific tools
    window.BrowseAidWidget.api.enableTool('dark-mode');
    window.BrowseAidWidget.api.enableTool('font-size', { level: 120 });

    // Set language
    window.BrowseAidWidget.api.setLanguage('es');
});

Best Practices

1. Wait for Initialization

Always wait for the widget to initialize before using the API:

document.addEventListener('browseaid:init', function() {
    // Safe to use API here
    window.BrowseAidWidget.api.enableTool('dark-mode');
});

2. Graceful Degradation

Check for widget availability:

function enableAccessibilityFeature(toolName, options = {}) {
    if (window.BrowseAidWidget?.api) {
        try {
            window.BrowseAidWidget.api.enableTool(toolName, options);
        } catch (error) {
            console.warn(`Could not enable ${toolName}:`, error.message);
        }
    }
}

3. Respect User Preferences

Don't override user's saved preferences unless necessary:

// Check current state before changing
const currentState = window.BrowseAidWidget.api.getToolState('dark-mode');
if (!currentState?.enabled) {
    // Only enable if user hasn't already disabled it
    window.BrowseAidWidget.api.enableTool('dark-mode');
}

Next Steps

Now that you understand configuration:

1. 📖 See Options Reference for complete configuration details
2. 🛠️ Explore the API Reference for programmatic control
3. 📚 Check Tool Documentation for tool-specific options