Documentation Index
Fetch the complete documentation index at: https://docs.aris247.com/llms.txt
Use this file to discover all available pages before exploring further.
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
import ArisWidget from '@/components/ArisWidget';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<ArisWidget brokerageId="YOUR_BROKERAGE_ID" />
</body>
</html>
);
}
import ArisWidget from '@/components/ArisWidget';
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<ArisWidget brokerageId="YOUR_BROKERAGE_ID" />
</>
);
}
Environment variable
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
