Using the Apptekz Mobile App Platform
Login to the Dashboard using your email and password
Navigating Editor Dashboard of the Apptekz Mobile App Builder
The Dashboard is where you’ll manage White Label and Mobile App features, settings and users.
- The Main Dashboard provides a menu of option to create new apps and manage white label settings and configuration.
- Customers will log in to use your White Label branded login for managing their apps.
- Be sure to set up your branded White Label Dashboard before allocating apps to business owners to ensure they see your branding instead of Apptekz.
- See our knowledge base article here for instructions on setting up your White Label: /how-to-setup-your-white-label-mobile-app-reseller-platform/
- See detailed instructions here to Allocate and Provision Apps to App Owners. https://apptekz.com/how-to-provision-users-to-apps-in-the-apptekz-app-builder/
- The Top Right Horizontal Menu contains White Label platform related and Global settings
- From the Dashboard, you can create a new App or select an existing App to Manage or Delete (Trash)
- The Left Vertical Menu Pane of the Dashboard contains the App Related features and settings that apply to the app currently being modified
- Once apps are competed, enabled users should only have access to necessary features that might need App Admin or App Owner input in the left pane. (We have assigned ‘Roles’ to make this easier
Creating, Configuring, or Modifying Apps
App Creation, Configuration, or Modifications are done primarily in the ‘Editor’ section, which contains 5 submenus with one additional menu for PWAs
- Design – First Part of the App build which sets the Template, Layout, and Home Screen Image
- Colors – Used to update color scheme for the app and customize additional design elements with optional CSS
- Features – Primary section for adding or configuring features and also used by App Admins to make updates
- Application – Native App configuration option for Icons and Splash screen
- Publication – Settings to prepare Native Apps for Publication to App Stores
- From Publication tab, choose a subscription or allocate app to existing subscription
- If White Label, set default Package Name & Bundle ID in White Label configuration or set per app in Editor
- Request App Publication service from Apptekz or Publish Manually
- Links to Publication articles
- Modules > PWA Creator – is near the bottom of the left menu and used only when Activating or Configuring PWA specific settings (PWAs will be explained in detail separately)
Step 1 – Create a New Mobile App
To create an App, from the Dashboard, click ‘Create New Application’, enter your ‘App Name’ in the box and click ‘Create’ button.
Once the App is created, most of the sections referenced below will require some configuration before the app goes live.
Step 2 – App Design: Choose Template, Layout, and Colors
Once created, the app will open into the Design Tab of the Menu and present the option to select a Template, followed by a Layout selection. (Both can be changed at any time before publishing the App) Changing these items or adding features after publishing to the App stores will require republishing the App. PWAs will update immediately and reflect the changes as soon as the PWA is reopened or refreshed on a device.
For our purposes here, we’ll assume that the default settings are used for both Template and Layout. The default Template is the ‘Blank’ Template and the default Layout is ‘Layout 1’ which offers a popular bottom menu with the more menu activated by the last position on the right. The more menu lists the additional features that don’t fit on the Footer Menu at the bottom of the Home Screen.
After Layout selection, a Home Screen Image may be added now or later. Be sure to use a square image with the dimensions of between 1500px x 1500px to 2732px x 2732px for our unified images, which will adapt to all screen sizes. * Using Canva templates or frames with a predefined image size can simplify this process.
It is also possible to add slider images to the Home Screen that will appear in the app with some but not all Layouts. Additionally, the Design section allows customization of Localization settings (Country and Currency) and Fonts.
Templates and Layouts Explained
Templates are used to accelerate the build process and can be helpful for creating demo apps for common business verticals. They have a color scheme and matching images applied, along with a few features already added. Given the simplicity of adding features, and the need to customize most apps with business branding, templates may or may not be the fastest way to build custom branded apps for clients other than for demonstration purposes or tutorials.
Layouts are used to customize the look and feel of both the Home Screen and menu appearance. Layouts, on the other hand, provide resellers with many design options to customize the appearance of apps beyond what most no-code builders can offer.
Once you have selected a layout, you may either modify layout settings, if available, or just move to the color palette. If you aren’t ready to change any colors yet, just move to the ‘Features’ section and begin to add and configure features that will be included in your app.
If you’re just staring out, using the defaults will be the quickest way to build the initial app configuration, then you can modify colors to match your desired branding and style for the app. It’s also easier to get a feel for the app appearance with alternative layouts after some features have been added to the app.
From the Color section, we can modify the color palette or add CSS/SCSS in the Advanced section below. Colors can be easily selected and changed by section using the color tools or by directly adding either HEX or RGBA codes.
In the Advanced section, custom CSS from our library or any code you’ve created yourself can be added to completely transform pages and sections of your app to achieve a unique and custom appearance.
Step 3 – Add and Configure App Features
This is where most of the App configuration is done. From the list of Features, just click with the mouse to add them to the app. Once added, they will appear in a row at the top of the Editor screen titled ‘Pages’. Features can be rearranged by dragging them into position from the top left corner of the feature icon. Moving the ‘pages’ or ‘features’ in the list will reposition their location in the app menu.
When adding features (Pages) to the app, you can either add all the features you plan to use and then go back later to configure them, or you can configure them as you go. Both methods will achieve a great result, so just choose the workflow that works best for you.
To Edit or Configure the Feature, click on the Feature in the list of pages and the configuration screen for that feature will be displayed. For detailed configuration information on individual features, please review our individual and vertical focused feature tutorial videos or our knowledge base.
As you’ll soon discover, we have many features available, it’s recommended to carefully consider the necessity of adding too many to your app. Too many features can make the app feel complex to end users and may actually reduce engagement and usage.
In the Application section there are a number of settings including the ability to modify the App Name, configure Native App Splash Screen, Add App Icon, etc. The icon selected will also appear in the Dashboard view of the app. For PWA, you’ll enter similar data into the PWA Creator, which will be explained later.
Step 4 – Prepare to Publish an App
Publication > Subscription
When finished with the design and configuration of your app, the publication section is where you’ll set up the specific fields that pertain to publishing your app on the app stores.
In addition to publishing, in the Publishing tab of the Editor, a Subscription slot must be allocated to the mobile app before submitting apps to be published on the app stores, and it should also be done before activating a PWA to avoid being deactivated inadvertently when the free trial period ends. * Beginning in PWA Creator v3.0, we are considering a new requirement to allocate subscriptions before a PWA can be generated.
When publishing the first app after setting up the Agency Reseller Account, No Subscription with available slots to allocate to the app will be available until you ‘Purchase’ a Subscription. Since we process outside the platform, no charges will be applied when performing this task.
Once a subscription and first slot is allocated to the first app, subsequent apps will only require selecting the radio button in the top section of the second screen shown below. If you consume all slots, then it may be necessary to add another subscription at no additional cost to you if you are on our Agency Reseller plan.
We have separate tutorials on self-publishing to the app stores, and we offer publishing services at a nominal fee.
Publishing and allocating a PWA
If using PWAs, the only required option in the Publication section is to add the Mobile App to your Reseller Subscription before allocating the app to your customer.
Most resellers will typically map PWAs to a custom domain before the PWA is completed. Fill out the PWA Domain Mapping Request with your desired name, and we’ll perform the mapping. Once the mapping is completed, activate the PWA, complete the steps for PWA configuration, generate PWA, set Push Sender password, upload App icon, and Create the PWA. Once completed, Configure the Desktop PWA (if desired) and then the PWA is ready to provision to the client.
Detailed instructions to Allocate and Provision Apps to App Owners can be found here: https://apptekz.com/how-to-provision-users-to-apps-in-the-apptekz-app-builder/
Users (App Users)
The Users section in the left pane menu contains the users that have registered or preregistered in the app. It’s possible for the Reseller or App Admin to add or modify user details in this section. The ‘My Account’ feature, when added to an app, will be used to register app users and be listed in this section. The normal workflow is for new app users to register in the app to use certain features. When they register, all data entered will be available here.
The Promote section enables the configuration for QR code mapping to the App Stores and provides the field to enter your App store locations after publication. *Note: This section applies to Native Apps only. PWA configuration is done in the PWA Creator while PWA Push Notifications are performed in a separate menu. PWAs are explained in a separate tutorial.
Step 5 – Advanced Features and Settings
This Messages area is specifically designed to enable App developers and designers to communicate while collaborating on an app simultaneously to let one another know where they are working to avoid making changes to the same app feature or section being changed by another.
We have a number of different analytics available to measure app usage and engagement
Settings > Terms & Conditions
Terms & Conditions are offered as a template that can be used as it is or modified to the need of the App customer.
Settings > Domain & Emails
In our White Label article referenced above, we explain in detail how to perform the SMTP integration steps for both the White Label and for individual apps. This should be done for apps that will rely on features capable of sending email alerts to app users such as Online Ordering, Events, or Appointments.
Settings > Advanced
We don’t recommend changing these settings in the majority of apps published. If you are directed by Apple or Google to modify any settings contained here, please open a support ticket to ensure that you make the appropriate changes.
Settings > API Keys
The Settings area has a number or App specific tabs to enable or customize individual apps and link to brand specific resources. As such. this area will be necessary to complete prior to publishing. For those using features that require API integration such as Social Media, Weather, and Google Maps, etc., API keys must be entered to enable functionality.
Configuring and Sending Native Push Notifications
Global Push Notification Menu (This feature will be changing in Q3/Q4 2023*)
Global Push Notifications to multiple apps can be sent from the Dashboard Menu on the Top Right of the Apptekz Mobile App Builder. This is a reseller functionality and not typically offered to individual app customers.
*When OneSignal update is complete, Global Push may be modified or removed from the Editor as the new system replaces the old.
– When OneSignal is implemented, all Native Apps will need to be republished to continue using Push Notifications or features that rely on individual push notifications
* this article will be updated explain the new OneSignal details when feature is released.
App Specific Push Notifications
Managing Push Notifications for Individual Apps is done from the Push Notification Feature within the Editor
Advanced Integrations with Native Push Notifications
Many features within the platform can leverage push notification to automate alerts and marketing messages to app users. These integrations rely on individual push notifications and require users to login for specific targeted messages to be sent to them.
Features using alert automation include Funnel v2, Appointment Pro, Event Pro, XDelivery, Birthday, Reviews, Social Networks, Community, Tasks, and others that offer in-app alerts or messages.
In our next platform release, we’ll be updating our Native Push Notifications feature to enable us to offer more robust capabilities and leverage the power of OneSignal. Once we update, a new feature will be be used to provide this functionality and will be required to replace the old feature in all published apps. (Push v2)
** Native Apps will need to be updated to work with the new push enhancements, and republication to the App Stores will be required upon completion.
More info on our OneSignal integration will be released soon.
The Modules area contains additional features and tools to manage your apps, provide analytics, publishing, and app customization.
Progressive Web Apps – Commonly known as a PWA
We have a robust PWA platform that only requires a few steps to activate and publish. PWAs are covered in a separate tutorial.
Activating a PWA
Custom Domain Mapping a PWA
Enabling a Desktop PWA
Sending Push Notifications in PWA
We hope this Quick Start Guide was helpful. Please reach out if you have any questions or feedback, and we’ll follow up with you as soon as possible.