Skip to content
Waitwhile Embed

Embed Reference

Configuration options

You can pass configuration options to the Waitwhile.Embed or Waitwhile.Modal initialize call:

const configurationOptions = {
  locationId: 'WAITWHILE_LOCATION_ID',
};


// returns a component instance
const inline = Waitwhile.Embed(configurationOptions);


// returns { dialog, instance }
const modal = Waitwhile.Modal(configurationOptions);

Below are all the available options.

locationId (required)

type: string

The ID or short name of the Waitwhile Location you would like to embed.

publicVisitId

type: string

The public ID of a visit. Used to embed a status page.

kiosk

type: boolean
default: false

Enables kiosk mode.

locale

type: string

Sets the current locale, e.g. en-US. Must be listed as a supported locale in your Waitwhile Location settings.

showHeader

type: boolean
default: true

Allows you to hide the app header.

prefill

type: object

Prefill data field values, and/or set services and resources.

{
  prefill: {
    name: 'Jane Doe',
    HyeWeyWa7y6GPGQa9OFz: 'My custom input field',
  },
}

onLocationAvailable()

type: (callback: (location: WaitwhileLocation) => void) => void

onLocalesAvailable()

type: (callback: (locales: WaitwhileLocale[]) => void) => void

onLocationStatusChanged()

type: (callback: (locationStatus: WaitwhileLocationStatus) => void) => void

onRouteChanged()

type: (callback: (path: string) => void) => void

Component instance

render()

type: (container : string | HTMLElement, context : 'iframe' | 'popup') => Promise<void>

Render the Waitwhile component to a given container.

  • container: can be a string selector like '#my-container' or a DOM element like document.body
  • context: defaults to iframe or defaultContainer if set. Can be overriden to explicitly specify 'iframe' or 'popup'.
const waitwhile = Waitwhile.Embed({ ... });


waitwhile.render('#my-container').then(() => {
  console.info('Waitwhile was successfully rendered');
});

clone()

type: () => WaitwhileComponentInstance

Clones the current instance with the exact same set of props

updateProps()

type: ({ [string ] : any }) => Promise<void>

Update configuration options after an instance has been rendered.

const waitwhile = Waitwhile.Embed({
  locale: 'sv-SE',
});


waitwhile.render('#container').then(() => {
  waitwhile.updateProps({
    locale: 'en-US',
  });
});

event.on()

type: (event: string, callback: () => void) => void

Event emitter that can be used to listen for the following events: RENDER, RENDERED, PRERENDER, PRERENDERED, DISPLAY, ERROR, CLOSED, PROPS, RESIZE.

const waitwhile = Waitwhile.Embed();
waitwhile.render('#container');


wwaitwhile.event.on('RENDERED', () => {
  console.log('Waitwhile was rendered!');
});

A note on Zoid

The Waitwhile component instance shares a lot with a Zoid component instance. Take a look at the documentation on GitHub for more info.