Skip to main content

​
Placement attributes

Every placement is a <div> with two data attributes:
AttributePurposeValues
data-thrad-typeWhen the ad triggersopener, contextual
data-thrad-formatHow the ad looksmessage, prompt, carousel, poll

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

<!-- Thrads 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="message"></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>
See Publisher Configuration for the full config reference.

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