Knowledge Base
Mobile App User Guide › App Designer

App Designer User Guide

App Designer User Guide

Your church’s mobile app is often the first touchpoint members have with your ministry on the go. Whether they’re checking service times, watching a sermon, or giving a gift, the app should feel like an extension of your church—on-brand, intuitive, and purposeful. The App Designer gives you the power to build that experience without writing a single line of code.

The App Designer is a visual drag-and-drop builder that lets you customize the layout and content of your church’s native mobile application. Instead of relying on a one-size-fits-all template, you arrange content blocks, configure navigation tabs, set colors and images, and preview changes in real time. What you see in the designer is what your congregation sees in the app.

Churches use the App Designer to highlight giving, feature recent sermons, showcase events, embed web content, and connect to church management systems like Ministry Platform and Rock RMS. You can add image sliders, text rows, icon buttons, video blocks, rich content sections, and integration-specific widgets. Each block can link to internal app pages, external URLs, giving, sermons, events, groups, and more. The result is a tailored mobile experience that reflects your church’s mission and priorities.

The App Designer works alongside the broader mobile app platform. Your header logo, menu title, and sponsor footer are set in App Settings. Sermon content comes from your media library. Giving connects to your OnlineGiving.org giving pages. ChMS integrations pull events, groups, and announcements from your church management system. The designer is where you bring it all together into a cohesive, beautiful app.

In this article, we’ll overview the App Designer from top to bottom: how to access it, how the four-panel layout works, how to build pages and add content blocks, how to configure links and conditional display, how to use dynamic content variables, how to preview and publish, and how to leverage multi-campus and ChMS integrations.

Key Takeaways

  • Visual Drag-and-Drop: Arrange content blocks by dragging them from the Components panel into the Device preview. Reorder blocks within pages and the side menu.
  • Page-Based Layout: The app is organized as a tree of pages. Add pages at the root or under other pages. The Application Menu defines the side menu; the Home Window is the main content area.
  • 28+ Content Blocks: Choose from Blank Row, Card Slider, Image Row, Text Row, Image, Icon Button, Grid, Image Slider, Rich Text, HTML Code, Web View, Video, 4x4+1 Grid, Category Dash, Social Feed, Google Map, Verse of the Day, Latest Message, Latest Series, and integration-specific blocks.
  • 30+ Link Types: Every linkable block can point to giving, sermons, events, groups, custom forms, external URLs, or internal app pages.
  • Conditional Display: Show or hide components based on preferred campus, device type (phone/tablet), or user state (logged in/out).
  • Save as Draft vs. Publish: Use Save as Draft to test changes without affecting the live app. Use Save & Publish to push changes to Production, Staging, Review, or Development.
  • Device Preview: View your design on phone and tablet, rotate between portrait and landscape, and zoom. The preview updates in real time as you edit.
  • Navigation Tabs: Add up to five tabs on the Home Window for quick access to Give, Sermons, Events, and more. Limited to one Navigation Tabs block per app.

Table of Contents

  1. Accessing the App Designer
  2. App Designer Layout
  3. Working with Pages
  4. Content Blocks Reference
  5. Link Types Reference
  6. Conditional Display
  7. Dynamic Content Variables
  8. Navigation Tabs
  9. Preview and Device Testing
  10. Environments and Publishing
  11. Designer Lock
  12. Multi-Campus Configuration
  13. ChMS Integration Components
  14. Mobile App Analytics & Events
  15. Tips and Best Practices
  16. Frequently Asked Questions

Accessing the App Designer

To open the App Designer:

  1. Log in to the control panel.
  2. Click “App Designer” in the left navigation menu (under Mobile App).
  3. The App Designer loads with the Pages panel, Components panel, Device preview, and Properties panel.

You must have the Native App Admin role to access the App Designer. If you do not see App Designer in the menu, contact your administrator.

If your church has not yet set up the mobile app, you may be redirected to the Mobile App for Churches info page first. The App Designer requires a header logo to be configured in App Settings. Once the header logo and other initial settings are in place, the App Designer will be available. Contact OnlineGiving.org to get started with the native mobile app.

App Designer Layout

The App Designer is divided into four main areas: the Pages panel (left), the Components panel (below Pages or adjacent), the Device preview (center), and the Properties panel (right). Understanding each area helps you work efficiently.

Pages Panel

The Pages panel displays a tree of all pages in your app. The root typically includes the Application Menu (the side menu that slides out when users tap the hamburger icon) and the Home Window (the main content area). You can add more pages at the root or nest them under existing pages.

