Integrate in 3 lines of code

React hooks, Vue composables, and AI SDK middleware. Choose your stack.

$npm install @idlen/chat-sdk

Integration

Choose your stack

Full examples for every major framework. Copy, paste, and start earning.

ChatMessage.tsx

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

function ChatMessage({ message, sessionId }) {
  const { ad, fetchAd, trackClick } = useIdlenAd({
    apiKey: 'idl_pk_your_key_here'
  });

  useEffect(() => {
    fetchAd({
      rawText: message,
      sessionId,
      format: 'chat_sponsored_recommendation'
    });
  }, [message]);

  return (
    <div>
      <p>{message}</p>
      {ad && (
        <a href={ad.ctaUrl} onClick={trackClick}>
          <div dangerouslySetInnerHTML={{ __html: ad.renderHTML() }} />
        </a>
      )}
    </div>
  );
}

Configuration

Advanced configuration

Fine-tune ad frequency, formats, categories, and callbacks.

config.ts

const ads = new IdlenChatAds({
  apiKey: 'idl_pk_your_key_here',

  // Ad frequency (show ad every N messages)
  frequency: 3,

  // Preferred format
  format: 'chat_sponsored_recommendation',

  // Category blocklist
  blockedCategories: ['competitor', 'gambling'],

  // Custom placement
  position: 'append', // or 'prepend'

  // Callback on ad served
  onAdServed: (ad) => {
    console.log('Ad served:', ad.adId);
  }
});

Ready to integrate?

Create your publisher account and get your API key in under 2 minutes.

Start Monetizing View SDK on npm