Widget loading

One asynchronous script and one custom element are all you add. From there the widget boots itself, pulls everything it needs from Koala's CDN, and tells you when it is ready. This section covers what happens, the order you must set things up in, and what it costs your page.

What you place on the page

Two things:

• The custom element, where the widget should appear:

  <koala-smartblock-sb4 data-config-name="your-slug"></koala-smartblock-sb4>

  data-config-name is your partner slug; it tells the widget which configuration to load.
• The loader script, included once and loaded asynchronously.

What happens on load

Once the loader runs, the widget:

1. Registers the custom element and boots.
2. Reads its data-config-name and fetches your versioned configuration and assets from Koala's CDN.
3. Waits for window.CTStore.koala (your data and the required namespace) to be present.
4. Prices the configured bundles for the trip (quoting).
5. Renders the priced options, firing onReady once it has loaded and onAvail once the prices are in.

You do not orchestrate any of this. You set things up, include the script, and listen for onReady and onAvail.

Ordering rules

The one thing you must get right is order:

• Create the custom element and initialize window.CTStore, including the koala namespace and your dataSource, before the loader script runs.
• The recommended order is: element and CTStore first, then inject the script.
• window.CTStore.koala must exist by the time the widget starts. If it is not there shortly after startup, the widget gives up and logs an error to the console (without the koala namespace there is no event surface to emit on).

Footprint

• The loader is asynchronous and non-blocking: it does not hold up your page's render.
• Configuration and assets are served from Koala's CDN and cached, so repeat loads are fast.
• The widget inherits the available width from its container; you do not size it.

Restarting

If the trip data changes after load, for example the traveller edits their dates, you can re-initialize the widget by calling window.CTStore.koala.restart(). It re-reads dataSource and renders again.