Modals

With the Cards SDK, you can create app-configured Klass Views, or KViews, that launch and control a modal to build more feature-rich integrations in Kustomer.

These modals require a target URL that points to the content to display in the modal. While the modal will load any URL, to allow the modal to communicate with the KView, this target URL page should also include a script tag that points to the Cards SDK library.

The Cards SDK supports the following methods for modals launched from a KView. For demos on how to launch and use modals, see Cards SDK: Demos.

Kustomer.modal.init

Kustomer.modal.init(options, callback) registers the given modal in the context of a single KView.

The first parameter, options, accepts several properties to initialize the modal and to pass initial data.

The second parameter, callback, is a function, which runs when a modal initializes successfully.

📘

Note: Display up to three modals at a time

Kustomer.modal.init() is required to show a modal, but this method does not directly display the modal. You will need to call Kustomer.modal.show to display a modal.

While you do not need to to show a modal to initialize the modal, only three modals can be initialized at a given time. Because of this limit, after you register three modals, you won't be allowed to register additional modals and will receive an error instead.

If you wish to register new modals after the limit, you will need to call the Kustomer.modal.destroy method to close existing modals.

The options object currently supports:

{
    id: string | number; // required; the unique identifier used for the modal on the stack. If the id has already been used, an error will be thrown.
    url: string; // required; the url to be loaded for the modal content
    additionalData: string | object | number; // optional; extra data to be passed from the kview to the modal kview on load
    title: string; // optional; The title of the modal displayed within Kustomer
    height: string | nuumber; // optional, the height of the modal
    width: string | number; // optional, the width of the modal
}

Kustomer.modal.resize

Kustomer.modal.resize(dimensions) allows you to update the height or width of the modal currently being displayed.

The dimensions object currently supports:

{
    height: string; // optional; if omitted, the new size will be based off of estimates related to the current content
    width: string; // optional; if omitted, the width will not change
}

Kustomer.modal.show

Kustomer.modal.show(id, title) displays the specified modal based on the first argument, id. If a modal with the id is not found, an error will be thrown. If a modal is found with the given id, all other modals will be hidden/closed, and the specified modal will be displayed.

This function also accepts an optional title argument in case you need to update the title of the modal from the initialized value.

Kustomer.modal.hide

Kustomer.modal.hide(id, toast) hides the specified modal based on the first argument, id. If a modal with the id is not found, an error will be thrown. If a modal is found with the given id, the modal will be hidden/closed. This function also accepts an optional toast string argument, which displays a successful toast notification on close.

Kustomer.modal.destroy

Kustomer.modal.destroy(id) will remove references to a given modal for a KView and close that modal if the modal is still visible. If no modal is found with the provided id, and error will be thrown.

Kustomer.modal.destroyAll

Kustomer.modal.destroyAll() will remove references to all initialized modals for a given KView and close any modals that are still on display.