Tools

App Builder

App UI design, pages, theme and preview

Sections

Panels

Service Overview

The App Builder is a visual tool for designing your user portal and mobile app without writing code. Everything members see on the portal home, bottom tabs, side drawer, and in-app pages — sliders, banners, forms, wallet, services — is built here.

If you are new, follow this mental model: set theme and logo first, then compose home page sections (widgets), define forms and services, link them with click actions, publish pages, and test in the simulator or full preview. Changes are not visible to members until you save.

This guide covers section types, per-widget settings, link and action types, pages, theme, forms, services, navigation, and common errors — in full detail.

Club PanelSection 1 of 13

What is App Builder?

**Menu: Club Panel → Tools & Development → App Builder**

Wallet app operators may use the same tool from App Panel (/app-builder) — the UI is nearly identical.

Prerequisites

The club must be linked to a wallet application (Club Panel → Operations → Application & Wallet).
The App Builder feature must be active on the club subscription.
Your role needs view / create / update permission on the App Builder module.
On first visit, if an app is linked, an app project is usually created automatically; otherwise contact platform admin.

Page layout

Area	Purpose
Left toolbar	Tabs: Sections, Theme, Pages, Forms, Services
Phone simulator (center)	Live preview of what users see
Right panel	Edit selected section, fields, and actions

Above the simulator: Onboarding, Login/Guest, Full preview, Refresh. An orange dot on a tab means unsaved changes.

Notes

Output renders the same on web portal and Flutter app (some advanced widgets may look simpler on one target).
When switching pages or tabs with unsaved changes, the system asks for confirmation.

Previous sectionNext section

Section 2 of 13

Common settings for every section

**App Builder → Sections tab → select a section → right panel**

Every section — regardless of type — has these base fields:

General fields

Field	Description
Title	Heading above the section (optional on some widgets)
Subtitle	Short line under the title
Visibility	Always / Authenticated only / Guest only — e.g. “Please log in” vs wallet balance
Padding	Top, right, bottom, left (pixels)
Corner radius	Section card border radius
Background color	Optional section background

Step-by-step — add a section

Open the Sections tab.
Check current page in the right panel (e.g. home).
Click Add section.
In the modal, search or filter by category (Images, Text, Wallet, …).
Pick a widget type.
Fill Section settings and Content settings.
Set Click action if needed.
Click Save changes (bottom of panel).

Reorder and delete

Drag in the section list to reorder.
Click a section in the simulator to select it.
Delete section → removed from server after save.

Previous section Next section

Section 3 of 13

Complete section (widget) catalog

The Add section modal offers ~18 types; the advanced editor supports ~30. The table below lists common types with use cases and key settings.

Images

Type	Panel label	Use case	Key settings
`static_image`	Static image	Single full-width or card image	Upload, alt text, click action
`image_slider`	Image slider	Multiple banners	Image list, interval (seconds), per-slide action
`gallery`	Gallery	Album with lightbox	Multiple images, captions
`hero_banner`	Hero banner	Large intro + CTA button	Background image, title, subtitle, button text, button action

Tip: Each slider slide can open a page, form, service, or external URL — e.g. slide 1 “Shop”, slide 2 “Contact us”.

Text

Type	Panel label	Use case	Key settings
`text_block`	Text block	Paragraph or HTML	Content, text size, optional block click action
`text_slider`	Text slider	Rotating messages	Text items, interval, action per item
`alert_banner`	Alert banner	Info, success, warning	Type (info/success/warning/error), text, dismissible, action
`rich_text`	Rich text (HTML)	Formatted content	HTML editor
`html`	HTML	Lower-level HTML block	HTML code

Lists & grids

Type	Panel label	Use case	Key settings
`item_list`	Item list	Vertical/horizontal icon+text menu	Items (title, icon, image), scroll direction, item size (small/medium/large), action per item
`service_grid`	Service grid	Active club services	Column count, optional group — services come from Services tab
`faq_accordion`	FAQ	Expandable Q&A	Question/answer list

Item sizes: small ≈ 1/3 width, medium ≈ 2/3, large = full width — useful for horizontal quick links.

Media

Type	Panel label	Use case	Key settings
`video_embed`	Video	Embedded playback	URL (YouTube, Aparat, or direct file), title
`map_embed`	Map	Location on map	Latitude, longitude, zoom, label

Wallet

Type	Panel label	Use case	Key settings
`wallet_card`	Wallet card	Balance and top-up/transfer	Wallet selector, show/hide buttons
`transactions`	Transactions	Recent user transactions	Row count, type filter

Prerequisite: user must be logged in; guests usually see nothing.

Forms

Type	Panel label	Use case	Key settings
`form_embed`	Form	Single-page inline form	Select form from Forms tab
`form_flow`	Multi-step form	Wizard	Select flow from Forms → Flows

Data & stats

Type	Panel label	Use case	Key settings
`countdown_timer`	Countdown	Event or campaign	Target date/time, before/after text
`stats`	Stats	Numeric cards	Stat items (value, label, icon)
`features_grid`	Features grid	Benefit highlights	Cards: icon, title, description, action
`testimonials`	Testimonials	Quote slider	Name, text, photo
`team_grid`	Our team	Team members	Name, role, photo, link
`user_profile`	User profile	Name and membership tier	Logged-in users only

