Idlen Logo
Chat SDK

React Integration

Use useIdlenAd in React apps for chat and non-chat ad slots

React Integration

Use the React hook from @idlen/chat-sdk/react.

Install

npm install @idlen/chat-sdk

Chat flow

import { useEffect } from 'react';
import { useIdlenAd } from '@idlen/chat-sdk/react';

export function ChatMessage({ message }: { message: string }) {
  const { ad, fetchAd, trackClick } = useIdlenAd({ apiKey: 'idl_pk_...' });

  useEffect(() => {
    fetchAd({ sessionId: 'chat-1', rawText: message });
  }, [message, fetchAd]);

  if (!ad) return null;
  return <a href={ad.ctaUrl} onClick={trackClick}>{ad.title}</a>;
}

Non-chat flow

import { useEffect } from 'react';
import { useIdlenAd } from '@idlen/chat-sdk/react';

export function SidebarAd({ pageText }: { pageText: string }) {
  const { ad, fetchAdForContent, trackClick } = useIdlenAd({ apiKey: 'idl_pk_...' });

  useEffect(() => {
    fetchAdForContent({ sessionId: 'page-42', contentText: pageText });
  }, [pageText, fetchAdForContent]);

  if (!ad) return null;
  return <a href={ad.ctaUrl} onClick={trackClick}>{ad.title}</a>;
}
Copyright © 2026