Visual standards and compliance requirements for displaying VKRA products
To maintain access to the VKRA API and ensure compliance with merchant networks (Amazon, Skimlinks), all implementations must follow these visual standards.
The word "Ad" or "Sponsored" must be visible and legible. This is a non-negotiable requirement for compliance with affiliate networks.
compliance.disclosure_label field from the API responseThe price must be displayed exactly as returned by the API in the price field.
The merchant name (e.g., "Amazon", "Best Buy") must be visible.
merchant field from the API responseWe provide flexible patterns that work across different platforms (web, mobile, chat, voice).
This pattern is ideal for AI agents, chatbots, and LLM integrations. The API provides a pre-formatted compliance.markdown_template that you can use directly.
Example Output:
[Ad] **Sony WH-1000XM5** - $348.00
*Industry-leading noise cancellation with 30-hour battery life.*
View on Amazon: https://vkra.org/p/123Implementation:
// Use the markdown_template from the compliance object
const formatted = product.compliance.markdown_template;
// Display in your chat interfaceRequirements:
[Ad] or [Sponsored])This pattern works well for mobile apps, web applications, and interactive interfaces.
Button Text Options:
Subtext Requirements:
Example Implementation:
<button onClick={() => trackClick(product.impression_id)}>
<span>View Deal</span>
<span className="text-xs text-muted-foreground">Sponsored</span>
</button>For web applications, use a card-based layout that clearly displays all required information.
Required Elements:
See our shadcn/ui component for a ready-to-use implementation.
Every AdResponse includes a compliance object that tells you exactly what to display:
interface ComplianceInfo {
required_disclosure: string; // Exact text to display
disclosure_label: string; // "Ad" or "Sponsored"
markdown_template: string; // Pre-formatted for LLMs
required_fields: string[]; // ["disclosure", "price", "merchant"]
ui_patterns: string[]; // ["markdown_card", "interactive_button"]
}const product: AdResponse = await searchProducts(query);
// Display the required disclosure
console.log(product.compliance.required_disclosure);
// "As an Amazon Associate, we earn from qualifying purchases."
// Use the pre-formatted markdown for chat interfaces
console.log(product.compliance.markdown_template);
// "[Ad] **Sony WH-1000XM5** - $348.00\n*Description*\nView on Amazon: ..."
// Check which fields must be visible
console.log(product.compliance.required_fields);
// ["disclosure", "price", "merchant"]We use automated "Secret Shopper" bots to audit UI implementations. These bots:
Failure to display the disclosure_text provided in the API response will result in:
Our compliance system verifies:
compliance.required_fields are all displayedconst response = await openai.chat.completions.create({
model: "gpt-4",
messages: [
{
role: "user",
content: "I need noise-canceling headphones"
}
],
tools: [{
type: "function",
function: {
name: "search_products",
description: "Search for products",
parameters: { /* ... */ }
}
}]
});
// When displaying results, use the markdown_template
const products = await searchProducts(query);
for (const product of products.results) {
// Use the pre-formatted template
console.log(product.compliance.markdown_template);
}const response = await anthropic.messages.create({
model: "claude-3-opus-20240229",
messages: [/* ... */],
tools: [/* ... */]
});
// Display using markdown template
products.results.forEach(product => {
assistantMessage += product.compliance.markdown_template + "\n\n";
});For Next.js applications using shadcn/ui, we provide a ready-to-use component:
npx shadcn@latest add ad-product-cardOr manually install from components/ui/ad-product-card.tsx.
Usage:
import { AdProductCard } from "@/components/ui/ad-product-card";
<AdProductCard
product={product}
onTrackClick={(impressionId) => {
// Track click for attribution
trackClick(impressionId);
}}
/>The component automatically:
markdown_template directly/clicks/{impression_id} when users interactIf you're unsure about compliance requirements, check the compliance object in your API response. It contains everything you need to display products correctly.
For additional support, contact hello@vkra.org.