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
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 thepostMessage({ })
function - To close the Modal, call the
closeModal()
function from within the template
Param | Type | Description |
---|---|---|
template | string | The HTML content you want to display in the modal (can contain CSS or JS) |
variables | Hash | Hash of variables you can interpolate into the HTML template |
size | string | Change the width of the modal, can be : normal , large or extraLarge |
onMessage | Function | Function called whenever the postMessage({}) function is called within the HTML |
Returns |
---|
Promise< ModalWrapper> |
Types
ModalWrapper
Methods | Returns | Description |
---|---|---|
close | void | Close the modal |
Updated 10 months ago
What’s Next