@fotofit/twibbon

Render FotoFit campaign frames in the participant's browser. The selected photo and generated PNG are not uploaded to FotoFit.

Install

npm install @fotofit/twibbon

import { createTwibbonClient } from "@fotofit/twibbon";

const client = createTwibbonClient({ campaignId: "project_123", token: browserToken });
const campaign = await client.load();
const result = await client.render({
  photo: fileInput.files[0],
  frameId: campaign.frames[0].frameId,
  fields: { name_field_id: "Faris" },
});
result.download();

CDN

Use a pinned version in production:

<script src="https://cdn.jsdelivr.net/npm/@fotofit/[email protected]/dist/twibbon.min.js"></script>
<script>
  const client = FotoFitTwibbon.createTwibbonClient({
    campaignId: "project_123",
    token: browserToken
  });
</script>

You can also use unpkg:

<script src="https://unpkg.com/@fotofit/[email protected]/dist/twibbon.min.js"></script>

Avoid @latest in production because it can change without a deploy. The CDN file is minified and has no public source map. Browser code can still be inspected; access is protected by the short-lived token, campaign scope, approved origin, and source API-key status.

Browser token

Create the token on your backend using the existing FotoFit API key. Never expose that permanent key in browser JavaScript.

const response = await fetch("https://api.fotofit.in/api/v1/api/twibbon/browser-tokens", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.FOTOFIT_API_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    applicationId: "sdkapp_123",
    campaignId: "project_123",
    origin: "https://example.com"
  })
});
const { browserToken } = await response.json();

First create an SDK application and configure its exact HTTPS origins using POST /api/v1/api/twibbon/applications. Reuse that application for any published campaign you own.