Website Integration

Basic Installation

To add the chat widget to your website, simply add the following script to your HTML file's <head> section:

<script 
  src="https://replicat.co/widget-loader.js"
  id="YOUR_API_KEY"
  async
></script>

Advanced Integration

For more control over the widget, you can initialize it with custom settings and user data:

// React/Next.js Example
import Script from 'next/script'

const AISupportWidget = () => {
  const initializeWidget = () => {
    if (typeof window !== 'undefined') {
      window.initializeAISupportWidget({
        widgetId: 'YOUR_API_KEY',
        getUserMetadata: () => ({
          email: 'user@example.com',
          name: 'John Doe',
          // Add any custom metadata
          subscription: 'premium',
          company: 'Acme Inc'
        })
      })
    }
  }

  return (
    <Script
      src="https://replicat.co/widget-loader.js"
      async
      onLoad={initializeWidget}
    />
  )
}

Configuration Options

User Metadata

You can pass user information to personalize the chat experience:

  • email: User's email address
  • name: User's full name
  • custom fields: Any additional metadata

Widget Customization

  • Initial message customization
  • Widget position (left/right)
  • Color scheme
  • Chat window size

Dynamic User Authentication

For applications with user authentication, you can dynamically update the widget with user data:

const checkUserLoginStatus = async () => {
  try {
    const response = await fetch('/api/user')
    const user = await response.json()
    
    window.initializeAISupportWidget({
      widgetId: 'YOUR_API_KEY',
      getUserMetadata: () => ({
        email: user.email,
        name: user.name,
        // Add any other user data
      })
    })
  } catch (error) {
    console.error("Error initializing widget:", error)
  }
}

Need help with implementation? Check out our API documentation or contact our support team.