Widget Installation

Install the Keva widget on your site to enable real-time customer support. Choose from automatic initialization with a script tag or manual control with the JavaScript SDK.

Automatic Installation

The simplest way to add the widget is with a single script tag. The widget automatically initializes when the page loads.

<script
  src="https://app.keva.support/widget/keva-widget.js"
  data-api-key="keva_live_your_api_key"
  async
></script>

Script Attributes

Attribute	Required	Description
`data-api-key`	Yes	Your widget API key from Settings > API Keys
`data-api-url`	No	Custom API URL (default: `https://app.keva.support`)

Manual Installation

For more control over when and how the widget initializes, use the JavaScript SDK.

<script src="https://app.keva.support/widget/keva-widget.js" async></script>
<script>
  // Wait for the widget script to load
  window.addEventListener('load', function() {
    window.Keva.init({
      apiKey: 'keva_live_your_api_key',
      user: {
        email: 'customer@example.com',
        name: 'John Doe'
      }
    });
  });
</script>

Single Page Applications (SPA)

For React, Vue, Next.js, or other SPAs, initialize the widget after your app mounts.

React Example

import { useEffect } from 'react';
 
function App() {
  useEffect(() => {
    // Load the widget script
    const script = document.createElement('script');
    script.src = 'https://app.keva.support/widget/keva-widget.js';
    script.async = true;
    script.onload = () => {
      window.Keva.init({
        apiKey: 'keva_live_your_api_key',
        user: {
          email: user?.email,
          name: user?.name
        }
      });
    };
    document.body.appendChild(script);
 
    return () => {
      // Cleanup on unmount
      window.Keva?.instance?.destroy();
    };
  }, []);
 
  return <YourApp />;
}

Next.js Example

'use client';
 
import Script from 'next/script';
 
export function KevaWidget({ user }) {
  return (
    <Script
      src="https://app.keva.support/widget/keva-widget.js"
      strategy="lazyOnload"
      onLoad={() => {
        window.Keva.init({
          apiKey: process.env.NEXT_PUBLIC_KEVA_API_KEY,
          user: user ? { email: user.email, name: user.name } : undefined
        });
      }}
    />
  );
}

Pre-filling User Information

If your user is already logged in, pass their information to skip the pre-chat form:

window.Keva.init({
  apiKey: 'keva_live_your_api_key',
  user: {
    email: 'customer@example.com',  // Required to skip pre-chat
    name: 'John Doe'                // Optional
  }
});

Generating an API Key

Go to Settings > API Keys in your Keva dashboard
Click Create API Key
Select the Widget scope
Copy the key (shown only once)

Keep your API key secure. While widget keys are safe to expose in client-side code, never use dashboard API keys in the widget.

Verifying Installation

After adding the widget, verify it's working:

Open your website in a browser
Look for the chat launcher button (bottom-right corner)
Click to open the chat panel
Enter an email and send a test message
Check your Keva inbox for the new ticket