Click a page in the tree to select it. The Device preview updates to show that page’s content. Use the plus (+) dropdown to Add Page to Root or Add Page Under Current. New pages start with a blank layout; you then add components from the Components panel.

You cannot add a new page under the Application Menu. The Application Menu is a special page that defines the side menu items. Add pages elsewhere and link to them from the menu or from blocks.

Components Panel

The Components panel lists all available content blocks (widgets) you can add to the current page. The list changes depending on which page is selected. For example, the Home Window offers more block types than the Application Menu, including the Navigation Tabs block (available only on the Home Window).

Each block is shown as a thumbnail with a preview image and name. To add a block, drag it from the Components panel and drop it onto the Device preview in the desired position. The block is inserted at the drop location.

Device Preview

The Device preview shows how your app will look on a phone or tablet. Use the Device dropdown to switch between device models (e.g., iPhone, Android). Use the rotate icon to flip between portrait and landscape. Use the zoom dropdown to scale the preview (100%, 75%, 50%).

An App Environment dropdown lets you switch between Production, Staging, Development, and Review (when available). Use Staging or Development to test changes before publishing to Production. Review is used during Apple/Google app store review.

The preview updates in real time as you add, remove, or reorder blocks and change properties. When the designer is locked (e.g., during app store review), a message appears instead of the designer, and you may see a fun game to pass the time.

Properties Panel

When you select a block or page in the Device preview, the Properties panel shows configurable options for that item. The panel title displays the selected item’s name. Use the search box to filter properties if the list is long.

Properties vary by block type. For example, an Image block might have image URL, link, and alt text. A Text Row might have title, subtitle, and text color. A Navigation Tabs block has background color, border color, and a list of tabs, each with its own label, icon, link, and images. Use the toggle to collapse or expand the Properties panel if you need more space for the preview.

Working with Pages

Page Tree and Adding Pages

The page tree shows the hierarchy of your app. Each page can have child pages. Use the plus (+) dropdown in the Pages panel to add a new page. Choose Add Page to Root to add a top-level page, or Add Page Under Current to add a child page under the currently selected page.

New pages appear in the tree with a default title. Click the page to select it, then configure its properties in the Properties panel. Add components by dragging them from the Components panel onto the Device preview.

Application Menu and Home Window

The Application Menu is a special page that defines the side menu (hamburger menu) items. When users tap the menu icon in the app header, the side menu slides out and displays the components you add to the Application Menu. Use App Menu blocks like Blank Row, Card Slider, Image Row, Text Row, Image, Icon Button, and Grid to build the menu.

The Home Window is the main content area users see when they open the app. It supports all page blocks plus the Navigation Tabs block, which appears as horizontal tabs at the top of the Home Window. Each tab can link to a different section of your app.

Page Properties

Select a page in the tree to configure its properties:

  • Title: The display name for the page in navigation and the header.
  • Header Mode: Default or Transparent. Transparent allows content to show through the header.
  • Background Color: Use the color picker to set the page background.
  • Background Image: Upload an image for the page background. Images are compressed automatically.

Copy and Delete Page

Use Copy Page to duplicate a page and all its components. The copy appears in the tree. Use Delete Page to remove a page and all its components. Deletions apply to the draft until you save. There is no undo for deleted pages.

Content Blocks Reference

This section documents every content block available in the App Designer. Blocks are organized by where they appear: App Menu & Universal (side menu and all pages), Page-Only (all pages except the side menu), Integration (when integration is enabled), and Home Window Only.

App Menu & Universal Blocks

These blocks appear on the Application Menu (side menu) and on all pages.

1. Blank Row / Border — A visual separator that adds spacing or a border between sections. Minimal configuration. Use it to separate menu items or add breathing room between content blocks.

2. Card Slider — A horizontal scrollable carousel of cards. Each card has an image, title, subtitle, and link. Add, remove, or reorder cards in the Properties panel. Great for featuring sermons, events, or promotional links.

3. Image Row — A left-aligned image with text and an optional link. Ideal for announcements, quick links, or menu items with images.

4. Text Row — A text-only row with an optional link. Simple and lightweight.

5. Image — A full-width image with an optional link. Use for banners, hero images, or promotional graphics.

6. Icon Button — A customizable button with text, icon, color, size, CSS class, background color, height, border, margin, link, and conditional display. Use for quick actions like Give, Visit Website, or Login.

7. Grid — A grid of cards. Each card has an image, title, subtitle, and link. Add, remove, or reorder cards. Suitable for category dashboards or multiple links.

Page-Only Blocks

