Widget Integration Documentation

Learn how to integrate Nexva AI Chat widget into your website

Quick Start

Add these two lines of code before the closing </body> tag:

<!-- Add this before closing </body> tag -->
<script src="https://cdn.nexva.ai/widget.js"></script>
<script>
  NexvaChat.init('YOUR_API_KEY', {
    position: 'bottom-right',
    primaryColor: '#32f08c',
    welcomeMessage: 'Hi! How can I help you today?',
    enableVoice: true,
    enableHumanSupport: true
  });
</script>

💡 Pro Tip: Get your API key from the API Tokens page

Framework Integration

React

// npm install nexva-react

import { NexvaChat } from 'nexva-react';

export default function App() {
  return (
    <div>
      <h1>Your App Content</h1>
      <NexvaChat
        config={{
          apiKey: 'YOUR_API_KEY',
          position: 'bottom-right',
          primaryColor: '#32f08c',
          enableVoice: true,
          enableHumanSupport: true
        }}
      />
    </div>
  );
}

Next.js

// npm install nexva-react
// app/layout.tsx or pages/_app.tsx

import { NexvaChatNext } from 'nexva-react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <NexvaChatNext
          config={{
            apiKey: 'YOUR_API_KEY',
            position: 'bottom-right',
            primaryColor: '#32f08c',
            enableVoice: true,
            enableHumanSupport: true
          }}
        />
      </body>
    </html>
  );
}

WordPress

<?php
// Add to functions.php
function nexva_chat_widget() {
    $api_key = 'YOUR_API_KEY';
    ?>
    <script src="https://cdn.nexva.ai/widget.js"></script>
    <script>
      NexvaChat.init('<?php echo $api_key; ?>', {
        position: 'bottom-right',
        primaryColor: '#32f08c',
        enableVoice: true
      });
    </script>
    <?php
}
add_action('wp_footer', 'nexva_chat_widget');
?>

Laravel

{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    @yield('content')
    
    <script src="https://cdn.nexva.ai/widget.js"></script>
    <script>
      NexvaChat.init('{{ config('services.nexva.api_key') }}', {
        position: 'bottom-right',
        primaryColor: '#32f08c'
      });
    </script>
</body>
</html>

Vue.js

// main.js or App.vue
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://cdn.nexva.ai/widget.js';
    script.async = true;
    
    script.onload = () => {
      window.NexvaChat.init('YOUR_API_KEY', {
        position: 'bottom-right',
        primaryColor: '#32f08c'
      });
    };
    
    document.body.appendChild(script);
  }
}

Configuration Options

Option	Type	Default	Description
apiKey	string	-	Required. Your chatbot API key
apiUrl	string	https://api.nexva.ai	Your backend API URL
position	string	bottom-right	bottom-right, bottom-left
primaryColor	string	#32f08c	Brand color (hex code)
welcomeMessage	string	Hi! How can I help...	Initial greeting message
placeholder	string	Type your message...	Input placeholder text
enableVoice	boolean	true	Enable voice chat tab
enableHumanSupport	boolean	true	Show "Talk to Human" button
autoOpen	boolean	false	Auto-open chat on page load
borderRadius	string	12px	Border radius for widget (e.g., '0px' for square)
buttonSize	string	60px	Size of the chat button
buttonColor	string	primaryColor	Chat button color (defaults to primaryColor)
headerText	string	Nexva	Header title text
theme	string	light	light, dark

🎨 Customization Examples

Custom Colors

NexvaChat.init('your-api-key', {
  primaryColor: '#667eea',    // Purple theme
  buttonColor: '#ed64a6'      // Pink button
});

Square Design

NexvaChat.init('your-api-key', {
  borderRadius: '0px',        // Square corners
  buttonSize: '70px'          // Larger button
});

Full Customization

NexvaChat.init('your-api-key', {
  // Colors
  primaryColor: '#10b981',
  buttonColor: '#059669',
  
  // Size & Shape
  buttonSize: '65px',
  borderRadius: '8px',
  
  // Position
  position: 'bottom-left',
  
  // Text Content
  headerText: 'Support Team',
  welcomeMessage: 'Hello! How can we help?',
  placeholder: 'Type your question...',
  
  // Features
  enableVoice: true,
  enableHumanSupport: true,
  autoOpen: false
});

Features

💬 Text Chat

Full AI-powered chat with streaming responses and markdown support

🎤 Voice Chat

Real-time speech recognition for hands-free interaction

👤 Human Support

Escalate to human support team with one click

🎨 Customizable

Match your brand with custom colors and messages

📱 Responsive

Works perfectly on desktop, tablet, and mobile devices

⚡ Zero Dependencies

Lightweight, fast-loading with no external libraries

Browser Support

Chrome 90+

Firefox 88+

Safari 14+

Edge 90+

Voice chat requires Speech Recognition API (Chrome, Edge, Safari)