Actions & contact

Type	Panel label	Use case	Key settings
`quick_actions`	Quick actions	Shortcut buttons/icons	Button list + action each
`button`	Button	Single button	Label, style, action
`button_group`	Button group	Multiple buttons	Button list
`social_links`	Social links	Instagram, Telegram, …	Network list + URL
`contact_info`	Contact info	Phone, email, address, hours	Each row can call / SMS / email / map
`cta_banner`	CTA banner	Call-to-action with button	Title, text, button, action

System

Type	Panel label	Use case
`divider`	Divider	Horizontal line between sections
`spacer`	Spacer	Empty vertical space

Previous section Next section

Section 4 of 13

Click actions — link types and behavior

**Wherever you see “Click action”:** on the section, each slide, each list item, each button

An action defines what happens when the user taps/clicks. The panel uses ActionSelector, grouped as follows:

1. Internal navigation

Panel type	User experience	What you configure
Native app page	Go to a built-in app area (wallet, shop, …)	Pick a native page (table below)
Dynamic page	Open a page you built with sections	Select page code (e.g. `about-us`) — page must be published
Form	Open a form (modal or full screen)	Select form code
Multi-step form	Wizard	Select flow code
Service	Run a club service (request, payment, …)	Select service from active project list

2. External links

Type	User experience	Configuration
Web link	Open URL in in-app WebView or browser	Full URL (`https://...`)

Tip: Non-HTTPS links may be blocked in the app — prefer https.

3. Communication

Type	Behavior	Fields
Phone call	Opens dialer	Phone number
Send SMS	SMS app with prefilled text	Number + optional message
Send email	Email client	Address, subject, body

4. Tools

Type	Behavior	Fields
Share	System share sheet	Text/link to share
Copy text	Clipboard + confirmation	Text
Show message	Toast or short dialog	Message text
Native action	Device capability	One of: QR scanner, Camera, Settings, Profile, Home
No action	Click does nothing	—

Native app pages (for “Native app page”)

These are system-built — you link to them, not design them with sections:

Code	Title
`wallet`	Wallet
`fund`	Fund
`equity`	Project equity
`club`	Customer club
`credit`	Credit / loans
`services`	Services
`shop`	Shop
`discounts`	Discounts
`contacts`	Messages / chat
`desk`	Calendar / desk
`notifications`	Notifications
`transactions`	Transactions
`profile`	Profile
`settings`	Settings

Practical action examples

Home slider:

Slide 1 → dynamic page promo-summer
Slide 2 → service “Submit request”
Slide 3 → web link https://example.com

Quick actions:

“Wallet” icon → native page wallet
“Support” icon → phone call +98-21-xxxx
“Terms” icon → dynamic page terms

Alert banner:

“Up to 30% off” → native page shop
Close button → no action

Contact info:

Phone row → call
Email row → email
Address row → map link

Action notes

Item-level actions (list/slider) take priority over section-level actions.
Draft dynamic pages do not appear in “Dynamic page” picker — publish first.
Services must be active in the Services tab for this project.

Previous section Next section

Section 5 of 13

Pages tab

**App Builder → Pages icon**

Page types

Type	Meaning	Use case
Dynamic	Editable sections	Home, about, campaigns
Static	Fixed system content	Terms, privacy (often seeded)
WebView	Full-screen URL	External website
Native	Built-in app screen	Wallet, settings — do not delete

Layouts

Layout	Meaning
Default	AppBar + menu
Full screen	No AppBar
No header	Content only
Tab	Inside bottom navigation
Modal	Bottom sheet

Step-by-step — new page

Click New page.
Page title and unique code (English, e.g. about-us) — used in actions later.
Slug — portal URL path.
Page type and layout.
Optional: AppBar title, background type (color/image).
Toggles: Home page (only one), Authenticated only, Show AppBar.
Save — initial status: Draft.

Click Publish page → status Published.
For dynamic pages: Show in portal drawer — link appears in the hamburger menu.
Native pages (wallet, settings, …) are always in the menu; no manual drawer entry needed.

Edit page sections

Click Edit sections in the list → jumps to Sections tab with that page loaded.

Notes

Do not delete home page.
Archived pages are hidden from users.
English title (titleEn) helps EN app/portal when supported.

Previous section Next section

Section 6 of 13

Theme tab

**App Builder → Theme icon**

Theme sets colors, fonts, and logo separately for light and dark mode.

Color groups

Brand: primary, secondary, accent
Surfaces: background, card, border
Text: primary, secondary, muted
Status: success, warning, error

Typography & sizing

Persian / English font
Base font size
Card radius, button height, input height

Assets

Logo (light and dark)
Splash image

Behavior

Default theme mode: system / light / dark
Show theme toggle on portal

Steps

Open Theme tab → toggle light/dark on simulator.
Adjust colors with color picker.
Upload logo and splash.
Save theme — Reset reverts unsaved local changes only.