These blocks appear on all pages except the Application Menu (side menu).

8. Image Slider — A full-width image carousel. Add multiple images; the carousel auto-scrolls.

9. Image with Title — A full-width image with an overlaid title and link. Clickable.

10. Rich Text — A TinyMCE WYSIWYG content block. Add formatted text, headings, lists, links, and images.

11. HTML Code — Raw HTML injection for advanced customization. Enter HTML in the textarea. Use for custom layouts, embeds, or third-party widgets.

12. Web View — Embeds a web page within the app. Enter the URL. Some sites may block embedding or require authentication.

13. Video — Embeds a video player. Enter a video URL (e.g., YouTube or Vimeo).

14. 4x4+1 Grid (Bullseye) — A five-tile layout: one large center tile plus four corner tiles. Each tile has an image and link. Suitable for category dashboards or multiple quick links.

15. Category Dash — A grid layout for multiple links or categories. Each cell can have an icon, label, and link.

16. Social Feed — Aggregated social media posts. Configure the feed source in the Properties panel.

17. Google Map — An embedded interactive map. Enter your church address or coordinates.

18. Verse of the Day — Displays a daily Bible verse. Automatically updates each day.

19. Latest Message — Automatically displays your most recent sermon from the media library.

20. Latest Series — Automatically displays your most recent sermon series from the media library.

21. Latest RSS Item — Displays the latest item from any RSS feed. Enter the feed URL.

22. Preferred Campus Picker — Lets users select their preferred campus. Works with conditional display to show campus-specific content.

Integration Blocks

These blocks appear when the corresponding integration is enabled for your domain.

23. Ministry Platform Announcements — Displays announcements from your Ministry Platform ChMS.

24. StudioC Badges — Gamification badges for StudioC integration.

25. StudioC Messages — Messages from StudioC.

26. Rock RMS Content Channel — A content feed from a Rock RMS content channel.

27. Rock RMS Content Channel Item — An individual Rock RMS content item.

Home Window Only

28. Navigation Tabs — A bottom tab bar. Limited to one per app, Home Window only. Up to five tabs. Each tab has a name, label, colors (active/inactive), link, icon, and optional images (active/inactive).

Every linkable block can use a link type to determine where it navigates when tapped. Over 30 link types are available, grouped by category. Some link types appear only when the corresponding integration or feature is enabled.

  • None: No link.
  • Website: External website URL. Opens in browser or in-app web view depending on configuration.
  • In-App Website: Opens a URL within the app without leaving.
  • Frame Web Page: Embeds a web page in a frame.
  • Application Page: Links to an internal app page. Select the page from the dropdown.
  • Sermon Series Screen: Browse sermon series.
  • List of All Sermons Screen: All sermons.
  • Sermon Series Audio Only Screen: Podcast-style audio.
  • Sermon Speakers Screen: Browse by speaker.
  • Sermon Topics Screen: Browse by topic.
  • Sermon Scriptures Screen: Browse by scripture.
  • RSS Feed Screen: RSS feed list.
  • Latest Message/Sermon: Most recent sermon.
  • Latest Series: Most recent series.
  • Sermon Notes Screen: Browse sermon notes.
  • Individual Sermon Notes: Links to specific sermon notes (per-domain).
  • Online Giving: Make Donation: Donate page.
  • Online Giving: Guest Giving: Guest giving.
  • Online Giving: Profile: Giving profile.
  • Online Giving: Text Giving: Text giving.
  • Online Giving: History: Gift history.
  • Online Giving: Recurring Donations: Recurring schedules.
  • Online Giving: Delete Account: Delete giving account.
  • Custom Giving Pages: Per-domain custom giving pages.
  • Custom Forms: Per-domain custom forms.

Social & Content

  • Social Feed/Stream Screen: Social feed.
  • Google Event Calendar Screen: Google Calendar.
  • Custom Event Calendar Screen: Custom events.
  • Verse of the Day: Daily verse.
  • Manage Local Notes Screen: Local notes.
  • Push Notification Screen: Push inbox.
  • Login to Application: Login.
  • Logout of Application: Logout.
  • Ministry Platform: MP Events, MP Event Detail, MP Event Metrics, MP Groups, MP My Groups, MP Check-In, MP Campus Finder, MP Opportunities, MP Announcements, MP Church Directory, MP Portal (framed, with or without SSO).
  • Rock RMS: Rock RMS Events, Rock RMS Groups, Rock RMS Campuses, Rock RMS In-App Web (with/without auth), Rock RMS Framed (with auth), Rock RMS Link (with auth), Rock RMS Content Channel.
  • CCB: CCB Events, CCB Groups, CCB Campuses.
  • Planning Center: PCO Events, PCO Groups.
  • StudioC Dashboard: StudioC dashboard (with auth).

