Skip to main content

​
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/layout.tsx
import ArisWidget from '@/components/ArisWidget';

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

​
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.