# Modals

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

<figure><img src="https://648587291-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FntHgSpSJ3tixDsCMhK2u%2Fuploads%2FmUmAH0q287bnmfOgsO81%2F3up.png?alt=media&#x26;token=8869de7e-b735-4445-b084-41250d0b2e2b" alt=""><figcaption><p>Dark mode with purple accent color, light mode, and a custom theme</p></figcaption></figure>

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

### Config Structure

Modals are configured as [named actions](https://docs.criticalmoments.io/actions-in-app-messaging/actions-overview) 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](https://docs.criticalmoments.io/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](https://docs.criticalmoments.io/actions-in-app-messaging/modals/modal-content-sections).
    * `buttons` \[array, optional]: If specified, these buttons will appear on the bottom of the modal. See [the documentation for the buttons](https://docs.criticalmoments.io/actions-in-app-messaging/modals/modal-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.

```json
"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"
                    }
                ]
            }
        }
    }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.criticalmoments.io/actions-in-app-messaging/modals.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.