When multi-campus sermons are enabled, Watch Live > Preferred Campus appears as a link type to route to campus-specific live streams.

Conditional Display

You can show or hide components based on conditions. Use the Conditional Display section in the Properties panel for any block that supports it (e.g., Icon Button).

Each condition has:

  • Condition Type: Preferred campus, Device type (tablet/phone), or User state (logged in/out).
  • Operator: Contains, Contains all, Does not contain, Equals, Not equal.
  • Value: Campus ID(s), device type, or logged-in state.
  • Join Logic: AND or OR between multiple conditions.

Example: Show a campus-specific welcome message only to members who selected Downtown Campus. Set condition type to Preferred campus, operator to Equals, value to Downtown Campus ID. The block will only appear when the user’s preferred campus matches.

Example: Show a “Give Now” button only to logged-in users. Set condition type to User state, operator to Equals, value to Logged in.

Dynamic Content Variables

Use parameter variables to embed dynamic content that resolves at runtime. In Rich Text, HTML Code, or other text fields where variables are supported, use placeholders like:

  • User variables: {{app.user.first_name}}, {{app.user.last_name}}, {{app.user.email}}, {{app.user.profile_image}}, and more.
  • Ministry Platform variables: When MP integration is enabled, {{app.mp.contact.First_Name}}, {{app.mp.contact.Nickname}}, and other contact fields.
  • Image variables: Use profile image variables for dynamic images.

Example: In a Rich Text block, add “Welcome, {{app.user.first_name}}!” to display a personalized greeting to logged-in users.

Variables are replaced when the app loads. For users who are not logged in, user variables may be empty. Ministry Platform variables require the MP integration and a user signed in with MP.

The Navigation Tabs block appears only on the Home Window and is limited to one per app. Add up to five tabs. Each tab has:

  • Name: Internal reference (used in link options).
  • Label: Text users see on the tab.
  • Colors: Active color and inactive color.
  • Link: Where the tab navigates (page, sermon screen, giving, etc.).
  • Icon: An icon class (e.g., Font Awesome).
  • Image / Active Image: Optional background images for the tab and its active state.

Best practices: Use tabs for quick access to Give, Sermons, Events, and Connect. Keep labels short. Use icons that match your church’s style.

Preview and Device Testing

Use the Device preview to test your design:

  • Device models: Phone (iPhone style), Tablet (iPad style).
  • Orientations: Portrait, Landscape.
  • Zoom: 100%, 75%, 50%.

The preview reflects live changes. Add, remove, or reorder blocks and change properties—the preview updates immediately. Switch environments (Production, Staging, etc.) to preview different drafts or published versions.

Environments and Publishing

The App Designer supports four environments:

  • Production: What live app users see.
  • Staging: For testing before publish.
  • Review: Master admin only. Used during Apple/Google app store review.
  • Development: Master admin only. For internal testing.

Regular admins see Production and Staging. Master admins see all four.

Save as Draft stores your changes without publishing. App users do not see draft changes. Use this when experimenting or reviewing before going live.

Save & Publish saves and publishes to the selected environment. Changes become visible to app users. Each environment has its own draft and published state. Saving to one environment does not affect others.

Draft workflow: Design in Staging, test in the preview, then switch to Production and Save & Publish when ready.

Published changes trigger a cache refresh. Changes typically appear in the app within 2 to 5 minutes.

Designer Lock

Master provision admins can lock the designer to prevent client changes. When locked:

  • Non-master users cannot edit; they see an informational message instead of the designer.
  • Master admins can bypass the lock for their session (e.g., via a URL parameter).
  • Lock state is controlled at the account level.

Locking is useful during app store review or when OnlineGiving.org support is making changes. Contact support to request unlock.

Multi-Campus Configuration

For multi-campus churches:

  • Conditional Display: Show or hide components based on preferred campus. Use operators like “contains” or “equals” to target specific campuses.
  • Campus Picker: Add the Preferred Campus Picker component so users can select their campus. This selection drives conditional display for other components.
  • Watch Live: When multi-campus sermons are enabled, the Watch Live link type routes to campus-specific live streams.
  • ChMS Campus Feeds: Ministry Platform, Rock RMS, CCB, and PCO can provide campus-specific feeds. The campus picker and conditional display work with these feeds.

ChMS Integration Components

