Use the UPCS Embed in Plain HTML

The embed works on any page that can load a script, so plain HTML is enough. This page shows an illustrative implementation pattern: a small order form where the selected UPCS code is written into hidden fields and submitted with the form.

The page

<form action="/order" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" required>

  <div id="upcs-map"></div>
  <p id="upcs-status" aria-live="polite">No location selected yet.</p>

  <input type="hidden" name="upcs_code" id="upcs_code">
  <input type="hidden" name="latitude" id="latitude">
  <input type="hidden" name="longitude" id="longitude">

  <button type="submit">Place order</button>
</form>

<script src="https://api.upcs.io/api/embed/upcs-embed.js"></script>
<script>
  fetch('/upcs-session')
    .then(function (r) { return r.json(); })
    .then(function (data) {
      UPCS.mount('#upcs-map', {
        sessionToken: data.session_token,
        height: '420px',
        style: 'streets',
        onSelect: function (r) {
          document.getElementById('upcs_code').value = r.upcs_code;
          document.getElementById('latitude').value = r.latitude;
          document.getElementById('longitude').value = r.longitude;
          document.getElementById('upcs-status').textContent =
            'Selected: ' + r.upcs_code;
        },
        onError: function () {
          document.getElementById('upcs-status').textContent =
            'The map is unavailable. You can still enter your address.';
        }
      });
    });
</script>

What the server does

/upcs-session is an endpoint on your own site that calls POST /v1/embed/sessions with your key and returns only the session_token. Examples: PHP, Node.js, Python.

Good practice

• Use aria-live text so screen-reader users hear the selection.
• Do not make the map the only way to give an address; the form should work without it.
• Re-verify the posted code on the server: look up a UPCS code.
• Allow your origin first: allowed origins explained.

The complete walkthrough is in embed the UPCS map on a website.