Drop this into a CloudPage's HTML block (Content Builder → CloudPages → HTML Content Block). It loads the Asset Picker, opens it on button click, and writes the selected URL into a visible input (which can then be submitted via a form to a Data Extension).

HTML
<!-- Container -->
<button id="open-picker-btn" type="button">Choose Image</button>
<input type="text" id="selected-image-url" name="ImageURL" readonly placeholder="No image selected" />
<img id="preview-img" style="max-width:200px; display:none;" />

<!-- Scaleflex Asset Picker assets -->
<link rel="stylesheet" href="https://cdn.filerobot.com/asset-picker/latest/style.css">
<script src="https://cdn.filerobot.com/asset-picker/latest/index.js"></script>

<script>
  var picker = null;

  function initPicker() {
    picker = new AssetPicker({
      token: 'YOUR_SCALEFLEX_TOKEN', // from Scaleflex dashboard
      onSelect: function (assets) {
        if (!assets || !assets.length) return;
        var url = assets[0].cdnUrl || assets[0].url;

        document.getElementById('selected-image-url').value = url;

        var preview = document.getElementById('preview-img');
        preview.src = url;
        preview.style.display = 'block';

        picker.close();
      },
      onClose: function () {
        console.log('Asset picker closed');
      }
    });
  }

  document.getElementById('open-picker-btn').addEventListener('click', function () {
    if (!picker) initPicker();
    picker.open();
  });
</script>

Replace YOUR_SCALEFLEX_TOKEN with the real token/config from the Scaleflex dashboard, and confirm the exact CDN script URL and API (AssetPicker, onSelect payload shape) against the current docs — Scaleflex has shipped multiple SDK versions (legacy FilerobotFilePicker, newer @scaleflex/asset-picker), so the constructor name and callback signature can differ by version.

Progress:

• Step 1: Get Scaleflex credentials (token/company, container/folder scope) from client's Scaleflex dashboard
• Step 2: Confirm which SDK build to use (script tag vs npm module) — CloudPages only supports static HTML/JS, so use the CDN <script> build, not an npm/bundler-based one
• Step 3: Build the CloudPage HTML block with button + hidden/visible field + preview
• Step 4: Wire button click → open picker
• Step 5: Wire onSelect callback → write URL into input field, update preview
• Step 6: Connect the input field to a form (AMPscript RequestParameter or a <form> POST) so the URL gets saved to a Data Extension or passed along to the next page
• Step 7: Test in an actual CloudPage (not just local HTML) — check CSP/iframe restrictions and cross-domain script loading behave inside SFMC's iframe-based CloudPage renderer
• Step 8: Handle edge cases: user cancels picker, no image selected, multiple selection disabled