Start Here
- Welcome
- Quick Start
- Learning Resources
Creating your first app
- Templates
  - Creating App From Template
  - Create Your Own Template
  - Softr Universe
- AI App Generator
  - AI App Generator Overview
  - Customize an AI-generated App
- Creating App From Scratch
  - Creating Blank Application
- Use Cases
  - Client Portals
  - Membership Sites
  - What Internal Tools Can You Build with Softr?
  - Peer-to-Peer Chat
Core Concepts
- Workspaces and Applications
- Pages and Blocks
- Data Sources
- Memberships
- Creating, Reading, Updating, and Deleting (CRUD) Data by Users
- Mobile Apps
- Templates
Displaying and Creating Data
- List
  - List Block Overview
  - List Filtering with URL
  - List Conditional Filters
  - Layout: List with horizontal cards and upvoting button
  - Layout: List with deletable elements, vertical cards
  - Layout: List with small cards
  - Layout: List with timeline
  - Layout: List with horizontal cards
  - Layout: List with columnar sliding cards
  - Layout: Inbox
  - Layout: List with horizontal sliding cards
  - Layout: List with vertical cards and tag
  - Layout: List with vertical cards and description
  - Layout: List with vertical cards and video
  - Layout: List with vertical cards and visible button
  - Layout: List with horizontal cards and visible button
- List Details
  - List Details Block Overview
  - Linked List
  - Comments
  - Use Case: Creating a User Profile with List Details
  - Use Case: Embedding Calendly in List Details
  - Layout: List details page with side image
  - Layout: List details page with image slider
  - Layout: List details page with video
  - Layout: List Details Page with 3 Column View
- Table
  - Table Block Overview
- Forms
  - Form Block Overview
  - Layout: Contact Form with Map
  - Layout: Customizable Form
  - Layout: Customizable Form with Labels
  - Use Case: Job Submission with Hidden Fields
  - Tutorial: Sending Form Data to a Data Source
- Charts
  - Chart Block Overview
  - Type: Bar Chart
  - Type: Stacked Bar Chart
  - Type: Line Chart
  - Type: Area Chart
  - Type: Scatter Chart
  - Type: Pie Chart
  - Type: Donut Chart
  - Type: Rose Chart
- Organizational Chart
  - Organizational Chart Block Overview
- Other
  - Calendar
  - Map
  - Kanban
  - Summary Cards
Data Sources
- Airtable
- Google Sheets
- SmartSuite (beta)
- HubSpot (beta)
- BigQuery (beta)
Debugging
- Troubleshooting Airtable errors
- Troubleshooting Airtable API call limit exceeded
- Troubleshooting Google Sheets errors
User Management
- App Users Basics
  - Add users to a Softr app
  - Users tab
  - Syncing users with a data source
  - Add or import users manually
  - Internal vs. External Users
  - User Email and SMS Notifications
- User Groups & Permissions
  - User Groups
  - Block Visibility
  - Page Visibility
  - Page Rules
  - Add users to a user group based on their Stripe attributes
  - Global data restrictions
- User-related Blocks
  - Signup Form
  - Signin Form
  - Signin with Email Code
  - Signin with SMS Code
  - User Profile
  - Forgot Password Form
  - Reset Password Form
- Advanced Sign-in Options
  - SAML Single Sign-on
  - Microsoft Azure SAML Single Sign-on
  - OpenId Single Sign-on
- Tutorials
  - How to make pages/blocks accessible only to company users
  - Personalize your app by adding the user's name to text fields
Basic Building Blocks
- Header
  - Header Block Overview
  - Layout: Header with sublinks and button
  - Layout: Header with links and buttons
  - Layout: Header with hamburger menu
  - Layout: Header with sublinks, icons, and description
- Hero
  - Hero Block Overview
  - Layout: Hero with call to action
  - Layout: Hero with email capture
  - Layout: Hero with video
  - Layout: Hero with appstore buttons
  - Layout: Hero with email capture and typewriter
- CTA
  - CTA Block Overview
  - Layout: Call to action with a button
  - Layout: Call to action with email capture
  - Layout: Call to action with a button on the right
  - Layout: Call to action with a text and action button
- Feature
  - Feature Block Overview
  - Layout: Feature with right side picture
  - Layout: Feature with left side picture
  - Layout: Feature with link
  - Layout: Feature with product demo
- Feature Grid
  - Feature Grid Block Overview
  - Layout: Feature grid with big icons
  - Layout: Feature grid with four column view
  - Layout: Feature grid with images
  - Layout: Feature grid with small icons
  - Layout: Feature grid with sections
  - Layout: Feature grid with three column view
  - Layout: Feature grid with box and three column view
  - Layout: Feature grid with steps
- Partner
  - Partner Block Overview
  - Layout: Partner with fixed logos
  - Layout: Partner with sliding logos
- Custom Code
  - Custom Code Block Overview
- Other
  - X (Twitter) Block Overview
  - X (Twitter) Grid
Settings
- App Settings
  - General Settings
  - App History
- Page and Block Settings
  - General Page Settings
  - General Block Settings
  - Page and Block Embed
  - Block Actions
  - Block Version Update
  - Linking Pages and Blocks
  - How to Set Up a 401 Page
  - How to Set Up a 404 Page
