Ask AI Button

Appearance

Add Ask AI Button using JavaScript ​

Integrate the Ask AI Button into any website or web application using our JavaScript SDK.

Installation ​

Step 1: Add the Configuration ​

Define the window.aaib configuration object before loading the script:

html
<script>
  window.aaib = {
    projectId: 'YOUR_PROJECT_ID',
    // Additional configuration options
  };
</script>

Note: Replace YOUR_PROJECT_ID with your actual project ID from the Ask AI Button dashboard.

Step 2: Load the Script ​

Add the Ask AI Button loader script to your website:

html
<script src="https://cdn.ask-ai-button.io/loader-v1.js" async></script>

The script can be placed in the <head> section or just before the closing </body> tag.

Complete Example ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Documentation</title>
  
  <!-- Ask AI Button Configuration -->
  <script>
    window.aaib = {
      projectId: '12345'
    };
  </script>
  
  <!-- Ask AI Button Loader -->
  <script src="https://cdn.ask-ai-button.io/loader-v1.js" async></script>
</head>
<body>
  <!-- Your documentation content -->
</body>
</html>

Configuration ​

For all available configuration options, see Configuration Parameters.

Quick Example with Common Options ​

javascript
window.aaib = {
  projectId: '12345',
  position: {
    bottom: '20px',
    right: '20px'
  },
  theme: 'auto'
};

Initialization Events ​

Listen for initialization events to know when the Ask AI Button is ready:

javascript
window.addEventListener('aaib:ready', function(event) {
  console.log('Ask AI Button is ready!');
});

window.addEventListener('aaib:error', function(event) {
  console.error('Ask AI Button initialization failed:', event.detail);
});

Programmatic Control ​

Once initialized, you can control the Ask AI Button programmatically:

javascript
// Open the chat widget
window.aaib.open();

// Close the chat widget
window.aaib.close();

// Toggle the chat widget
window.aaib.toggle();

// Check if widget is open
const isOpen = window.aaib.isOpen();

// Programmatically send a message
window.aaib.sendMessage('How do I get started?');

// Clear conversation history
window.aaib.clearHistory();

Content Security Policy (CSP) ​

If your website uses Content Security Policy, add the following directives:

script-src 'self' https://cdn.ask-ai-button.io;
connect-src 'self' https://api.ask-ai-button.io;
frame-src 'self' https://widget.ask-ai-button.io;
style-src 'self' 'unsafe-inline' https://cdn.ask-ai-button.io;

Troubleshooting ​

Button Not Appearing ​

  1. Verify configuration is defined before script loads - The window.aaib object must be defined before the loader script
  2. Check your project ID - Ensure you're using the correct project ID
  3. Inspect console - Look for any error messages in the browser console
  4. Verify script loading - Check the Network tab to ensure the script loads successfully

Widget Not Responding ​

  • Clear browser cache and reload
  • Ensure JavaScript is enabled
  • Check for interfering browser extensions or ad blockers

Browser Support ​

The Ask AI Button supports all modern browsers:

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

Source ​

View the integration source code: github.com/aaibt/ask-ai-button/tree/main/integrations/javascript