QR Codes & Assets

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:

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

<img src="https://example.com/qr-codes/poster_123abc.png" alt="QR Code" />

In React

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 <div>Loading...</div>;
  
  return (
    <div>
      <img src={qrCodeUrl} alt="Poster QR Code" />
      <a href={qrCodeUrl} download>Download QR Code</a>
    </div>
  );
}

Downloading QR Codes

JavaScript

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

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

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:

<!DOCTYPE html>
<html>
<head>
  <title>Ambassador Poster</title>
  <style>
    .poster {
      width: 8.5in;
      height: 11in;
      padding: 1in;
      text-align: center;
    }
    .qr-code {
      width: 3in;
      height: 3in;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="poster">
    <h1>Join Our Program!</h1>
    <p>Scan the QR code below to get started</p>
    <img class="qr-code" src="POSTER_QR_CODE_URL" alt="QR Code" />
    <p>Questions? Contact us at support@example.com</p>
  </div>
</body>
</html>

Batch QR Code Generation

Generate QR codes for multiple posters:

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

Cache QR code URLs - QR codes don’t change, so cache the URLs
Provide download options - Let ambassadors download QR codes easily
Use appropriate sizes - QR codes should be at least 2x2 inches for scanning
Test scanning - Always test QR codes before printing
Include instructions - Add text explaining what to do after scanning

Image Assets

Profile Pictures

Referrals can include profile pictures:

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

function ReferralCard({ referral }) {
  return (
    <div>
      {referral.profile_picture && (
        <img 
          src={referral.profile_picture} 
          alt={`${referral.first_name} ${referral.last_name}`}
          style={{ width: 50, height: 50, borderRadius: '50%' }}
        />
      )}
      <h3>{referral.first_name} {referral.last_name}</h3>
    </div>
  );
}

Next Steps

Learn about Poster Management in the API
Check Code Examples for more integration patterns
Explore Integration Patterns for reusable code

Get Started

Essentials

QR Codes & Assets

QR Code Posters

Getting QR Code URLs

Displaying QR Codes

In HTML

In React

Downloading QR Codes

JavaScript

Node.js

Embedding QR Codes in Documents

PDF Generation

Custom Poster Templates

Batch QR Code Generation

Best Practices

Image Assets

Profile Pictures

Displaying Profile Pictures

Next Steps

​QR Code Posters

​Getting QR Code URLs

​Displaying QR Codes

​In HTML

​In React

​Downloading QR Codes

​JavaScript

​Node.js

​Embedding QR Codes in Documents

​PDF Generation

​Custom Poster Templates

​Batch QR Code Generation

​Best Practices

​Image Assets

​Profile Pictures

​Displaying Profile Pictures

​Next Steps

QR Code Posters

Getting QR Code URLs

Displaying QR Codes

In HTML

In React

Downloading QR Codes

JavaScript

Node.js

Embedding QR Codes in Documents

PDF Generation

Custom Poster Templates

Batch QR Code Generation

Best Practices

Image Assets

Profile Pictures

Displaying Profile Pictures

Next Steps