Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Contact Us
  • Home
  • Mobile
  • Building Mobile Experiences

Styling Mobile Modals

Updated at January 18th, 2023

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Installation & Developers
    Installing Appcues Installing Appcues Mobile API & Data Troubleshooting Extras
  • User Experiences
    Web Experiences Building Web Experiences Building Mobile Experiences Customization & Styling Targeting Studio Troubleshooting Use Cases FAQ
  • Mobile
    Installation & Overview Building Mobile Experiences Mobile Analytics Troubleshooting
  • Account Management
    Subscription Users & Data
  • Analytics
    Experience and Event Analytics Data
  • Best Practices
    Use Cases Pro Tips PLG FAQ
  • Integrations
    Integration Documents Use Cases Resources
  • Post-mortem
    System Incidents
+ More

Table of Contents

Can I add, delete, and reorder content blocks? How do I edit and style content blocks? How do I style my Flow's modal?

Can I add, delete, and reorder content blocks?

A new content block can be added by selecting the green ➕ that displays when hovering above, below or to the side of a step when in step mode, to switch to step mode click outside of the modal preview area or click on the step you're working on in the bottom builder bar.
Content blocks can be reordered by hovering over a content block that isn't actively being edited and clicking and dragging to the new desired location.
An entire row can be reordered by dragging the handle that appears on the right of the row and moving it to the new position.

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/GIF - You can upload a new PNG, JPG, or GIF image
  • Text - The font dropdown features standard iOS and Android built-in fonts and options
  • Video - Add your videos from common video services like YouTube, Wistia, or Vimeo to embed videos into a modal.
  • Emoji - An emoji can be selected and added to the modal. The emoji that is displayed on the device will use the native emoji library.
  • Icon with Text - A block with a customizable icon along with customizable title and text.
  • Hero/Header - A block with a title, text, and background image.
  • Text Input - A survey block for open text survey responses.
  • Single-select - A radio select survey block where users can select a single response. 
  • Multi-select - A check box survey block where users can select multiple items.
  • Rating - A survey block with Number, Star, and Emoji rating 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.
    • Background - Add a background image for the entire modal.
    • Step Indicator - Show/hide and customize step indicators at bottom of a modal.
    • 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
    • Dark Mode - Select the ☾ icon in the preview display settings or color selector tool. Updating the color in this mode will update the selected color setting for users viewing the experience with dark mode enabled. If no dark mode color is set the default color will be the light mode color.

 

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Mobile Overview
  • Building Mobile Flows
  • Managing mobile flows and viewing analytics
  • Targeting and Publishing Mobile Flows
Appcues logo

Product

Why Appcues
How it works
Integrations
Security
Pricing
What's new

Use cases

User Onboarding Software
Feature Adoption Software
NPS & Surveys
Announcements
Insights
Mobile Adoption

Company

About
Careers
we're Hiring

Support

Developer Docs
Contact

Resources

The Appcues Blog
Product Adoption Academy
GoodUX
Case studies
Webinar Series
Made with Appcues
Appcues University

Follow us

Facebook iconTwitter icon greyLinkedin iconInstagram icon
© 2022 Appcues. All rights reserved.
SecurityTerms of ServicePrivacy Policy
Expand