> ## Documentation Index > Fetch the complete documentation index at: https://docs.vantio.app/llms.txt > Use this file to discover all available pages before exploring further. # QR Codes & Assets > Working with QR codes, posters, and visual assets in Vantio ## QR Code Posters Vantio generates unique QR codes for each poster placement. These QR codes link scans back to the ambassador who placed the poster. ## Getting QR Code URLs Each poster has a `qr_code_url` that you can use to display or download the QR code: ```javascript theme={null} // Get poster with QR code URL const response = await fetch(`/api/v1/posters/${posterId}`, { headers: { 'Authorization': `Bearer ${API_KEY}` } }); const poster = await response.json(); const qrCodeUrl = poster.qr_code_url; ``` ## Displaying QR Codes ### In HTML ```html theme={null} QR Code

``` ### In React ```jsx theme={null} function PosterQRCode({ posterId }) { const [qrCodeUrl, setQrCodeUrl] = useState(null); useEffect(() => { async function fetchPoster() { const response = await fetch(`/api/v1/posters/${posterId}`, { headers: { 'Authorization': `Bearer ${API_KEY}` } }); const poster = await response.json(); setQrCodeUrl(poster.qr_code_url); } fetchPoster(); }, [posterId]); if (!qrCodeUrl) return

; return (

Download QR Code

); } ``` ## Downloading QR Codes ### JavaScript ```javascript theme={null} async function downloadQRCode(posterId) { const response = await fetch(`/api/v1/posters/${posterId}`, { headers: { 'Authorization': `Bearer ${API_KEY}` } }); const poster = await response.json(); // Download the QR code image const imageResponse = await fetch(poster.qr_code_url); const blob = await imageResponse.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `poster-${posterId}-qr.png`; a.click(); window.URL.revokeObjectURL(url); } ``` ### Node.js ```javascript theme={null} const fs = require('fs'); const https = require('https'); async function downloadQRCode(posterId, outputPath) { const response = await fetch(`https://vantio.app/api/v1/posters/${posterId}`, { headers: { 'Authorization': `Bearer ${API_KEY}` } }); const poster = await response.json(); return new Promise((resolve, reject) => { const file = fs.createWriteStream(outputPath); https.get(poster.qr_code_url, (response) => { response.pipe(file); file.on('finish', () => { file.close(); resolve(); }); }).on('error', reject); }); } ``` ## Embedding QR Codes in Documents ### PDF Generation ```javascript theme={null} const PDFDocument = require('pdfkit'); const fetch = require('node-fetch'); async function generatePosterPDF(posterId) { const response = await fetch(`https://vantio.app/api/v1/posters/${posterId}`, { headers: { 'Authorization': `Bearer ${API_KEY}` } }); const poster = await response.json(); const doc = new PDFDocument(); doc.pipe(fs.createWriteStream('poster.pdf')); // Add QR code image const qrImage = await fetch(poster.qr_code_url); const qrBuffer = await qrImage.buffer(); doc.image(qrBuffer, { fit: [200, 200], align: 'center' }); doc.text('Scan this QR code to sign up!', { align: 'center' }); doc.end(); } ``` ## Custom Poster Templates You can create custom poster templates that include the QR code: ```html theme={null} Ambassador Poster

Join Our Program!

Scan the QR code below to get started

Questions? Contact us at support@example.com

``` ## Batch QR Code Generation Generate QR codes for multiple posters: ```javascript theme={null} async function generateAllPosterQRCodes(programId) { const response = await fetch( `https://vantio.app/api/v1/posters?programId=${programId}`, { headers: { 'Authorization': `Bearer ${API_KEY}` } } ); const { posters } = await response.json(); const qrCodes = posters.map(poster => ({ posterId: poster.id, qrCodeUrl: poster.qr_code_url, location: poster.location })); return qrCodes; } ``` ## Best Practices 1. **Cache QR code URLs** - QR codes don't change, so cache the URLs 2. **Provide download options** - Let ambassadors download QR codes easily 3. **Use appropriate sizes** - QR codes should be at least 2x2 inches for scanning 4. **Test scanning** - Always test QR codes before printing 5. **Include instructions** - Add text explaining what to do after scanning ## Image Assets ### Profile Pictures Referrals can include profile pictures: ```javascript theme={null} const referral = await createReferral({ impression_id: 'imp_123abc', first_name: 'John', last_name: 'Doe', email: 'john@example.com', profile_picture: 'https://example.com/profiles/john.jpg' }); ``` ### Displaying Profile Pictures ```jsx theme={null} function ReferralCard({ referral }) { return (

{referral.profile_picture && ( ${`${referral.first_name}$ )}

{referral.first_name} {referral.last_name}

); } ``` ## Next Steps * Learn about [Poster Management](/api-reference/posters/list-posters) in the API * Check [Code Examples](/essentials/code) for more integration patterns * Explore [Integration Patterns](/essentials/reusable-snippets) for reusable code