Skip to main content

​
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 [email protected]</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

  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: 
const referral = await createReferral({
  impression_id: 'imp_123abc',
  first_name: 'John',
  last_name: 'Doe',
  email: '[email protected]',
  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