Design
- Application Theme
- Block Styles and Formatting
Custom Domain and Publishing
- Publishing
  - Publishing Your Softr App
- Custom Domain
  - Add a Custom Domain to Your App
  - Add a Custom Subdomain to Your App
  - Tutorial: How to set up a custom domain for Namecheap
  - Tutorial: How to set up a custom subdomain for Namecheap
  - Add an Extra Custom Domain to Your Workspace
Creating, Reading, Updating, and Deleting (CRUD) Data by Users
- Action Buttons Overview
- Add Record
- Update Record
- One-click update
- Delete Record
- Call API
- Download File
- Button Visibility
- Mapping Fields for Actions
- Item on Click Actions
Payments
- Stripe Billing and Payments
  - Simple Checkout Form
  - Simple Billing Block
  - Stripe Customer Portal
- Pricing Block
  - Layout: Pricing in card view with details
Blogs
- How to Create a Blog
- How to Create a Blog from a Data Source
Mobile App
- How to create a mobile app from a Softr app
SEO
- Softr SEO Checklist
- Site SEO
- Page SEO
- List Details SEO
Integrations
- AI
  - Open AI
- Authentication
  - Google Sign In
- Automation
  - Make
  - Zapier
- Cookies
  - Iubenda Cookie Solution
- Document Management
  - Documint
- Email
  - Mailchimp
  - Mailerlite
- Forms
  - Typeform
- Live Chat
  - Crisp
  - Drift Chat
  - HubSpot Chat
  - Intercom
- Maps
  - Google Maps
- Peer-to-Peer Chat
  - AtomChat
- Payments
  - Stripe Checkout
  - Buy me a Coffee
  - Gumroad
  - PayPal
- User Analytics
  - Facebook Pixel
  - Google Analytics
  - Google Tag Manager
  - Microsoft Clarity
Softr API
- API Setup and Endpoints
- Use Case: Adding Users through Zapier
- Use Case: Adding Users through Make (formerly Integromat
FAQ
- Domain Setup
- Airtable
- Pages, Theme, General Settings
- Memberships
- Softr Subscription Plans and Account Settings
- Translations
- Blocks
- Integrations
- App Settings
- Other
Support
- Giving access to your application
Translating Softr
- Weglot
Security
- Softr App Security
- Phishing
Account and Billing
- Accessing My Account
- My Profile
- Billing
- Pricing and Plans
Affiliate and Referral Programs
- Softr’s Affiliate Program
- Softr’s Referral Program
More

How to create a mobile app from a Softr app

Provide your users with a mobile app in a few simple steps.

👉

Mobile app (PWA) is available for users on the Business plan and above.

PWAs (Progressive Web Apps) are web apps that provide users with an experience similar to that of native desktop and mobile apps. This means that your Softr app users will have an option to install it on their device, being able to access it later on through an icon on their home screen or elsewhere. Let's see how you can enable and configure PWA on your Softr app.

To configure PWA, you need to navigate to Mobile App settings in your Softr app's Application Settings. There, you will see several options that allow you to enable a PWA on your Softr app as well as customize its look and feel. So, let's go over the settings and test the feature.

💡

Your users will still need to have Internet access to be able to use your Softr app as a PWA, so it's won't be accessible when offline.

Settings overview

Enable mobile app (PWA)

This toggle allows you to enable the mobile app (PWA) option for your users.

App Name

You need to specify a name that will appear under your PWA icon on your users' home screen or wherever it's added.

Logo / icon

Here, you set the icon that will be used on user's device to represent your app.

💡

Please, note that the uploaded image should be in .png format and should have a resolution of 512x512px.

Background color

When opened as a PWA, your Softr app will have a splash screen. So, here you can customize the background color of the splash screen. We'll see what this looks like further in this guide as we test the feature from the user's perspective.

Floating action button

Here, you can configure the button that will prompt the users to install the PWA when they visit your site. You can choose its alignment on the screen as well as on which device types to show it. So, let's configure all these settings and see what it looks like from your users' viewpoint.

Configuring mobile app settings and testing

Below, you can see how we've configured the PWA settings.

Now, let's see what the user will see when visiting your site.

Mobile device

The user sees a download button at the bottom. The button placement is a part of Mobile App settings in Softr Studio.

Once the user clicks on the download button, the instructions for adding your app to their mobile home screen appear

Desktop device

As you can see, we were able to click the PWA icon and successfully install the app on our desktop device (as a Chrome App in our case). The PWA install icon appeared in the bottom left corner of the screen (as we had set in settings) and the app had a red splash screen, which we had specified as well.

Compatibility

PWA technology is compatible with the absolute majority of the most used browser/OS combinations, which are the following:

Windows/Chrome

Windows/Edge

Windows/Brave

MacOS/Chrome

MacOS/Edge

MacOS/Brave

iOS/Safari

Android/Chrome

Android/Samsung Internet

Did this answer your question?

😞

😐

🤩

Last updated on February 26, 2024

How to Create a Blog from a Data Source Softr SEO Checklist