Skip to main content

Runtime API

window.PexipEngage.Plugin​

In the following section, window.PexipEngage.Plugin is shortened to Plugin

Plugin(element, options)​

Creates a new instance of the plugin at the given element. You can optionally pass in options.

Parameters​

  • element: HTMLElement
  • options: See configuration on how to pass parameters to this function.

Plugin.disposeAll()​

  • Return: void

Loops over all current instances and calls dispose() on them

Plugin.getInstance(num)​

Gets the instance for given index number, or undefined if it doesn't exist.

Plugin.awaitFirstInstance()​

Utility function to get a Promise that will wait until the first plugin instance is available/created.

Plugin.count​

  • Return: number

Returns the current number of active plugin instances.

Plugin.setHook("beforeAppointmentCreate", callback)​

  • Return void

Hooks are similar to events, as they will be called at a specific moment, but they allow you to modify certain properties in reaction to these events. Check out hooks.

Convenience Proxy Methods​

Constants​

Some string constants are also made available for usage. We advise you to use these instead of the actual string values, to avoid breakages.

You can find more information about events here.

Event Constants​

  • Plugin.EVENT_INIT -> string
  • Plugin.EVENT_CREATION -> string
  • Plugin.EVENT_LOADED -> string
  • Plugin.EVENT_APPOINTMENT_CREATED -> string
  • Plugin.EVENT_APPOINTMENT_EDITED -> string
  • Plugin.EVENT_APPOINTMENT_CANCELLED -> string
  • Plugin.EVENT_APPOINTMENT_COMPLETED -> string
  • Plugin.EVENT_INVITE_ACCEPTED -> string
  • Plugin.EVENT_ERROR -> string
  • Plugin.EVENT_MISCONFIGURED -> string
  • Plugin.EVENT_STEP_SHOWN -> string

Intent Constants​

You can use the following constants to identify the intention of the currently active plugin.

  • Plugin.INTENT_CANCEL -> string
  • Plugin.INTENT_EDIT -> string
  • Plugin.INTENT_INVITE -> string
  • Plugin.INTENT_RESCHEDULE -> string
  • Plugin.INTENT_COMPLETE -> string
  • Plugin.INTENT_SCHEDULE -> string

PluginInstance​

Once a plugin has been started, you can interact with it using the following API

instance.dispose()​

  • Return: void

This removes the plugin from the element it has mounted on.

instance.addEventListener(typeOrListener, callback)​

  • Return: void

Instead of attaching events to the document scope, where you will receive all events of all instances, you can also add events to a single instance using this method.

Parameters​

You can call this method in 2 ways:

Listen for all events on an instance: addEventListener(listener)​
  • listener: (event: CustomEvent) => void;
Listen for a specific event: addEventListener(type, listener)​

instance.customer​

  • Return: Customer

Returns the currently parsed & filled in customer data

interface Customer {
  id?: string | null;
  company?: string | null;
  customer_number?: string | null;
  email?: string | null;
  external_id?: string | null;
  first_name?: string | null;
  id?: string | null;
  is_existing?: boolean | string | null;
  language?: string | null;
  last_name?: string | null;
  location?: {
    geolocation?: string | null;
    city?: string | null;
    country?: string | null;
    formatted_address?: string | null;
    postal_code?: string | null;
    state?: string | null;
    street_1?: string | null;
  } | null;
  phone_number: string | null;
  timezone?: string | null;
}

instance.appointment​

  • Return: Appointment

Returns the currently known information about the appointment. This will be updated whenever the user progresses in the flow.

interface Appointment {
  id?: string;
  location: { id?: string };
  meeting_type?: string[];
  subject: { id?: string };
  meta: {
    getAll(): Record<string, unknown> | null;
    get(key: string, defaultValue: unknown): unknown;
    set(key: string, value: unknown): Record<string, unknown> | null;
    remove(key: string): void;
  };
}

instance.intention​

Returns the intention of the active plugin.

  • Return: string

instance.setCustomCSS​

You can use this method to set custom CSS for the plugin.

Check out the Custom Styling Example in our examples repository for more details.

  • Return: void