Using Tokens

<script src="https://cdn.performchat.com/widget/v1/performchat-widget.min.js"></script>
<script>
  async function initChat() {
    const response = await fetch('/api/chat/token');
    const { token } = await response.json();

    new PerformChatWidget({
      token: token,
      position: 'bottom-right',
      theme: 'light'
    });
  }

  initChat();
</script>

import { useState, useEffect } from 'react';
import { PerformChatProvider, ChatWidget } from '@performchat/react-sdk';

function App() {
  const [token, setToken] = useState(null);

  useEffect(() => {
    async function fetchToken() {
      const response = await fetch('/api/chat/token');
      const data = await response.json();
      setToken(data.token);
    }

    fetchToken();
  }, []);

  if (!token) return <div>Loading...</div>;

  return (
    <PerformChatProvider token={token}>
      <ChatWidget />
    </PerformChatProvider>
  );
}

import io from 'socket.io-client';

const socket = io('https://api.performchat.com', {
  auth: {
    token: 'your-jwt-token-here'
  }
});

socket.on('connect', () => {
  console.log('Connected to PerformChat');

  socket.emit('chat:join', {
    agentId: 'your-agent-id',
    token: 'your-jwt-token-here'
  });
});

socket.on('chat:message', {
  agentId: 'your-agent-id',
  message: 'Hello!',
  conversationId: 'conv_123'
});

socket.on('chat:response', (response) => {
  console.log('Agent response:', response.content);
});