Documentation Index
Fetch the complete documentation index at: https://docs.thrads.ai/llms.txt
Use this file to discover all available pages before exploring further.
Placement attributes
Every placement is a <div> with two data attributes:
| Attribute | Purpose | Values |
|---|
data-thrad-type | When the ad triggers | opener, contextual |
data-thrad-format | How the ad looks | message, prompt, carousel, poll |
poll is contextual-only. Use data-thrad-format="poll" only on data-thrad-type="contextual" placements. Opener placements should use message or prompt.
Case A — Opener ad
Place a <div> directly below your chat input component. The SDK renders the opener ad automatically on page load — no JavaScript call needed.
<!-- Chat input -->
<textarea id="chat-input" placeholder="Ask me anything..."></textarea>
<!-- Thrad opener ad — place directly below the input -->
<div data-thrad-type="opener" data-thrad-format="message"></div>
export default function ChatInput() {
return (
<div>
<textarea placeholder="Ask me anything..." />
{/* Thrad opener ad — place directly below the input */}
<div data-thrad-type="opener" data-thrad-format="message" />
</div>
)
}
Case B — Opener + contextual together
Combine both placements on the same page. The opener fires on load; the contextual fires when you call thrad.render().
<head>
<script src="https://sdk.thrad.ai/sdk.js?token=YOUR_PUBLISHER_ID"></script>
</head>
<body>
<!-- Renders automatically on page load -->
<div data-thrad-type="opener" data-thrad-format="message"></div>
<!-- Renders when thrad.render() is called -->
<div data-thrad-type="contextual" data-thrad-format="poll"></div>
<script>
async function onAIResponse(userMessage, aiResponse) {
await thrad.render({ query: userMessage, response: aiResponse })
}
</script>
</body>
Case C — Multiple contextual placements
Give each placement a unique id and pass target to specify which one to render into.
<div id="thrad-slot-1" data-thrad-type="contextual" data-thrad-format="message"></div>
<div id="thrad-slot-2" data-thrad-type="contextual" data-thrad-format="prompt"></div>
<script>
thrad.render({ query: userMessage1, response: aiResponse1, target: '#thrad-slot-1' })
thrad.render({ query: userMessage2, response: aiResponse2, target: '#thrad-slot-2' })
</script>
Case D — SPA / cross-page pairing
In a Next.js or SPA layout where the opener is on one page and the AI response is on another, pass a shared turnId to correlate them on the backend.
// Page A — opener fires automatically, pass turnId via config
window.thrad_config = { turnId: 'turn-abc' }
// Page B — contextual render with the same turnId
thrad.render({ query: userMessage, response: aiResponse, turnId: 'turn-abc' })
Optional: identity & theming
Set window.thrad_config before the SDK script tag to pass user identity and theme options. All fields are optional.
<script>
window.thrad_config = {
userId: '{{ current_user.id }}', // improves ad matching
userMeta: {
age: {{ current_user.age }},
gender: '{{ current_user.gender }}',
},
theme: {
colorScheme: 'dark',
accentColor: '#3b82f6',
maxWidth: '500px',
}
}
</script>
<script src="https://sdk.thrad.ai/sdk.js?token=YOUR_PUBLISHER_ID"></script>
Cleanup & debugging
// Destroy all placements (call on SPA navigation or session teardown)
thrad.destroy()
// Destroy one specific placement
thrad.destroy(document.getElementById('thrad-slot-1'))
// Enable console logging
thrad.debug(true)
