Vola CRM

Recipe

React and Next.js integration

For AI-generated React sites, inject the standalone scripts from a component or layout.

React component

import { useEffect } from 'react';

export function VolaChatWidget({ tenantId }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://volacrm-prod-chatbot-widget-602578934747-eu-west-1.s3.eu-west-1.amazonaws.com/ai-crm-chatbot.js';
    script.dataset.tenantId = tenantId;
    script.dataset.channelId = 'CHATBOT';
    script.dataset.apiUrl = 'https://api.volacrm.com';
    script.dataset.primaryColor = '#6D5DFB';
    script.dataset.secondaryColor = '#11172A';
    script.dataset.controlSize = 'medium';
    script.dataset.brandName = 'Vola CRM';
    document.body.appendChild(script);
    return () => script.remove();
  }, [tenantId]);

  return null;
}

Next.js app router

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://volacrm-prod-chatbot-widget-602578934747-eu-west-1.s3.eu-west-1.amazonaws.com/ai-crm-chatbot.js"
          data-tenant-id="{tenant-id}"
          data-channel-id="CHATBOT"
          data-api-url="https://api.volacrm.com"
          data-primary-color="#6D5DFB"
          data-secondary-color="#11172A"
          data-control-size="medium"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}