How do I style my mobile modal?

Appcues Mobile is currently in beta and we are so excited for you to get it added to your apps! If you want to learn more or schedule a demo sign up for our mobile beta here.

Can I add, delete, and reorder content blocks?

Not yet - we are adding this feature set in the coming weeks and will provide the appropriate notification and documentation when ready. 

In the meantime, you can edit and style each default content block on the modal as described below.

How do I edit and style content blocks?

To style and edit content blocks, click on the block and the Mobile Builder's sidebar will display corresponding styling options. Depending on which content block you are adjusting, you can select style options such as color, size and spacing, and corner radius.  

The following context blocks are available now:

  • Image - You can upload a new PNG, JPG, or GIF image 
  • Text - The font dropdown features standard iOS and Android built-in fonts and options
  • Button - To edit button text, click the button text and type directly within it. There are several actions you can assign to a button:
    • Go to URL - An input field appears to enter a URL link.  This can be either a deep link (to another screen in your app) or a web browser link
    • Next Step - The button will link to the next step in the mobile modal Flow
    • Previous Step - The button will link to the previous step in the mobile modal Flow
    • Trigger Flow -  You can select a published Mobile Flow from the dropdown options, and you can optionally specify another screen to be redirected to before triggering the new Flow
    • Dismiss Flow - When selected, you can choose to "Mark Flow Complete" by default
    • Go to custom step - An additional dropdown will appear that a user can select any of the Flow's steps

How do I style my Flow's modal?

  • Modal styling options appear in the right sidebar. If you have clicked into a content block, simply click outside of the modal in the preview pane to populate the modal styling options:
    • Modal Close - You can either select the "X" exit functionality that lives in the top right corner of the modal or select “none”, which then requires an explicit "close" action button to be included in the content of the modal.
    • Modal Color - Select from the color wheel, or enter a hex color code to adjust the modal color
    • Border Color + Thickness - Available only for the Standard modal type. Select from the color wheel, or enter a hex color code to adjust the color, and enter a number to adjust the border thickness.
    • Corner Radius - Adjust the slider or input a number to adjust the modal's corner radius
    • Spacing - Enter a number on the spacing matrix to adjust the padding in the modal

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.