Get started

Open the Picker in five minutes.

Use one hosted browser script and two same-origin endpoints on your CMS backend. Your persistent tenant credential never enters the browser.

Choose your environment

Build and validate against Test, then switch the API, Picker SDK and pickerOrigin together when you go live. The runnable examples below use Production.

Environment	Origin	REST API	Picker SDK
Production	`https://collection.vieunite.com`	`https://collection.vieunite.com/v1`	`https://collection.vieunite.com/sdk/v1/picker.js`
Test	`https://collection-test.vieunite.com`	`https://collection-test.vieunite.com/v1`	`https://collection-test.vieunite.com/sdk/v1/picker.js`

Configure your CMS backend

Store the tenant token in your secret manager or server environment. Do not expose it through HTML, browser JavaScript, logs, URLs or client-side storage.

server environment.env

VIEUNITE_TENANT_TOKEN=<tenant-token>
CMS_PUBLIC_URL=https://cms.example.com

export VIEUNITE_TENANT_TOKEN="<tenant-token>"
export CMS_PUBLIC_URL="https://cms.example.com"

$env:VIEUNITE_TENANT_TOKEN = "<tenant-token>"
$env:CMS_PUBLIC_URL = "https://cms.example.com"

Confirm the environment and available capabilities from the server:

terminalcURL

curl "https://collection.vieunite.com/v1/capabilities" \
  -H "Authorization: Bearer $VIEUNITE_TENANT_TOKEN"

Add two CMS bridge endpoints

Your browser calls your own authenticated CMS backend. The CMS backend creates the short Picker session and redeems the completed selection with its tenant token.

Browser → CMSPOST /api/vieunite/picker/session

Browser → CMSPOST /api/vieunite/picker/redeem

Each endpoint must verify the logged-in editor and CSRF protection. Configure the callback origin on the server, bind the session to the current editor or content entry, and use a stable Idempotency-Key during redemption.

Copy the complete backend contract

Load the hosted SDK

Create one Picker client for the lifetime of your editor page. The default presentation is a responsive modal; no Picker CSS or framework dependency is added to your CMS.

cms-editor.htmlJavaScript

<script src="https://collection.vieunite.com/sdk/v1/picker.js"></script>

<button type="button" id="choose-artwork">Choose artwork</button>

<script>
  const picker = VieunitePicker.create({
    sessionEndpoint: "/api/vieunite/picker/session",
    redeemEndpoint: "/api/vieunite/picker/redeem",
    pickerOrigin: "https://collection.vieunite.com",
  });

  document.querySelector("#choose-artwork")
    .addEventListener("click", async () => {
      const result = await picker.open({
        allowedTypes: ["artwork"],
        selectionMode: "multiple",
        maxSelection: 0,
      });

      if (result.status === "selected") {
        await saveReferences(result.selection);
      }
    });
</script>

const picker: VieunitePicker.PickerClient = VieunitePicker.create({
  sessionEndpoint: "/api/vieunite/picker/session",
  redeemEndpoint: "/api/vieunite/picker/redeem",
  pickerOrigin: "https://collection.vieunite.com",
});

const chooseButton = document.querySelector<HTMLButtonElement>("#choose-artwork");

chooseButton?.addEventListener("click", async () => {
  const result: VieunitePicker.PickerResult = await picker.open({
    allowedTypes: ["artwork"],
    selectionMode: "multiple",
    maxSelection: 0,
  });

  if (result.status === "selected") {
    const selection: VieunitePicker.SelectedReference[] = result.selection;
    await saveReferences(selection);
  }
});

Save the returned references

A selected artwork includes the opaque rendition key chosen by the editor, including a server-returned resize-only version such as auto_1080p. Persist this object with the CMS entry—not the thumbnail URL or metadata snapshot.

selected resultJSON

{
  "provider": "vieunite-art-collection",
  "type": "artwork",
  "id": "art_456",
  "rendition": "crop"
}

When the entry is reopened, rendered or published, resolve the saved reference from your backend to receive current metadata, rights, availability and every current version descriptor. Then send the saved rendition to the signed URL endpoint to obtain its image bytes.

Understand the Artwork attributes Resolve the reference Deliver the selected asset

Verify the experience

Run the same flow now.

The hosted examples use a restricted demo bridge. They demonstrate the browser experience only; production CMSs must implement their own authenticated bridge endpoints.

Open minimal example ↗ Open CMS workflow ↗