Chat SDK
Vue Non-chat Integration
Use fetchAdForContent in Vue/Nuxt apps where most surfaces are not chat messages
Vue Non-chat Integration
If 90% of your UI is non-chat, you can fetch ads from content blocks instead of chat messages.
Basic example
<script setup lang="ts">
import { onMounted } from 'vue';
import { useIdlenAd } from '@idlen/chat-sdk/vue';
const { ad, loading, error, fetchAdForContent, trackClick } = useIdlenAd({
apiKey: 'idl_pk_...'
});
onMounted(async () => {
await fetchAdForContent({
sessionId: 'docs-page-42',
contentText: `
How to deploy Nuxt apps with previews, analytics,
and safe rollout strategies on Vercel.
`
});
});
</script>
<template>
<aside v-if="ad">
<a :href="ad.ctaUrl" @click="trackClick">{{ ad.title }}</a>
</aside>
<p v-else-if="loading">Loading ad...</p>
<p v-else-if="error">Could not load ad.</p>
</template>
When to use each method
fetchAd({ rawText, sessionId }): chat or conversational interfacesfetchAdForContent({ contentText, sessionId }): docs, article pages, product pages, dashboards
Optional manual context
If you already compute context, pass it directly:
await fetchAdForContent({
sessionId: 'page-42',
context: {
topics: ['nuxt', 'vercel'],
intent: 'informational',
category: 'devtools'
}
});