# Popup Customization

The Show Popup Form, Show Information Popup and Show Confirmation Popup blocks accept a Value Parameter called Customization that accepts an *object* value.

The *object* provided can have one or more of the following properties:

<table data-full-width="true"><thead><tr><th width="239">Property</th><th>Description</th></tr></thead><tbody><tr><td>okBtnText</td><td>Specify the label of the popup's OK button. If not set the default value of <em>OK</em>.</td></tr><tr><td>cancelBtnText</td><td>Specify the label of the popup's Cancel button. If not set the default value of <em>Cancel</em>.</td></tr><tr><td>hdrBgColor</td><td>Specify the background color of the header section of the popup. Uses an internal default if not provided.</td></tr><tr><td>hdrTxtColor</td><td>Specify the text color of the header section of the popup. Uses an internal default if not provided.</td></tr><tr><td>bodyBgColor</td><td>Specify the background color of the body section of the popup. Uses an internal default if not provided.</td></tr><tr><td>footerBgColor</td><td>Specify the background color of the footer section of the popup. Uses an internal default if not provided.</td></tr><tr><td>hdrTxtClass</td><td>Add space separated list of CSS classes to customize the text in the header section of the poup.</td></tr><tr><td>hdrH6</td><td>If set to <em>true</em>, uses the <strong><code>h6</code></strong> size for the text in the header and uses <strong><code>h5</code></strong> otherwise.</td></tr><tr><td>modalClass</td><td>Customize the horizontal size, vertical centering and other options of the popup using <a href="https://getbootstrap.com/docs/4.6/components/modal/">Bootstrap's classes</a> and/or your own. </td></tr><tr><td>cancelBtnClass</td><td>Specify the CSS classes for styling the Cancel button.</td></tr><tr><td>okBtnClass</td><td>Specify the CSS classes for styling the OK button</td></tr><tr><td>oneBtn</td><td>If set to <em>true</em>, only shows the OK button and hides the Cancel button.</td></tr><tr><td>noBtn</td><td>If set to true, hides both the OK and Cancel buttons.</td></tr><tr><td>type</td><td>Can be one of the following: modal (a popup that is shown with semi-transparent backdrop), right-sidebar (a popup that appears from the right edge and is position on the right edge of the page), left-sidebar (a popup that appears from the left edge and is position on the left edge of the page), top-sidebar (a popup that appears from the top edge and is position on the center of the page).</td></tr><tr><td>sidebarTop</td><td>The gap in pixels from the top of your page for right-sidebar, left-sidebar and top-sidebar type popups.</td></tr><tr><td>noBackdropClickQuit</td><td>For right-sidebar, left-sidebar and top-sidebar type popups, if set to <em>true</em>, prevents the popup from being closed when the user clicks outside the popup.</td></tr><tr><td>sideBarNoHeader</td><td>If set to <em>true</em>, shows right-sidebar, left-sidebar and top-sidebar type popups without a header section.</td></tr><tr><td>sideBarNoFooter</td><td>If set to <em>true</em>, shows right-sidebar, left-sidebar and top-sidebar type popups without a footer section.</td></tr></tbody></table>


---

# 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.zingy.ai/app-editor/page-flow/references/popup-customization.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.