Project AI Chat Widget Example

This page demonstrates the Project AI Chat Widget integration. Look for the floating chat button in the bottom-right corner!

Method 1: Using Data Attributes (Simplest)

Add this script tag to your HTML. Only 3 attributes needed!

<script 
  src="https://widget.projintel.ai/widget.js"
  data-project-id="your-project-id"
  data-api-key="your-api-key"
  data-position="bottom-right"
></script>

Note: Organization ID is automatically fetched from your project configuration. Base URL defaults to https://api.projintel.ai (backend API) but can be overridden with data-base-url.

Method 2: Using Global Config Object

Add this before the script tag:

<script>
  window.ProjectAIChatConfig = {
    projectId: 'your-project-id',
    apiKey: 'your-api-key',
    baseUrl: 'https://api.projintel.ai', // Optional - Defaults to production API
    position: 'bottom-right',
    buttonColor: '#4f46e5'
  };
</script>
<script src="https://widget.projintel.ai/widget.js"></script>

Method 3: Manual Initialization

<script src="https://widget.projintel.ai/widget.js"></script>
<script>
  window.ProjectAIChat = new window.ProjectAIChatWidget({
    projectId: 'your-project-id',
    apiKey: 'your-api-key',
    baseUrl: 'https://api.projintel.ai' // Optional
  });
</script>