Embed script

The embed script puts your Agoo booking page or visitor pre-registration form inside any web page: a static site, a CMS, or an app built with any framework. You add one script tag and mark where the widget goes. There is nothing to install or build.

Use the React components if your site is built with React and you want the widget rendered in your own page's styles. On WordPress, use the WordPress plugin, which uses this script for you.

These snippets will work once the script is published.

Add a booking widgetCopy Anchor Link

<script src="https://js.agoo.ardent.africa/v1/embed.js" defer></script>

<div data-agoo-booking="btype_01jv4dk79q9g8xe6szaeavsntc" data-agoo-key="agoo_pk_test_…"></div>

Add a pre-registration formCopy Anchor Link

The same script renders a pre-registration form for a site. Visitors fill in who they are, who they're visiting and your custom questions, and get their QR pass by SMS, WhatsApp or email.

The form offers only the visitor types an admin has opened for pre-registration in Console → Settings → Forms, and asks only the questions asked of the visitor, never the fields your staff fill in. See Forms and fields.

Without data-agoo-host, visitors search for their host inside the hosted page. Your page and your publishable key never see your staff directory. This is the way to offer host search on your site: the React form needs the host set.

<div data-agoo-preregister="site_01kjpt3yw0fz0v414608h9x65s" data-agoo-key="agoo_pk_test_…"></div>

Data attributesCopy Anchor Link

Unknown attributes are ignored. An element with a missing or invalid required attribute shows a short message in place of the widget and logs the reason to the browser console.

How it worksCopy Anchor Link

The script replaces each marked element's contents with an <iframe> served from https://app.agoo.ardent.africa. The booking or pre-registration form runs inside that frame, with your organisation's branding, privacy notice and custom questions, and talks to Agoo directly. Visitors' answers never pass through your page's scripts.

The frame tells the script its height and what happened, and the script passes that on to your page as events. The script only accepts messages from https://app.agoo.ardent.africa.

Pages that change after loadingCopy Anchor Link

The script renders widgets that exist when it runs. If your page adds a widget later, for example in a single-page app or a modal, call Agoo.mount after adding the element:

const el = document.createElement("div")
el.dataset.agooBooking = "btype_01jv4dk79q9g8xe6szaeavsntc"
el.dataset.agooKey = "agoo_pk_test_…"
document.querySelector("#booking-modal").append(el)

window.Agoo.mount(el)

Agoo.mount() with no argument renders every marked element on the page that isn't already rendered. Agoo.unmount(el) removes a widget.

EventsCopy Anchor Link

The script dispatches CustomEvents on window. Each event's detail includes element, the element the widget is in, so you can tell widgets apart.

<script>
  window.addEventListener("agoo:booked", (event) => {
    const { booking_id, start_at } = event.detail

    // Send a conversion to your own analytics (no personal data is included)
    window.dataLayer?.push({ event: "agoo_booking", booking_id, start_at })

    window.location.href = `/thank-you?ref=${encodeURIComponent(booking_id)}`
  })

  window.addEventListener("agoo:error", (event) => {
    console.warn("Agoo widget error", event.detail.code, event.detail.message)
  })
</script>

Events carry IDs and times, never the visitor's name, phone number or answers. To act on the full booking or visit, use the booking.created and visit.created webhooks on your server.

Content Security PolicyCopy Anchor Link

If your site sends a Content-Security-Policy header, allow the script and the frame it creates:

script-src 'self' https://js.agoo.ardent.africa;
frame-src https://app.agoo.ardent.africa;

Merge these sources into your existing script-src and frame-src directives rather than adding second copies. If your policy has no frame-src, browsers fall back to child-src, then default-src: allow https://app.agoo.ardent.africa there instead.

The script at /v1/embed.js receives backwards-compatible fixes without changing its address, so you can't pin it with a fixed integrity hash. A breaking change would ship at a new address (/v2/).

Test modeCopy Anchor Link

With an agoo_pk_test_… key, the widget shows a small "Test mode" label and works on your test-mode sandbox: bookings and pre-registrations are created there, confirmations appear in the console's test outbox, and nothing is sent to the visitor. Swap in your agoo_pk_live_… key when you go live.

TroubleshootingCopy Anchor Link

RelatedCopy Anchor Link