When you enable a ChMS integration, additional components and link types become available:

  • Ministry Platform: Announcements, Events, Groups, Check-In, Directory, Portal.
  • Rock RMS: Content Channels, Events, Groups, Campuses.
  • CCB: Events, Groups, Campuses.
  • PCO: Events, Groups.

Content is pulled from your church management system. ChMS feeds are cached and refreshed every 6 hours, plus a manual refresh when you publish design changes. Ensure your ChMS integration is configured in ChMS settings before using these components.

Mobile App Analytics & Events

The mobile app tracks:

  • Screen views: Every page or screen visited.
  • Element clicks: Every tap or navigation action (GA4 custom event).
  • Push notification opens: When users tap a push notification.
  • StudioC engagement: Badge clicks, message views, dashboard views (when StudioC enabled).

Configure analytics by entering your Google Analytics tracking ID in App Settings. The app supports both Universal Analytics and GA4 properties. GA4 receives screen views and element_click events via Firebase Analytics.

What is NOT tracked: sermon audio play/pause, giving completion, form submissions within the app.

Tips and Best Practices

Design tips for churches:

  • Sermon-focused: Lead with Latest Message or Latest Series, then Card Slider for featured content. Use Navigation Tabs for Give, Sermons, Events.
  • Giving-focused: Place prominent Icon Buttons for Give and Guest Giving. Use a Card Slider for campaign highlights.
  • Events-focused: Use ChMS integration components for Events and Announcements. Add a Google Map for location.
  • Keep images optimized. Use the Compress Image button when available.
  • Test on both phone and tablet. Use conditional display to tailor content by device.
  • Use dynamic variables for personalized greetings where appropriate.

Frequently Asked Questions

How many tabs can I have?

The Navigation Tabs block supports up to five tabs. You can have only one Navigation Tabs block per app, and it can only be placed on the Home Window.

Can I show different content to different campuses?

Yes. Use Conditional Display on any component. Set the condition to preferred campus with operators like equals or contains to target specific campuses. Users set their preferred campus via the Preferred Campus Picker component.

What’s the difference between Save as Draft and Save & Publish?

Save as Draft stores your changes without making them visible to app users. Save & Publish immediately updates the live app for the selected environment. You can work on a draft in Staging and then publish to Production when ready.

Can I add custom HTML or embed a web page?

Yes. Use the HTML Code component for raw HTML, or the Web View component to embed an external web page within the app. The In-App Website link type can also open web content without leaving the app.

Why can’t I edit the designer (locked)?

The designer may be locked by your OnlineGiving.org account manager. Contact support to request unlock. You may also lack the Native App Admin role, or your domain may be WhiteLabel (designer not available).

How do I link to giving or custom forms?

Use the link type dropdown on any linkable component. Options include Donate, Guest Giving, Profile, Text Giving, and specific Custom Forms and Giving Pages from your account.

How do I connect Ministry Platform or Rock RMS content?

Use the MP or Rock RMS link types to connect events, groups, campuses, announcements, and more. Content channels and announcements have dedicated components. The integration must be enabled in your ChMS settings first.

How long for changes to appear in the app?

Published changes trigger a cache refresh that typically completes within 2 minutes. The app checks for updates periodically, so users may see changes within 2 to 5 minutes.

Can I preview my app on different devices?

Yes. Use the Device dropdown to switch between Phone and Tablet. Use the rotate icon for portrait and landscape. Use the zoom dropdown for 100%, 75%, or 50%.

What link types are available?

Over 30 link types are available, including Basic (Website, In-App Website, Application Page), Sermon & Media (Sermon Series, All Sermons, Latest Message, etc.), Giving (Donate, Guest Giving, Profile, Text Giving, Custom Forms), Social & Content (Social Feed, Google Calendar, Verse of the Day), and ChMS integrations (Ministry Platform, Rock RMS, CCB, PCO).

How do I create a personalized greeting?

Use dynamic content variables in a Rich Text or HTML Code block. For example, add “Welcome, {{app.user.first_name}}!” to display the user’s first name. Variables resolve at runtime for logged-in users.

Can I track which features members use most?

Yes. Enter your Google Analytics tracking ID in App Settings. The app tracks screen views and element clicks. Check your GA dashboard for screen names, element_click events, and user flows. StudioC engagement (when enabled) is also tracked.

Need help setting up? Contact us at support@onlinegiving.org or (615) 206-4000. OnlineGiving.org provides courtesy setup assistance for our customers.

 

Have questions about this article?

Our Support GPT knows this article and the entire knowledge base.

Knowledge Base