Modal

The Modal API is part of the core APIs that can be used as the foundation of many user facing interactions

showIframe()

Display a modal with custom HTML content.
Useful for many use cases including : forms, call to actions, information box, etc

1522

use cases : forms, call to action, checkout page, product page, private notes, displaying data from another API or Saas

basic usage :

Modal.showIframe({
   template: '<p>{{ content }}</p>',
   variables: { content: 'hello' },
   onMessage: (message) => {}
 })

👍

The Modal API uses the template system. We recommend you to use the UI Kit to build your HTML templates

advanced usage :

  • To send a message from within the template to the onMessage function, use the postMessage({ }) function
  • To close the Modal, call the closeModal() function from within the template
ParamType Description
templatestringThe HTML content you want to display in the modal (can contain CSS or JS)
variablesHashHash of variables you can interpolate into the HTML template
sizestringChange the width of the modal, can be : normal, large or extraLarge
onMessageFunctionFunction called whenever the postMessage({}) function is called within the HTML
Returns
Promise<ModalWrapper>

Types

ModalWrapper

MethodsReturnsDescription
closevoidClose the modal

What’s Next