React / Next.js - ARIS

React component

import { useEffect } from 'react';

function ArisWidget({ brokerageId }: { brokerageId: string }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://aris247.com/widget.js';
    script.setAttribute('data-brokerage-id', brokerageId);
    script.async = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, [brokerageId]);

  return null;
}

export default ArisWidget;

Usage

App Router (Next.js 13+)
Pages Router

app/layout.tsx

import ArisWidget from '@/components/ArisWidget';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <ArisWidget brokerageId="YOUR_BROKERAGE_ID" />
      </body>
    </html>
  );
}

pages/_app.tsx

import ArisWidget from '@/components/ArisWidget';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <ArisWidget brokerageId="YOUR_BROKERAGE_ID" />
    </>
  );
}

Environment variable

.env.local

NEXT_PUBLIC_ARIS_BROKERAGE_ID=550e8400-e29b-41d4-a716-446655440000

<ArisWidget brokerageId={process.env.NEXT_PUBLIC_ARIS_BROKERAGE_ID!} />

Using the CLI

The fastest way to set this up:

export ARIS_API_KEY=aris_yourkey
npx @aris/cli init

The CLI detects Next.js/React automatically and generates the correct component code.