Modals

Announcements, decisions, and more -- powerful and beautiful messaging with modal UI

Modals are a pop-over UIs that can be used to present your users with information, or several options in the form of buttons. The modal UI covers the entire app.

• Powerful configuration-driven UI with support for typography, buttons, images, and symbols

• Theme support to make the modal feel native to your app/brand look, including dark mode

• Rich "action" system: buttons can launch other CriticalMoments actions (links, banners) or deep link into native actions in your app

Examples

Dark mode with purple accent color, light mode, and a custom theme

These examples are all available in our Sample App, including config.

Config Structure

Modals are configured as named actions of the type modal .

The actionData block has the following options:

• showCloseButton [bool, optional, default true]: if explicitly set to false, will hide the close button of the modal, and disable any system gestures to dismiss the modal. This forces the user to use a button to dismiss. If used, you should have at least 1 button so it's possible to close the modal.

• themeName [string, optional]: a theme name to use for this modal, overriding the default theme. See named themes in Themes. Note: typically you should set one "defaultTheme" in the theme config to be shared by all UI, and not need a customThemeName per modal; this option is available if you need one modal to have a different style.
• content [object, required]

  • pageType [string, required]: always the value stack. In the future more layouts may be added.

  • pageData [object, required]

    • sections [array, required]: Sections define the content of your modal's view (above the buttons). At least one section is required. See documentation for the sections available.
    • buttons [array, optional]: If specified, these buttons will appear on the bottom of the modal. See the documentation for the buttons.

Sample Config

Sample confguration for the left most example above, including a "More info" button which launches the brower to provide more information. Our sample app has the config for all of the examples above, and more.

"simpleModalAction": {
    "actionType": "modal",
    "actionData": {
        "content": {
            "pageType": "stack",
            "pageData": {
                "sections": [
                    {
                        "pageSectionType": "image",
                        "pageSectionData": {
                            "imageType": "sf_symbol",
                            "height": 60.0,
                            "imageData": {
                                "symbolName": "coloncurrencysign.square.fill",
                                "weight": "light",
                                "mode": "hierarchical"
                            }
                        }
                    },
                    {
                        "pageSectionType": "title",
                        "pageSectionData": {
                            "title": "Important Announcement"
                        }
                    },
                    {
                        "pageSectionType": "title",
                        "topSpacingScale": 1.5,
                        "pageSectionData": {
                            "title": "New pricing coming soon.",
                            "scaleFactor": 0.64
                        }
                    },
                    {
                        "pageSectionType": "body",
                        "topSpacingScale": 4,
                        "pageSectionData": {
                            "bodyText": "Your free plan won't be impacted! However, if you want to upgrade to 'Pro' now is your last chance to lock in our current pricing."
                        }
                    }
                ],
                "buttons": [
                    {
                        "title": "Got it!",
                        "style": "large"
                    },
                    {
                        "title": "More info",
                        "preventDefault": true,
                        "style": "info",
                        "actionName": "web_link_action"
                    }
                ]
            }
        }
    }
}