Previous section Next section

Section 7 of 13

Forms tab

**App Builder → Forms icon**

Three sub-views: Forms, Flows, Submissions.

Form field types

Type	Use case
Short / long text	Name, description
Number	Quantity, age
Email / phone	Contact
Password	Secure input
Select / radio / checkbox	Options
Switch	Yes/no
Date / time / Jalali date	Scheduling
File / image	Upload
Rating / slider	Surveys
URL	Web address
National ID / IBAN	Iran banking fields
Hidden	Fixed value, not shown

Per field: label, placeholder, required, min/max, error message.

After submit

Action	Meaning
Store in database	View in Submissions
Send to external API	Webhook to your URL
Show message	Success text
Redirect to page	Go to dynamic page
Close modal	Dismiss form
Next step	Used in flows

Multi-step flow

New flow → code and title.
Add steps — each step links an existing form.
In a form_flow section, select that flow.

Submissions

Open Submissions sub-tab.
Filter by form, date, user.
Use for support follow-up or export.

Embed form on a page

Create form and fields.
Sections tab → form_embed → select form.
Save → test in preview with a real user.

Previous section Next section

Section 8 of 13

Services tab

**App Builder → Services icon**

Services defined in Club Panel → Services are attached to the app project here. Only active services appear in service grid and “Service” actions.

In-app pricing

Fixed price — set amount
Margin percent — markup on base price

Also display title and icon for the app.

Steps

Create a service group (e.g. “Requests”).
Add from catalog and activate.
Set price and sort order.
Test via service_grid or quick_actions → service.

Previous section Next section

Section 9 of 13

Menu, bottom tabs & onboarding

Bottom tab items (Home, Club, Desk, …) load from app bootstrap — mix of native and dynamic pages with layout: tab.

There is currently no graphical bottom-tab editor in the club panel; advanced changes go through platform admin / API. See User Portal Navigation help for portal-specific behavior.

Published dynamic pages with Show in drawer appear here.
System pages (wallet, settings, …) are always available.

First-launch slides (welcome, feature intro). Use the Onboarding button on the simulator. Slide editing is limited in club UI (API/admin).

Previous section Next section

Section 10 of 13

Simulator & preview

**Center of App Builder page**

Simulator controls

Control	Purpose
Onboarding	Preview welcome slides
Login / Guest	Test authenticated vs guest-only sections
Preview (Play)	Full-screen like a real user
Refresh	Reload from server

Full preview

Click Preview.
Navigate tabs and drawer.
Log in with mobile + OTP.
Submit forms, open services, test links.
Close → back to editor.

Notes

No section editing in preview mode.
After save, click Refresh to sync the simulator.

Previous section Next section

Section 11 of 13

Recommended setup order

Theme — brand colors, logo, fonts
Home page — slider + quick actions + wallet (if needed)
Subpages — about, FAQ, contact
Forms — surveys, requests
Services — activate and group
Publish all dynamic pages
Drawer — add important pages to menu
Preview with real login
Test on a real device (PWA or app)

Previous section Next section

Section 12 of 13

Common errors

Issue	Likely cause	Fix
“Project not found”	App not linked to club	Application & Wallet → link; contact admin
Section missing on portal	Not saved or page is draft	Save changes + Publish page
Click does nothing	Wrong action or unpublished page	Check page/form/service code
Empty service grid	Service inactive	Services tab → activate
Form won’t submit	Required field	Test in preview as real user
Theme won’t save	Permission	App Builder update role
Page missing in action picker	Draft status	Publish
Web link won’t open	http or blocked domain	Use valid https
Empty wallet for guest	Expected	Set visibility to authenticated only

Previous section Next section

Section 13 of 13

Summary for support

Section = UI block on a page; Action = click behavior.
Five main tabs: Sections, Theme, Pages, Forms, Services.
Publishing pages is required for portal visibility.
Actions: native, dynamic page, form, flow, service, URL, phone, SMS, email, share, copy, toast, device native.
Fixed app navigation details: see User Portal Navigation (user-portal-navigation).

Previous sectionNext section

App Builder

What is App Builder?

Prerequisites

Page layout

Notes

Common settings for every section

General fields

Step-by-step — add a section

Reorder and delete

Complete section (widget) catalog

Images

Text

Lists & grids

Media

Wallet

Forms

Data & stats

Actions & contact

System

Click actions — link types and behavior

1. Internal navigation

2. External links

3. Communication

4. Tools

Native app pages (for “Native app page”)

Practical action examples

Action notes

Pages tab

Page types

Layouts

Step-by-step — new page

Publish and drawer menu

Edit page sections

Notes

Theme tab

Color groups

Typography & sizing

Assets

Behavior

Steps

Forms tab

Form field types

After submit

Multi-step flow

Submissions

Embed form on a page

Services tab

In-app pricing

Steps

Menu, bottom tabs & onboarding

Bottom navigation

Drawer (hamburger menu)

Onboarding

Simulator & preview

Simulator controls

Full preview

Notes

Recommended setup order

Common errors

Summary for support