Version 2.0.10​

Last updated: Aug 30th, 2024

Fluttersplasher .com | MacOS | Window | Web | Support | Video | Affiliate

We're excited to announce the release of Fluttersplasher version 2.0.10! This update brings a host of new features and enhancements designed to improve your app-building experience. Check out what's new:

(1) Support Undo Redo 💥​

Effortlessly manage your changes with our new Undo and Redo functionality.

(2) Support FluxStore Haravan App 🎉​

Now fully compatible with the FluxStore Haravan App, enabling seamless integration and enhanced functionality.

(3) Custom Notification Icon for Android with BOC/AutoBuild ✨​

Personalize your app's notification experience with customizable icons.

(4) Upgraded Realtime Chat 🧬​

• Support setup the upgrades of the Realtime Chat on app, including Block User, Delete Chat.
• Admin can adjust to access all chats from Fluttersplasher (including the chat between vendors and users).

(5) Enable/Disable Registration 💯​

Greater control over user registration, allowing you to enable or disable as needed.

(6) Facebook App Events 🔰​

Easily integrate Facebook App Events feature on app to track events, such as a person installing your app or completing a purchase, to measure ad performance, and build audiences for ad targeting.

(7) Onboarding Version 3 💫​

A refreshed design for the onboarding screens, featuring full-screen image display.

(8) Store Locator 📌​

Ability to quickly add Store Locator feature into the App Design Layout.

(9) Max Text Scale ⚓​

• Ability to adjust the text scale of the app.
• The text scale is set to default value if it is 0.00

(10) Lazy Loading ♻️​

For applications with many tabs with complex content, enable the feature on Tabbar to:

• Load the currently displayed tabs and improve the performance of the application.
• Minimize memory usage, which is especially useful for devices with low memory.

Note: The tabs may take a few moments to load when they are first switched to. However, this is typically only a minor issue.

(11) Show/Hide QR Scan Icon on Search Tab 🔎​

Hide or display the QR scan icon on Search tab by enabling/disabling the option.

(12) Side Menu Logo Dark Theme 🔷​

Enhance your app's aesthetics with a dark-themed side menu logo.

(13) Show Featured Products for Listeo 🎀​

• Highlight your top products directly within the Listeo layout.
• Support for the Horizontal Layout on Home screen.

(14) Apply Layouts for Featured Vendors 🔆​

• Support Multi Vendors app
• Add more layout configurations specifically designed to showcase featured vendors layout on the Home screen.

(15) Default Expand Size Guide / Size Chart on Product Detail Screen 🎇​

Support expanding the Size Guide / Size Chart (if available) as default after opening the Product Details screen.

(16) Hide Excluded Categories ✨​

• The excluded categories can be configured to be hidden on the app directly from the Category or Vendors layout of Fluttersplasher .

• Users can search the products in the hidden categories on Search screen.

(17) Variant Color Options 🎊​

Users can easily setup the displayed colors for variant colors on Product Details screen from Fluttersplasher .

(18) Listing Card 💎​

Improve the presentation of your product listings with updated card designs.

(19) Hide Empty Ratings ♦️​

Clean up your product card design by hiding empty ratings for products that do not have rating.

(20) Terra Wallet Withdrawal 💰​

Ability to enable the Terra Wallet Withdrawal for the Wallet feature on the app.

(21) Category Menu Image Boxfit on Product List Screen 🌟​

Enhance your product list display with better image fitting for the category menu.

Version 2.0.9​

Last updated: Aug 1th, 2024

Fluttersplasher .com | MacOS | Window | Web | Support | Video | Affiliate

The latest version of Fluttersplasher (2.0.9) introduces a major UI/UX redesign, new design template, resulting in a more intuitive and user-friendly app creation process.

(1) Add more Templates for FluxNews ✨​

We have added more templates for News/Blog apps, giving you more options to choose from to quickly design your app. The new templates come with sleek designs and enhanced functionality to help you create engaging content.

(2) Upgrade new Firebase Push Notification​

We have upgraded the Firebase Push Notification feature in Fluttersplasher , making it easier for you to send notifications to your app users. The new feature provides a more seamless integration with Firebase, allowing you to effortlessly send notifications

(3) Automatic update Layout Items​

We have introduced an automatic update for design layout items, making it easier for you to keep your content up-to-date without manual intervention.

(4) Improvements​

1. Fix deleted Dynamic layout items

   We have addressed an issue where dynamic layout items could not be deleted. This fix ensures that your content is displayed correctly.

2. Upgrade Performance for Web Version ⚡️

   We have optimized the performance of the web version of Fluttersplasher , resulting in faster loading times and a smoother user experience.

Version 2.0.8​

Last updated: June 5th, 2024

(1) Upgraded UI of The Web Version ✨​

• The web version now features a more streamlined and visually appealing interface.

• Demo Screenshot

  

(2) Automatic Saving​

• No more need to manually click "Apply" or "Save" buttons. The new configuration will be saved automatically when you stop editing.

• Demo Screenshot

  • New Version (without Apply and Save buttons)

  

  • Old Version (with Apply and Save buttons)

  

(3) Version History​

• The feature allows you to revert specific actions.
• Ability to save the current state of your app by using keyboard shortcuts or the Add "+" button in the Version History.

Demo Screenshot

(4) The New "Edit" Button​

With just a hover action on the Home screen simulator, the “Edit” button will display and allow you to quickly navigate to the configuration screen.

Demo Screenshot

(5) Simplified and Accelerated App Creation Process 💎​

• Introduced a "Task List" for a simplified and accelerated app creation process.
• Provided comprehensive video tutorials and onboarding documentation at https://docs.fluxbuilder.com/

Demo Screenshot

1. Fluttersplasher Tasklist

1. User Guides

1. Video Tutorials

(6) Quick Image Drag-and-Drop Functionality​

Fluttersplasher now offers a convenient image drag-and-drop functionality, allowing you to directly, quickly, and easily add images to your app design.

Version 2.0.7​

Last updated: March 28th, 2024

(1) Order History and Reviews​

• New UI for Order History page and new Product Rating page.
• If you want your users can upload images when rating products, use this Photo Reviews for WooCommerce plugin.
• Demo Video - https://youtu.be/AgebVu5f3mQ

(2) BottomBar styles like Twitter or Facebook​

• Ability to configure the app's BottomBar to support the "Static", "Opacity Effect" and "Slide Effect" styles like Twitter and Facebook.

• Demo Video - https://youtu.be/Q4AwtEB_0GA?si=WYSanCJKmzwgostc

  

(3) Search icon on Category screen​

You can configure to show or hide the Search icon on the Category screen.

(4) Vendor Welcome screen​

• Welcome Onboarding for new Vendors help them creating a new Store super easily (Store Name, Image, Products, etc.)
• Now you edit or add a new vendor welcome screen on Fluttersplasher quickly. Remember to click the Apply button to save your settings.
• Demo Video - https://youtu.be/ybWPcXtSLbY?si=aoqSN0HFMP8PYcS2

(5) Show Quantity In List​

• Ability to show or hide the Quantity Selector in the Product List.

  

(6) Discount Label Color​

• Ability to setup the Discount Label Color for your mobile apps.
• Demo Video - https://youtu.be/P-YrmpmBryA?si=1yE4JMeC7u5PLqtf

(7) Apple Pay and Stripe on Listing app​

Apple Pay and native Stripe payments are now available in the Listing app:

• Available for your Listeo websites;
• Use to build innovative apps like Airbnb, TripAdvisor, Yelp, or FourSquare.

(8) Listing options​

The Opening Hours feature is available in the Listing app for your Listeo and MyListing websites.

• Default Expand Opening Hours: you can configure whether the Opening Hours section is expanded by default:

  

• Show/hide Opening Status Label:

  

(9) Product Detail screen’s upgrade​

Flexibility to configure many new options for the Product Detail screen:

• Show Stock Status

• Auto Select First Attribute

• Enable Review

  

(10) Default Product Image​

• If some products on your website do not have images, let's add a Default Image. On the app, those products will display your Default Image, instead of displaying an exclamation mark or blank.

  

(11) Filter Products By Distance​

• Ability to only show products and vendors within a certain distance radius that your users are located.

• It is useful in case your vendors are in many provinces/cities, and you want to only show products for the province/city the users are in.

• Available for WCFM Pro version.

• Demo Video - https://youtu.be/-0VII4HEvNg

  

(12) Hide Vendor Contact​

Some clients don't want the Customer and Vendor to exchange contact details anyhow. So they want to hide the phone number, email, and address of the store Vendor on these screens:

• Contact tab in the Vendor Details screen

  

• Stores screen

  

• Product Detail screen

  

(13) WordPress App’s options​

In this version, large blog lists have many options for displaying posts.

(14) Filter by Multiple Tags & Categories​

• Flexible to select many tags and categories to show products. Available for WooCommerce apps.
• Demo Screenshot

Video Demo - https://youtu.be/mnx5meViDoo

Version 2.0.6​

Last updated: January 12th, 2024

(1) New Templates & Layouts 💥​

Lots of new UI and Layouts help you easily design your Apps beautifully and professionally.

Video Demo - https://youtu.be/TezfLGuWBu8?si=JZ1B0RtRd9vRxKrp

(2) FluxStore MAX UI Editing​

• Fluttersplasher 2.0.6 and above supports editing UI of FluxStore MAX for FREE.
• Only support to edit App UI, not to build app on cloud.
• Video Demo - https://youtu.be/5wszyTUBJms?si=YR8IRs_XZfPnaPo

(3) PrestaShop App Upgrade​

This version supports PrestaShop 8.x

• Create mobile apps on both iOS and Android for your PrestaShop 8.x website.
• For previous versions of PrestaShop, please use Fluttersplasher 2.0.5 or earlier.
• If you have released PrestaShop app to customers, please use Fluttersplasher version 2.0.5 or earlier.

(4) Web Embed Layout​

• Flexible to Add new layout Web Embed into the Dynamic layout or Homepage. Users can set URL, iFrame, or embedded HTML code.
• Steps: open an app > Home > Add New Layout > Web Embed.

Demo Screenshot

1. Embed URL:

1. Embed iFrame:

1. Embed HTML code:

Video Demo - https://youtu.be/fy6ZgtbkPwY

(5) Logo Config​

• Flexible options to configure your Logo on the Homepage.

Demo Screenshot

(6) Header Text​

• Apply font for Header Text on Homepage.

Demo Screenshot

(7) Vertical Layout Upgrade​

As client's requests, now on Home, at the Column With Filter of the Vertical product list:

• You can show the Sort type only or show all items in the Filter screen.
• Show or hide the Category List.
• Or display products in a random order.

Demo Screenshot

(8) Product Detail Upgrade​

Add more options to flexibly show or hide features on the Product Detail screen. Steps on Fluttersplasher : open an app > on simulator, click a product.

Listing app (for your Listeo website) can now show or hide the Category List in Header.

Other e-commerce apps support 2 layouts to display attributes and Flat Style layout (Sticky CTA).

1. Attribute Layout is Normal

1. Attribute Layout is Inline

1. Flat Style layout (Sticky CTA)

(9) New My Cart Layout​

Currently the e-commerce app has 2 My Cart layouts. There are 2 ways to set layout for My Cart screen:

1. From Cart layout: Steps on Fluttersplasher : open an app > on simulator, click the My Cart tab.

Demo Screenshot

1. Style01:

   

2. Normal:

   

3. From Shopping Cart: Steps on Fluttersplasher : open an app > Features > Shopping Cart.

Demo Screenshot

![](/notion_imgs/changelog.fbd77bae-4ab1-4aa2-b321-007d94fef673.png)

(10) Checkout Result: Order Details​

• Ability to show or hide order details after successful checkout.

Demo Screenshot

• Show Order Details:

- Hide Order Details:

![](/notion_imgs/changelog.bc65c039-a90f-4cfc-96ca-15f9abbd2abc.png)

(11) Order History: Transaction Details​

Now you can show or hide Transaction Details in the Order History screen.

Demo Screenshot

(12) Tab: Image​

As many clients request, now on the Tab of each screen, you can set an icon or image.

Demo Screenshot

(13) Version Update Alert for All Countries​

• When there is a new version, an alert is shown with a link to the appropriate App Stores page. Version Update Alert by default supports apps in the US.
• This new version also supports Version Update Alert for all countries outside US.

Demo Screenshot

(14) Multilingual Policy URL 💫​

Policy URL supports Multi-language URLs.

Guide

https://docs.fluxbuilder.com/multi-languages

(15) Vendor Chat icon​

Ability to show or hide the Chat button on the Vendor Detail and Product Detail screens.

Demo Screenshot

(16) New UI for My Subscription​

This part helps you choose the correct plan that works for you.

Demo Screenshot

(17) In-app Upgrade​

Prompting and helping users to upgrade when there is a newer version of Fluttersplasher .

Demo Screenshot

(18) One tap Login​

• Ability to log in with one tap on the Fluttersplasher Web version https://web.fluxbuilder.com

Demo Screenshot

You have subscribed to the Basic, Professional, or Lifetime plan of Fluttersplasher . And you are encountering questions or issues that require assistance. The provided guides do not work for your issues; the Fluttersplasher support team is there to assist you. This guide will walk you through the process of accessing support on Fluttersplasher .

Step 1: Accessing Fluttersplasher Support​

Go to https://support.fluxbuilder.com (Please investigate the document at https://docs.fluxbuilder.com, and Q&A before posting ticket).

Step 2: Creating a Support Account​

To access the support center, you'll need to create a support account. Steps:

1. Click on the "Sign Up"

   

2. Enter the email address associated with your subscribed Fluttersplasher account.

3. Create a password and click on the "Create Account" button to complete the sign-up process.

4. You will now be able to log in to your Fluttersplasher support account.

Step 3: Submitting a Support Ticket​

• Once you are logged in, click on the “Post Ticket” button to start your support.
• Fill out the ticket submission form with the required information:
  • Screenshots of issue (or related question),
  • Name of subscribed plan. (Basic, Professional, or Lifetime plan)
  • Steps to reproduce the problem (if applicable).
• Click on the "Submit Ticket" button to send your support request. The new ticket will be displayed on the ticket system.
• After submitting the ticket, you can continue the conversation by clicking on the ticket and clicking on the REPLY button.

Step 4: Waiting for Support​

• After submitting your support ticket, the Fluttersplasher support team will view it, and provide assistance accordingly.
• Time of Support?
  • The Fluttersplasher support team is working as hard as they can to get a fast response but that is not always because of different time zones. Response time can be up to 24-48 hours Monday through Friday, not working on weekends. Support as first in first out.
  • Please investigate the document https://docs.fluxbuilder.com before contacting us.
• Keep an eye on your ticket system or email for updates and follow-up messages from the support team regarding your ticket.

That’s all! With Fluttersplasher 's dedicated support, you can overcome complicated issues and make the most of this powerful app-building platform.

This guide shows other features of Fluttersplasher , e.g. Realtime chat with your customers directly on Fluttersplasher , use Fluttersplasher with your local language, set Fluttersplasher with your favorite color, zoom in/out the simulator for easily view & design, dark theme, etc.

Realtime Chat​

Connecting to your customers directly on Fluttersplasher is the main content of this section. You (owner or vendor) easily chat with customers on Fluttersplasher macOS or web.

Follow each step below:

1. Setup Firebase Realtime Chat​

This feature of Fluttersplasher will support your direct conversation with your customers through Firebase Realtime Chat. Please follow this detailed guide to set up Firebase Realtime Chat

2. Setup Chat on Fluttersplasher ​

The Chat feature of Fluttersplasher is available on Mac and Web versions.

Video guide:

Manual guide with steps:

1. Open your app on Fluttersplasher (If you do not have an app, Create New App with this quick guide).
2. Go to Chat on the side menu → click SELECT and choose the file GoogleService-Info.plist from your local.
3. Check the Current Firebase Project. If it is incorrect, click Change Firebase Project.
4. Login to your Admin email account (refer to the Note below for more information)
5. Select the conversation and START CHAT.

In case the conversation should be removed, click on the 3 dots button  ⁝   in the upper right corner and select Delete conversation.

MultiLingual & Colors of Fluttersplasher ​

Fluttersplasher drag and drop app builder supports multi languages. Now you will be able to view Fluttersplasher in your native language, making it even easier for your team to collaborate effectively.

Grid View & Zoom In-Out​

You can zoom in/out the simulator to easily see the app.

Easily Search any Features​

Dark theme​

There are two modes for the Dark/Light theme:

• Dark theme of App:

• Dark theme of Fluttersplasher :

Changelog​

To build iOS app or setup Apple Login and some iOS features, you need the iOS Bundle ID and Team ID.

Get the Team ID and iOS Bundle ID​

Create Bundle ID for iOS app on Windows or Mac​

To install and publish your iOS App to Apple Store, you must have an apple developer account, and create API Keys.

Follow this guide for more detail. Or execute steps below:

Step 1: Visit page https://appstoreconnect.apple.com/access/api

Step 2: Select Account and login with your apple developer account successfully:

Step 3: Click the (+) button to create a new key

• Enter key information. Note that to upload the application to Testflight, the key needs App Manager permission

Step 4: Download key.

• The key can only be downloaded once. So after downloading, please backup it otherwise you will not be able to download it again next time.

The following information needs to be saved to be able to use the Build On Cloud feature:

• Issuer ID
• Key ID
• Key file downloaded in the step above.

To create Key Store file .jks, use one of these 2 ways:

1️⃣ Using the Fluttersplasher app builder:

Automatically create Keystore file by these steps:

Step 1: On Fluttersplasher , open your app, select the Build item:

Step 2: Select the Cloud button.

Step 3: Select Android APK or Android App Bundle.

Step 4: Enter your [Android package name] to the Bundle ID textbox. Check the Use OneSignal checkbox if you would like to push notifications via OneSignal. And click UPDATE. Your Bundle ID must not include reserved keywords. Use only lowercase letters. Recommend in reverse domain format. For example, your domain is example.com, bundle ID and package name for your app should be "com.example.app"

Step 5: Click the [Create Keystore] button:

Step 6: Enter a string to the [Enter key password] and [Enter store password] textboxes (they must be the same, at least 6 characters). Select the CREATE button.

That’s all. You have created the Key store file successfully. Then, expand step 4 BUILD ON CLOUD → scroll down → click the Download button → select the Keystore to download, and save all passwords to use it later.

2️⃣ Using Android Studio:

Following these Android Studio key generation steps.

Get SHA-1 and SHA-256​

Use one of these 2 ways to get SHA-1 and SHA-256:

1️⃣ Self-signing Your Application:

Step 1: Create Key Store .jks file following this guide. (skip this step if you have an existing Keystore .jks file).

Step 2: Follow this guide to create SHA-1 and SHA-256 certificate fingerprints.

Save all of the SHA-1 keys to a note for later usage.

2️⃣ From Google Play:

You can also get SHA-1 and SHA-256 after uploading your app to Google Play Console, you can get both SHA-1 and SHA-256 under App signing key certificate & Upload key certificate

Save all of the SHA-1 keys to a note for later usage.

Update SHA-1 and SHA-256​

Step 1: Open the Firebase page https://console.firebase.google.com

Step 2: Open your Firebase project. Click the gear icon in the upper left corner, and select the [Project settings] item:

Step 3: Select your Android app, select the [Add fingerprint] button:

Enter your SHA-1 key and click the Save button. (view the Get SHA-1 and SHA-256 guide above). Continue to enter your SHA-256 key and click the Save button.

When finishing, you can download the [google-services.json] file and save this important file to use later:

That’s all 🙂

Build your own applications and publish them to the Google Play Store and Apple App Store to promote your business. This guide shows the way to automatically build your app on our server:

• Help Windows users can build the iOS app without Mac.
• Build the App without installing the environment.

1. Precondition​

• You have installed the required plugins.
• Not use transparent background, special characters, or space in the files name (of app icon file, provisioning, certificate). They should be in English.
• If you want to update your Apps later without re-publishing, follow this guide first.
• To build a multi-languages app, please follow this guide first.
• Be sure you have created your developer account on AppStore and Google Play.

2. Build Android app​

Video Guide:

Manual Guide:

On the left menu, select Build > Cloud, then follow the steps below:

1. Select Android APK or Android App Bundle

2. Update your Bundle ID and click UPDATE. Your Bundle ID must not include reserved keywords. Check the Use OneSignal checkbox if you would like to push notifications via OneSignal.

3. Input Google services file and Key Store's information:

💠 Input your Keystore's information if you already had them.

If you do not have a keystore, click CREATE KEYSTORE button to create it automatically:

• Input a string to the key password and store password textboxes (they must be the same, at least 6 characters)
• Select CREATE button.

💠 Input your Google services file: click the folder icon, refer to your google-services.json file 

4. Input app information as below:

• Input your app name (at least 2 characters)
• App Icon (Do not use transparent background, special characters, or space in the file name . They should be in English.)
• App version (format of x.x.x)
• Build version (greater than 1)
• “Export env.dart & config JSON automatically”:
• Turn on this option to build your app with all configured UI & Features that you have edited with Fluttersplasher . (recommended) - Turn off that option if you have your own/edited env.dart and config_en.json 
• To build Multi-language apps, be sure to enable this option and configure this document first.
• Select Upload information button (to save all your configuration)
• Then click Submit Build button. The result and APK, AAB files will be sent to your email after 5-15 minutes.

Finish!

3. Release the App to Google Play​

Video guide:

Manual guide: Release for Android

4. Build iOS App​

On the left menu, select Build > Cloud, then follow the steps below:

1. Select iOS IPA

2. Update your Bundle ID and click UPDATE button. (the way to create Bundle ID of iOS app in this guide). Your Bundle ID must not include reserved keywords.

Check the Use OneSignal checkbox if you would like to push notifications via OneSignal.

"How to create Bundle ID for iOS app on Windows or Mac?”

3. Input information of Apple Store Connect, Certificate, Provisioning, Google service files as below:

💠 Input information of Admin Role Apple Store Connect API Private key (file will have an extension .p8__). Make sure to login by using the Owner of the App Store Account to create the key, see Creating API Keys for App Store Connect API or go here to create it.

💠 Input your certificate file .p12 and its password. (Distribution or iOS Distribution permissions)

If you do not have it, select Manually or Automatically to create a new one.

If getting an issue when creating a certificate__, because it already exceeded the number of certificates with Distribution and iOS Distribution permissions, please go to Apple Developer to Revoke one as these steps:

1. Login with your dev account
2. Click Account > Certificates (or go to this link).
3. Select an old Distribution or iOS Distribution certificate
4. Select Revoke - now you can continue to click Manually or Automatically to create a new certificate.

💠 Input your Provisioning file or click Create provisioning button to create it automatically. (To create Provisioning manually, please follow this video guide.)

Make sure to select Re-create if exists to delete the old provisioning file.

💠 Input the GoogleService-Info.plist file by selecting the folder icon

4. Input the information of your app as below:

• Input your app name (at least 2 characters)
• App icon (Do not use transparent background, special characters, or space in the file name . They should be in English.)

💠 App version (format of x.x.x): If your App version is already published on App Store. Please increase the App version to a higher number in order to upload the new build to Test Flight.

💠 Remember to update the Build version by increasing this number of build versions whenever you build.

• “Export env.dart & config JSON automatically”:
• Turn on this option to build your app with all configured UI & Features that you have edited with Fluttersplasher . (recommended) - Turn off that option if you have your own/edited env.dart and config_en.json  💠 To build Multi-language apps, be sure to enable this option and configure this document first.
• Select Upload information button (to save all your configuration)
• Then click Submit Build button. If building the IPA file successfully, it will be uploaded to TestFlight. The result will be sent to your email after 18-20 minutes (then wait 5-30 minutes for TestFlight approval).

Finish!

5. View your iOS app​

After receiving the email that notifies you have built the iOS app successfully, follow the steps below to test your iOS app on your smartphone:

1. Go to App Store Connect, then sign in with your Apple ID.
2. Select My Apps

1. Select your app, then choose TestFlight

   

2. Now you can check the App Version and the Build Version to view the correct one have built:

   

3. Open TestFlight on your iOS smartphone to test the app. Enjoy!

6. Release the App to the App Store​

Video guide:

Manual guide: Release for iOS

Select Test APK or Test iOS below to receive an email with your Demo App:

That’s all 😊

This Realtime Chat feature helps to chat between the Vendor and the Client. When you click on the "Realtime Chat" item in the Smart Chat tab, the conversation screen of Firebase Realtime Chat will pop up.

1. Precondition​

Create your project on Firebase. Then add iOS App into your project following this guide Firebase Settings. (Skip this step if you already did)

2. Configuration​

Go to Features > Smart Chat > turn on Enable Smart Chat. Then enable Use Realtime Chat and input Admin Email and Admin Name:

While creating a new Firebase chat option, you can input "firebase" in App to activate it:

Remember to enable Firebase in Features:

If it is still not able to turn on this feature__, please double-check the following instructions: Enable Cloud Firestore at your Firebase project by following Cloud Firestore Get Started Docs until Step 5.

Your Admin Email will be the default email that all of your users would communicate with. By signing in using Admin Email__, you would see the chat list containing all of the messages from your customers when choosing Realtime Chat at Smart Chat__.

Some clients wanna their Apps to still work smoothly when their Websites are in Maintenance (want to close the site for access, but allow access only through the mobile app.)

To do that, install this Maintenance Mode plugin to your Website, then activate it https://wordpress.org/plugins/hkdev-maintenance-mode

This feature is available for mobile apps using WordPress, such as: WooCommerce, MultiVendor (WCFM, Dokan), Listing (Listeo, MyListing, ListingPro), News, GPT, Delivery, Manager apps.

That’s all 🙂

This feature will ask users to subscribe to the app to use all of OpenAI App’s main features.

1. Configuration Subscription​

Here are the simple steps to set it up:

1. First, set up a Revenuecat account by following the easy-to-follow instructions in the SDK Quickstart guide.
2. Once you have your account set up, you can easily set up in-app products for iOS by following the clear instructions in the iOS in-app product setup guide.
3. And last but not least, you can also set up in-app products for Android by following the step-by-step instructions in the Android in-app product setup guide.
4. Continue our product setup guide Note: You don't need to set up the Offering Product and you need to make sure when creating Entitlement, you must set Identifier as "Pro"

2. Export configuration and pass it to FluxGPT​

2.1 Get API key from iOS or Android Project​

1. Go to app.revenuecat.com
2. Click on Projects

1. Click on your Project

1. Click on your apps like iOS or Android

1. Click on Public API Key

1. Click on copy text to save the Key

2.2 Get Product Identifier​

1. Go to app.revenuecat.com
2. Click on Projects

1. Click on your project

1. Click on Products

1. Copy the identifier of the product you want to save. For iOS, append the identifier to the revenueProductsIos list. For Android, append the identifier to the revenueProductsAndroid list.

2.3 Enable Subscription on The App​

1. Open your your OpenAI app on Fluttersplasher
2. Go to Features → General → OpenAI
3. Enable Subscription
4. Input the API Key from iOS or Android Project into the Revenue Google API Key and RevenueCat: Apple API Key
5. Input Product Identifier into RevenueCat: Products IOS and RevenueCat: Products Android

3. Disable Subscription​

Use Fluttersplasher :

1. Open your FluxGPT app on Fluttersplasher
2. Go to Features → General → OpenAI
3. Turn off the Enable Subscription toggle switch

The feature is available for OpenAI app only.

To help you get started with configuring Input Open AI Key, we recommend using the Revenuecat service.

1. Configuration Allow Input Key​

This feature asks users to input their Open AI Key to use all features in the OpenAI app, you can see a video demo of this feature here: https://cln.sh/snX54GRl

To allow the user to input their Open API Key,

Use Fluttersplasher :

1. Open your your OpenAI app on Fluttersplasher
2. Go to Features → General → OpenAI
3. Turn on the Enable Input Key toggle switch

2. Configuration Disable Input Key​

To disable users to input their Open API Key,

1. Open your OpenAI app on Fluttersplasher
2. Go to Features → General → OpenAI
3. Turn off the Enable Input Key toggle switch

This guide explains how to securely store the OpenAI Key using the free Supabase service.

Advantages:

• Integrates easily with your app, no coding knowledge is required
• Secure your app by calling your Supabase server. This avoids revealing your API key

1. Set Up A Server Backend​

1.1 Create and Setup Project on Supabase​

Step 1: Go to Supabase to create or log in to your account and create a new project.

Step 2: Please download the latest version of the Supabase CLI.

Step 3: Generate access token and log in to CLI

• Navigate to https://app.supabase.io/account/tokens
• Click "Generate New Token"

• Copy the newly created token
• Open Terminal run supabase login
• Input your token when prompting

Step 4: Link your project:

• Go to the Project Settings → General on Supabase to get Reference ID.

• Open Terminal, and run the command supabase link --project-ref [REFERENCE_ID] . For example: supabase link --project-ref fasdf12312.

1.2 Generate OpenAI Key​

• Go to https://platform.openai.com/login/ and login to your account.
• Go to https://platform.openai.com/account/api-keys to generate API Key.

1.3 Deploy​

• Open supabase folder on Visual Studio Code. You can download the supabase folder here.
• Open Terminal in Visual Studio Code and run command supabase secrets set OPENAI_API_KEY=[INPUT-YOUR-OPENAI-API-KEY-HERE].
• Within supabase folder, run supabase functions deploy completion --no-verify-jwt --project-ref [REFERENCE_ID]  to deploy the module Chat and Text Generation (ver 1).
• Run supabase functions deploy chat --no-verify-jwt --project-ref [REFERENCE_ID] to deploy the module Chat and Text Generation (ver 2).
• Run supabase functions deploy image-generate --no-verify-jwt --project-ref [REFERENCE_ID] to deploy the module Image Generation.
• Run supabase function deploy prompt --no-verify-jwt --project-ref [REFERENCE_ID] to deploy module Prompt

1.4 Add data to the Database​

Currently, the app support feature selects Prompt, you can provide some template prompts for users to select and use on the app, you can see the demo of this feature here: https://cln.sh/lXZLr5kh. So to add Prompt library data to your database, please do the steps below:

• Go to https://app.supabase.com/
• Select your project:
• Select SQL Editor from the Sidebar and Select New Query

• Open this file from supabase folder: resources/supabase/sql/prompt_library.sql. Copy all content from this file and paste it to the Editor on the website and click RUN

• After clicking RUN, if it runs successfully, it will show

• After that, click Table Editor on Sidebar, and you will see the Prompt Library table and all the content on it. You can add more, modify, or delete the data you want.

2. Configure your app​

2.1 Setup OpenAI config​

Get the supabaseUrl and supabaseAnonKeyat Project Settings → API on Supabase

Then, input to your app by using Fluttersplasher as the image below:

2.2 Integrate ChatGPT into Smart Chat in your App​

To enable ChatGPT in SmartChat, execute "2.1 Setup OpenAI config" above.

Then use the drag&drop Fluttersplasher as below:

The Vendor or website Administrator can assign orders to the delivery boy.

To do this, you need the Manager and Delivery Boy apps:

Follow the steps below:

Step 1: Open your Manager app, select Features > Manager Config > Enable Delivery Feature > then click the Apply button:

Step 2: Ensure that the order status is set to "processing".

Step 3: Afterwards, log in as an Admin or Vendor in the Manager app (that you have built). From there, you can assign the order to the Delivery Boy as images below:

That’s all 🙂

1. Prerequisites​

• To use ApplePay, GooglePay, and Stripe Card, please ensure that Stripe has been successfully connected to your website as shown below:
• Please make sure your country supports ApplePay, you can double-check here: https://help.shopify.com/en/manual/payments/accelerated-checkouts/apple-pay
• Please make sure you have set up the App to get Storefront Access Token before, if not, please check out the guide: https://support.inspireui.com/help-center/articles/50/57/8/app-installation#2-manual-guide

2. Apple Pay​

2.1 Go to your app and Edit.

2.2 Scroll to the end of the page and download the Certificate.

2.3 Go to https://developer.apple.com/account/resources/certificates/list, select Apple Pay Payment Processing Certificate, and click Continue.

2.4 Select the Merchant Identifier of your app and click Continue (example: merchant.com.inspireui.mstore.flutter).

2.5 Click Create Certificate.

2.6 Click Continue.

2.7 Click choose file and upload, select the file that has been downloaded at step 1.2, and click Upload.

2.8 Click Download.

2.9 Back to the website at step 1.3 and click Upload certificate, then click Add file, select the file downloaded at step 1.8, and click Save.

2.10 Then configure this feature into your app by Using Fluttersplasher :

3. Google Pay​

3.1 Take a look at the integration requirements.

3.2 Sign in to the business console, and create a business.

3.3 Fill in all business information, and Request production access to the Google Pay API for your app. You can wait a few days for the validation.

3.4 Get your merchant ID:

3.5 Then configure this feature into your app by Using Fluttersplasher :

4. Stripe​

4.1 Setup Stripe Node Server​

Use Fluttersplasher :

1. Open your app and go to Features
2. In Tools → select Deploy Stripe Payment 
3. Deploy Stripe server and save to your local to update into the Stripe Payment feature

4.2 Configure Stripe Payment Card into your app​

Test​

• Test API keys (publishable key & secret key) can be taken here.
• You can use a card number 4242 4242 4242 4242 with any CVV, and any future expiry date to test Stripe payment (this only works with test keys).

1. Stripe​

This native payment is available for WooCommerce apps.

Update Stripe's information into the drag&drop Fluttersplasher  

• Server Endpoint: This is the URL to your Stripe Node Server. Please follow the below tutorial to set up Stripe Node Server.
• Publishable Key: Publishable key taken from your Stripe dashboard.
• Payment Method Ids: all ID of your Stripe methods.
• Enable:  to enable Stripe payment. Default is disable
• Enable Google Pay: to enable Google Pay payment. To use Google Pay, remember that do not select Version 1 , input Merchant Display Name and Merchant Country Code.
• Enable ApplePay: enable Apple Pay payment. To use Apple Pay, remember that do not select Version 1 , input Merchant Display Name and Merchant Country Code. Check the guide to create merchantIdentifier.
• Version: there are version 1, version 3 and version 4
• Enable Manual Capture: Enable this automatically captures funds when the customer authorizes the payment. Disable will Place a hold on the funds when the customer authorizes the payment, but don’t capture the funds until later (not all payment methods support this). Check Stripe's documentation. Default is disable

Setup Stripe Node Server​

If you are using StripeServerNode-v2, update it to the latest StripeServerNode-v3 to use with the latest version.

Use Fluttersplasher :

1. Open your app and go to Features
2. In Tools → select Deploy Stripe Payment 
3. Deploy Stripe server and save to your local to update into the Stripe Payment feature

Skip Server Deployment​

If you don't want to deploy Stripe server, please skip above step:

In Fluttersplasher , please disable the Use Stripe Node Server :

Test:

• Test API keys (publishable key & secret key) can be taken here.
• You can use a card number 4242 4242 4242 4242 with any CVV & any future expiry date to test Stripe payment (only works with test keys).
• To test 3D Secure, you can use this card 4000 0027 6000 3184 or get more at Stripe's documentation.

Multiple Stripe Methods​

Tthe apps support native Multiple Payment Methods IDs for the Native Stripe. This means many Payment Methods IDs can be enabled as native payments in the app to be available to use. E.g. Stripe Express, Stripe Connect, etc.

Use Fluttersplasher

1. Open your app on Fluttersplasher
2. Go to Features → Stripe → input Payment Method IDs and click on the +  button

The Capture Later​

Learn more at Stripe's documentation.

Save Checkout Info​

The feature is available for Woocommerce, Pro (Woocommerce) and Multi Vendors, supports Version 4 of Stripe payment saving Cards so your customers don't need to enter checkout information every time they pay.

Note: if you are using an old version and want to use version 4 then have to redeploy the Stripe Payment (refer to the guide Setup Stripe Node Server above).

Use Fluttersplasher :

1. Open your app on Fluttersplasher and navigate to the Features section.

2. Select "Stripe Payment"

3. In the Stripe Payment settings, choose "Version 4" to use the latest version of the Stripe payment integration.

4. Toggle the "Enable Save Card" option to the "On" position.

   

2. Apple Pay​

Available for WooCommerce:

1. Take a look at the integration requirements.

2. Create a merchant identifier for your business.

3. Create a payment processing certificate to encrypt payment information.

Then upload the created payment processing certificate to your Stripe account.

4. Update configs by Fluttersplasher

5. Release to TestFlight before testing with live keys. To test with test keys, use an iOS simulator.

3. Google Pay​

Available for WooCommerce:

1. Take a look at the integration requirements.
2. Sign in to the business console and create a business.
3. Fill in all business information and Request production access to the Google Pay API for your app. You can wait a few days for the validation.
4. Update these configs in Fluttersplasher : go to Features → in Payment Methods, select Stripe Payment → turn on Enabled Stripe → Enable Google Pay → input Merchant Display Name and Merchant Country Code.
5. Upload your app to Google Play Console (Internal testing/Closed testing track) and download it from Play Store to test.

That’s all 🙂

The feature is available for WooCommerce and Notion.

Steps:

1. Open your app
2. Go to Features → open Payment Methods → select Tap Payment
3. Turn on Enabled Tap → enter the Secret Key and Payment Method ID
4. Click Apply
5. Go to Cart & Checkout → select Checkout Screen → enable Address

This payment is available for WooCommerce.

Follow the steps below:

1. Follow this guide to get API Key.

2. On the Fluttersplasher , open your app. Then select Features, enable Flutterwave, enter Public Key.

This payment is available for WooCommerce.

Before adding this feature to your app, please make sure it is available on your website by installing Paystack WooCommerce Payment Gateway.

1. About Paystack payment​

Paystack Payment assists in making it simple for companies in Nigeria, Ghana, Kenya, and South Africa to accept secure payments via a variety of regional and international payment channels.

Refer to this LINK for available supported currencies.

2. Configure Paystack payment​

1. Follow this guide to get API Key.

2. On the Fluttersplasher , enable Paystack, then enter Public Key and UPDATE:

   

This payment is available for WooCommerce.

You need to install Paytm Payment Gateway plugin and enable it to work on your website. You need to config Merchant ID, Merchant Key, and select environment.

Then, enter Merchant ID to Merchant Identifier:

1. Create App on PayPal​

Step 1: Open PayPal Developer Dashboard.

Step 2: Once you are on the Developer Dashboard, navigate to the My Apps & Credentials page.

Step 3: Open your app to proceed. If you haven't created an app yet, please create one by clicking on the "Create App" button.

Step 4: Within the app, locate and copy the Client ID and Secret Key. These will be needed for the below steps.

2. Enable PayPal on Fluttersplasher ​

You can easily enable PayPal payment through Fluttersplasher by follow these steps:

Step 1: Open your app on Fluttersplasher .

Step 2: On the side menu, navigate to the Features section. Under Payment Methods, select PayPal.

Step 3: Enable PayPal by toggling the Enable PayPal option.

Step 4: Enter your Client ID Key, Client Secret Key, and Payment Method ID.

Step 5: If your Client ID Key and Client Secret Key are live keys, enable Production Mode. If you are using keys in Sandbox mode, please disable it.

Step 6: Provide the Return URL, which should match your app's Android package name as this format your.android.package.name://paypalpay . For example: "com.inspireui.fluxstore://paypalpay".

3. Native Checkout Mode​

Easy PayPal's Native Checkout UI for a seamless and convenient payment experience for PayPal payment method. (you can skip it)

3.1. Enable Native Mode on Fluttersplasher

Turn on the Native Mode option.

3.2. Configure the PayPal Developer

To use the Native Checkout UI, follow these steps:

Step 1: Open PayPal Developer Dashboard.

Step 2: Select My Apps & Credentials page on the Developer Dashboard.

Step 3: In the REST API apps, select your app.

Step 4: Scroll to Features, then select the Log in with PayPal and Native Checkout SDK checkboxes.

Step 5: Under the Log in with PayPal option, click on Advanced Settings. A pop-up window will open, and you'll see the Return URL field in the new window (Users are redirected to this URL after live transactions. Allow up to three hours for the change to take effect).

Step 6: Click + Add another Url . Then, in the Return URL field, enter your.android.package.name://paypalpay (for example: com.inspireui.fluxstore://paypalpay). Click "Save" Button.

Step 7: Select the Full Name and Email checkboxes found within the Advanced Settings. Then, click "Save" button.

Step 8: Finally, click the "Save Changes" button.

That’s all!

This part shows the way to config the booking feature on WooCommerce.

Install Woocommerce Appointment plugin on your website.

Then configure this feature on Fluttersplasher :

1. Open app on Fluttersplasher
2. go to Features > Cart & Checkout > Woocommerce Appointments
3. Enable Advance Booking Limit and set Limit day

The feature is available for the Shopify app only. If you want to set up product reviews, you can do so using the Judge.me. Follow these steps to get started:

1. Installing the Plug-in to Your Website​

Go to https://apps.shopify.com/judgeme and install the plug-in onto your Shopify site.

2. Creating an App in Judge.me​

Step 1: Go to judge.me/login and enter your email address to log in as a reviewer.

Step 2: Judge.me will send a "magic link" to your email, follow the link to continue the login process.

Step 3: Once you are logged in, simply click the link below to create your new app: https://judge.me/profile/apps/new

Step 4:Please complete all necessary fields and click the "Create" button.

• App Name: Please provide the name of your application.
• Redirect URI: This is the endpoint that Judge.me will use to send authorization confirmation with the authorization code back to your app server. Please provide the complete URL, for example: https://example.com/auth/judgeme/callback.
• Logo URL: Please provide a direct link to your application logo.
• Link to: Please provide a link to your application's homepage.

Step 5: Once your app is created, simply click the "edit" icon to access the Client ID and Secret. You can use these values to make an authorization request and exchange them for an access token later.

Step 6: To proceed, kindly copy your Client ID and replace it in this URL (please find “your_client_id” in the following example link):

https://judge.me/oauth/authorize?client_id=[your_client_id]&redirect_uri=https://easy.inspireui/callback.php&response_type=code&scope=read_products%20read_reviews%20write_reviews&state=1

Step 7: Please copy the link above and paste it into your browser, then press Enter.

Step 8: Input your Shopify domain site and click Sign In. It will navigate to your admin dashboard.

Step 9: Paste this link to browser again and enter, It will show, click Authorize.

Step 10: After clicking Authorize, it will navigate to the page error like this, don’t worry, let copy the data after “code=”.

Step 11: Fill the data to this block code include:

• Client ID and Secret get from Step 5
• Code get from Step 10

curl --location "https://judge.me/oauth/token" --header "Content-Type: application/json" --data "{ \"client_id\": \"[your_client_id]\", \"client_secret\": \"[your_client_secret]\", \"code\": \"[your_code]\", \"redirect_uri\": \"https://easy.inspireui/callback.php\", \"state\": \"1\", \"grant_type\": \"authorization_code\"}"

After filling data to the block code below, please copy and paste it to Terminal on macOS or Command line tools on Windows and Enter, you will get accessToken like this

Step 12: Copy accessToken and open the source code, paste it to the lib/env.dart file at the field apiKey

3. Enable Review on App​

Steps:

• Open your app on Fluttersplasher
• On the simulator, click on a product to open the PRODUCT config.
• Turn on Enable Review.

• Go to Features on the left-side menu > select Color Override. In Rating Color, change new colors for the stars and linear progress bars.

• The result will be:

The Stars and Linear Progress bars in REVIEWS

The Ajax Search will be integrated with WooCommerce, and MultiVendor apps.

To have the feature on the app, please follow these steps:

1. You need to install and activate the Ajax Search Pro plugin for your website.
2. Next, go to the "Compatibility & Other Settings" page of the Ajax Search Pro plugin. You can find this page by navigating to "Ajax Search Pro" in your WordPress dashboard, and then clicking on "Compatibility & Other Settings".
3. In the "Compatibility & Other Settings" page, click on the "Other" tab.
4. Make sure that the "Enable REST API" checkbox is checked.
5. Click on the "Save options" button at the bottom of the page to save your changes.

Then follow the 2 steps below:

1. Update your App​

Using Fluttersplasher : go to Features, select Search Product, enable Enable Ajax Search Pro plugin, then fill in the Ajax Search URL:

https://your-domain/wp-json/ajax-search-pro/v0/woo_search?s=

2. Update functions.php​

Please go to the hosting control panel, and edit the functions.php file in the Theme folder to enable the search function from the API.

function asp_custom_rest_handler( $data ) {
    $id = -2;
    $defaults = $args = array(
        's' => ''
    );
    foreach ( $defaults as $k => $v ) {
        $param = $data->get_param($k);
        if ( $param !== null ) {
            $args[$k] = $param;
        }
    }

    // Fetch the search ID, which is probably the WooCommerce search
    foreach ( wd_asp()->instances->get() as $instance ) {
        if ( in_array('product', $instance['data']['customtypes'] ) ) {
            $id = $instance['id'];
            break;
        }
    }

    // No search was found with products enabled, set it explicitly
    if ( $id == -2 ) {
        $args['post_type'] = array('product');
    }

    $asp_query = new ASP_Query($args, $id);
    return $asp_query->posts;
}

// POST to: http://example.com/wp-json/ajax-search-pro/v1/woo_search
add_action( 'rest_api_init', function () {
    register_rest_route('ajax-search-pro/v0', '/woo_search', array(
        'methods' => 'POST',
        'callback' => 'asp_custom_rest_handler',
    ));
});

Check the API Search function is available when returning as the JSON, for example: [https://your-hosting.com]/wp-json/ajax-search-pro/v0/woo_search?s=[text]

3. Common search issues:​

💊 Result page loop issues

With the Ajax Search Pro plugin, the default search query returns 10 search results. To retrieve all search results, you need to edit the plugin to return all results.

Please log in to your website as an administrator and set the limit for the returned product results to the desired value, for example: 100

💊 Filter not working with ASP -  If you use Ajax search, it can't apply the filter when loading the product

💊 The search product results cannot load images

The issue arises from not specifying a search ID, leading to the default route being utilized, where images are not parsed by default. Please log in to your website as an administrator and create a search instance configured specifically for product searches.

Learn how to configure the Minimum and Maximum quantities of products that users can purchase, Quantity group, and Min Total cart amount.

1. Max Quantity and Min Total Cart Amount​

Configure Minimum purchase Amount and Maximum Quantity here:

2. Min Max Quantities and Quantity Groups​

In case you are using WooCommerce apps, you can install this plugin Min Max Quantities for WooCommerce.

Edit the product you want to set:

• Minimum quantity

• Maximum quantity

• Quantity Groups of x products. Recommend users to make purchases with Quantity group of x products. E.g.: 3-6-9, 5-10-15-20.

  

Make sure to enable Manage stock for the product. Also, remember to set the stock quantity. If Manage stock is disabled, the app will not check for the min or max quantity:

Google AdMob and Facebook Ads are available on the app. Let's check out the way to configure them.

1. App Tracking Transparency​

The App Tracking Transparency is supported to allow you to display iOS 14+ tracking authorization dialog and request permission to collect data. Collected data is crucial for ad networks to work efficiently on ios 14+ devices. This also prevents your app from being rejected by App Store by violating Legal - Privacy - Data Use and Sharing session.

2. Google AdMob​

1. Setup Google AdMob app and Ad Units​

• Because Flutter is a multi-platform SDK, you need to add an app and ad units for both Android and iOS in AdMob.

Step 1: In AdMob Console, create a new Android App.

Note: If you choose Yes when being asked Is the app listed on a supported app store?__, your advertisement setup must be reviewed and approved before being available to use.

Step 2: Create Ad Units (Banner, Reward, Interstitial, and Native)

Step 3: Repeat Step 1 and Step 2 to create iOS App and Ad units for iOS App.

2. Setup Google AdMob on App​

Steps: Open Fluttersplasher , choose Features > Advertisement > Enable Advertisement and start adding your first Ads by clicking on ADD NEW ITEM.

Each Ad item including:

• A Type which could be Banner, Reward, Interstitial or Native
• A Provider should beGoogle
• An Android ID which could be obtained from Step 2, session 2 - Google Admob depending on its Type
• An iOS ID which you could obtain from Step 10, session 3 - Facebook Ads depending on its Type
• A Delay time to show  to control the delayed time of an Ads to be shown, in second.
• Multiple Screens that you want to display your Ads on

3. Facebook Ads​

Requirements:

• Payment Information on Facebook Developer must be completed.
• Your app needs Facebook Approval.
• You can test your app even if it hasn't been published on Google Play/ App Store yet thanks to testingID that we supported. However, keep in mind that you need to update your information at Google Developer when you released your app in order to continue using this feature.

Step 1: Integrate your app in Facebook Developer Console

Step 2: In Dashboard, click on Setup Audience Network and fill out all of the necessary information:

Step 3: When you finish to register your Audience Network information, click Go to Monetization Manager

Step 4: Select the platform you want to implement your Ads on. Let's say Android, then click + Add

Step 5: Declare your app information whether your app has been released on Google Play / App Store or not.

Step 6: Select your first placement, then choose the type of ads placement.

Step 7: At Confirm Audience Network SDK Integration step, check The Audience Network SDK has been integrated into my app and click Confirm Manually

Step 8: At Enter your business payment account information step, click Add payment account and finish your payment registration.

Step 9: Go back to Facebook Monetization Manager home page, click on Integration > Properties on the left-hand side menu bar and select your project property > Ad Space Property.

Step 10: Successfully creating Banner, Native, Reward and Interstitial Placement Ads would lead to the result as below. Click on Copy ID at the end of each Ad Placement and save those values for later uses.

Step 11: Repeat from step 4 to step 10 to create placements for iOS platform, and to create 4 types of placement just like Android (Banner, Interstitial, Native, and Reward). After that, click on Copy ID at the end of each Ad Placement and save those values for later uses.

4. Add a new Ads​

Below is an example of adding a Banner Google AdMob into Home screen:

Steps: Open Fluttersplasher , choose Features > Advertisement. Enable Advertisement and start adding your first Ads by clicking on ADD NEW ITEM.

Each Ad item including:

• A Type which could be Banner, Reward, Interstitial or Native
• A Provider which could be Facebook or Google
• An Android ID which could be obtained from Step 2, session 2 - Google Admob depending on its Type
• An iOS ID which you could obtain from Step 10, session 3 - Facebook Ads depending on its Type
• A Delay time to show  to control the delayed time of an Ads to be shown, in second.
• Multiple Screens that you want to display your Ads on

That’s all 🙂

GDPR (General Data Protection Regulation) is highly recommended to be added to the apps because of its essential role. This feature will require the users' permission for the app's Privacy Policies before using the app or signing up for a new account.

Besides, Apple's new policy requires Account Deletion for released apps. In apps, the Settings screen will have an option to allow Customers to remove accounts to protect their Data privacy.

GDPR Compliance Configuration​

GDPR message for Ads Apps​

Beginning January 16, 2024, Mobile Apps having Google AdSense or AdMob will be required to use a Consent Management Platform (CMP) that has been certified by Google when serving ads to users in the European Economic Area or the UK.

Create a GDPR Message for ads apps with the steps below:

Step 1: Go to https://apps.admob.com/v2/privacymessaging and click on GDPR Block

Step 2: Click on Create a GDPR message

Step 3: Click Select Apps, and select the app you want to show the GDPR message

Step 4: Select all the options again as you want or you can set them as examples, after that click Continue

Step 5: At the final step, you can review your settings, set the name of this GDPR message, and click Publish to complete the setup

That’s all 🙂

The feature is available for the Multi-Vendor app (WCFM plugin) and allows users to search the nearby vendors.

• Show Nearby Stores on the homepage:

• Show Nearby Stores after choosing to See All:

Configure The Feature​

1. Open app → Go to the Home tab → on HOME LAYOUT, click ADD NEW LAYOUT → add Geo Search.

   

2. Go to Features → Google Map → scroll to Map Query to configure the Query Radius Distance.

   

Multi Vendors apps (using WCFM or Dokan plugin) can show the nearest stores on Google Map:

To enable the Nearest Stores, follow steps below:

1. Configure Google Map​

Execute this guide Google Maps (Skip it if you already did).

2. Configure FireStore Database​

Follow these steps:

1. Create FireStore Database and select the nearest location to your customers.

2. Change the rule of FireStore Database.

3. Edit on Fluttersplasher ​

Set a tab on your app’s TabBar to Vendors layout:

Step 1: Open Fluttersplasher , and open your Multi Vendors app.

Step 2: Click an item in TabBar. On the right panel, select the Vendors button in DESIGN LAYOUT.

Step 3: Choose one VENDOR LAYOUT.

That’s all 🙂

Google Analytics​

Google Analytics or Firebase Analytics, is a great feature to understand the clients' favorites through their activities and orders on the app.

1. Precondition

Follow this guide Firebase Settings. (Skip it if you already did)

2. Configuration

3. Result

After configuring, please open your project on Google Analytics or Firebase Console and observe the results in Analytics.

Facebook App Event Tracking​

Meta App Event Tracking (or Facebook App Event) allows your app to track events, such as a person installing your app or completing a purchase, to measure ad performance, and build audiences for ad targeting.

1. Precondition

Follow this guide Facebook Login.

There are 2 parameters that require values ​​to be entered:

• facebookAppId (Facebook App ID)
• facebookClientToken (Facebook Client Token)

2. Configuration

3. Result

After configuring, please open your project on Meta Facebook and observe the results.

You can push notifications to your clients using Firebase or OneSignal. This guide explains the way to use OneSignal to push notifications, configure/disable In-App messages to your users, .

Step 1. Configure OneSignal​

Push Notifications is a useful Flutter plugin. With this plugin, your Flutter app can receive and process push notifications on Android and iOS.

Requirements

• A OneSignal account if you haven't had one.
• A OneSignal App ID

Credentials Setup

Before setting up OneSignal, you must generate the appropriate credentials for the platform(s) you are releasing on:

• iOS - Generate an iOS Push Certificate
• Android - Generate a Google Firebase Server API Key

iOS Setup​

Step 1: iOS Push Notification Certificate.

• Once again, in order to set up and enable the push notification feature in iOS devices, you must generate an iOS Push Notification Certificate and upload it to OneSignal

Step 2: Run your app and push notifications.

• Note that the iOS Simulator does not support receiving remote push notifications. Therefore, you must run your app on a physical iOS device in order to test this feature.
• Test your app on a physical iOS device to make sure it builds correctly. You should be prompted to subscribe to notifications and you should be able to send yourself a notification from the OneSignal dashboard.
• To send a push on an iOS device, please refer OneSignal official documents

Android Setup​

Step 1: Getting your Firebase Cloud Messaging Token and Sender ID

• Click the gear icon in the top left and select Project settings. (Or create a new Firebase project if you haven't had one)

• Select the CLOUD MESSAGING tab.

• Save the two values listed under Server key and Sender ID.

  

Step 2: Configure your OneSignal app's Android Platform Settings

• In the OneSignal dashboard, select your app from the All Apps page, then go to Settings. Under Native App Platforms, click Google Android.

  

• Paste your Firebase Server Key and Firebase Sender ID into the fields and click Save

  

Update App ID​

Configure your OneSignal App ID in the Fluttersplasher :

• Go to OneSignal dashboard, click on the gear icon Settings at the top right, and select the Keys & IDs tab. Under the Keys & IDs tab, copy your ONESIGNAL APP ID

  

• On Fluttersplasher , remember to Enable OneSignal and Enter your OneSignal App ID at appID:

  

Add an icon on Notifications​

To custom icon of notification item, you need to add an image field in additional data when pushing the notification like this:

Step 2. Push Notifications​

Messages​

Push messages to customers’ smartphone. There are 2 ways:

1. Using the Fluttersplasher :

   

2. Or using Onesignal

• At OneSignal dashboard, click on the Messages icon at the top menu bar. In the Messages tab, click on the New Push button.

• On the New Message screen, choose your Audience, then enter the message TITLE, SUBTITLE (iOS), MESSAGEIMAGE, and LAUNCH URL.

• At the end click on confirm. It will show you a pop-up for confirmation. Click Send Message

For advance settings, please refer to OneSignal official documents

In-App​

Show messages on the App when customers open your App by smartphone.

If you have configured the OneSignal library successfully, there is a great feature to support In-App Messages from OneSignal. The flexible UI will dynamically be displayed on your mobile app instantly or scheduled based on your plan.

To enable this feature, make sure to pass the config on the above guideline, then log in with your own OneSignal Account, select Project > Messages > In-App, you can create a new In-app message or use the default templates from OneSignal.

Notification Request Screen​

To ask for User Notification Permission at the first time opening:

1. Open your app on Fluttersplasher → Features → in Branding, select Notification Request Screen
2. Enable the feature → click Apply and Save

If you are using Firebase Cloud Messaging API (Legacy) for HTTP and XMPP, let's migrate to the latest Firebase Cloud Messaging API (HTTP v1) before June 2024.

Those deprecated APIs will be removed in June 2024. This affects the Push Notifications functionality through Firebase for users or vendors.

Video Guide​

Manual Guide​

Firstly, download the latest MStore API plugin, and install it on your website.

Then, let's generate a private key file for your service account as the steps below:

1. In the Firebase console, create your project or open the existing one.
2. Select Project Settings > Service Accounts.

1. Click Generate New Private Key, then confirm by clicking Generate Key.

Finally, open the admin site, go to the Mstore API, upload the private key file.

That's all 🙂

Your app can receive and process push notifications on Android and iOS. Besides, you are able to automatically send Order Status Notifications when order status changes.

1. Setup Firebase Cloud Messaging (FCM)​

iOS App​

Follow steps below to enable push notifications on iOS app:

1. Execute the Firebase Settings

Create your project on Firebase. Then add iOS App into your project following this guide Firebase Settings. (Skip this step if you already did)

2. Setup Cloud Messaging in Firebase

Step 1: Open the Firebase page https://console.firebase.google.com

Step 2: Open your Firebase project. Click the gear icon in the upper left corner, and select the [Project settings] item:

Step 3: Click Cloud Messaging as shown:

Step 4: Select your iOS app, and click Upload button:

Step 5: Click the Browse button and refer to the APNs auth key: (see the Create AppStore Key to upload Testflight guide)

• The key ID is the back part of the downloaded key file name:

• Enter Team ID, if you do not know where Team ID is coming from, please click on the question mark as shown in the picture, then click on the membership tab

This is Team ID, copy it and enter the form in firebase:

• Click Upload:

In some cases, this error will be displayed (in some cases it will not be). If this is the case, please click Upload again:

If the following screen appears, congratulations, you have successfully configured:

Android App​

Only need to create your project on Firebase. Then add Android App into your project following this guide Firebase Settings. (Skip this step if you already did)

2. Execute the Push Notifications feature​

After finishing setting up Firebase Cloud Messaging (FCM), you can push notifications to the end-user. The end-user will receive the notifications on their smart devices.

You can choose to push notifications via Fluttersplasher or via Firebase directly.

Option 1: Firebase Push Notifications on Fluttersplasher ​

Step 1: Get Private Key

Open your project in Firebase Console, click on the Gear icon, and select Project Settings. Then, open the Service Accounts, and click Generate new private key button as below:

Step 2: Input the Private Key File into Fluttersplasher

After you have obtained the Private Key file, go back to the Fluttersplasher App, open the Features Tab → select the Push Notification feature → upload the Private Key file.

Step 3: Send Messages

Enter any missing information and click SEND button.

4. Note

• Your project must have [Problem Internal Link] completely.
• The Private Key file taken must belong to that project
• Finally, do not share the Private Key file.

Option 2: Firebase Push Notifications on Firebase​

Instead of Fluttersplasher , you can go to Firebase to push notification manually as these following steps:

• Drag the left menu to the bottom, the Grow section will have Cloud Messaging. Click Cloud Messaging, then Send your first message:

• Create a new messenger, fill in the messenger information, and click next:

In the Target part, select the application you want to send, here select the iOS / Android application that was configured in Firebase before:

• Click Next:

• The remaining steps can be ignored, continue to click Review:

• Click Publish button:

• Now go back to the app and check if it works:

3. Add an Icon on Notifications​

To custom icon of notification item, you need to add an image field in additional data when pushing the notification like this:

That’s all 🙂

This section shows how to configure the Deep Links using Firebase Dynamic Link. It is available for sharing App, a specify Product, Notification, Tag.

How does Firebase Dynamic Link work?

Image Source

1. Preconditions​

• Your app must be successfully connected with Firebase following this guide.
• Your app must be released on Google Play and App Store.
• Mstore API plugin has been installed and upgraded to the latest version in your CMS.

2. URL Prefix​

This step guides to configure the URL Prefix as below:

• Open the Firebase page https://console.firebase.google.com and open your Firebase project. Then select the [Dynamic Links] item:

  

• In Dynamic Links screen, click on Get Started button if this is your first time working with Firebase Dynamic Link. Otherwise, click on the current existing URL Prefix dropdown button, and click on add URL prefix

  

• Type the domain name you want to use for your Dynamic Links. You can use the domain you own (for example, yourdomain.com or app.yourdomain.com), or a free Google-provided domain (for example, yourapp.page.link).

• Finish the following steps: Configure, Verify and Finish to get URL prefix.

3. For iOS app​

If you need the iOS app, follow this guide to configure more:

• Open the Firebase page https://console.firebase.google.com , then click the gear icon in the upper left corner and select Project settings

• In the General tab, click on your project on iOS apps list, then edit your App Store ID. You can find your App Store ID in your app’s URL. In the example below, 1469772800 is the App Store ID at https://itunes.apple.com/us/app/yourapp/id1469772800

  

4. Configure the Dynamic Link feature​

You can configure Firebase Dynamic Link easily on the drag&drop Fluttersplasher

Update the information as the image below:

• Uri Prefix is the URL that you created in Firebase in step 2.

• Link is the URL that your app will launch if it is opened in web browser.

• Android Package Name is your package name.

• Android App Minimum Version is the minimum version of your app in Google Play that can open the link.

• iOS Bundle Id is your iOS Bundle ID, which you can find at iOS Settings in Firebase Project Settings. (How to get or create iOS Bundle ID?)

  

• iOS App Minimum Version is the minimum version of your app in Apple Store that can open the link.

• iOS App Store Id is your app ID, which you have already got in step 3.

5. Test​

This step guides to test your Firebase Dynamic Link:

• When you did from step 1 to step 4, successfully running your app will generate a Firebase Dynamic Link in the console.

  

• Now it's time to test your dynamic link. Please keep in mind that Firebase Dynamic Link only works on physical Android/iOS devices.

6. Share a Product​

This step guides to share a specific product with Firebase Dynamic Link:

• Make sure you have done from step 1 to step 5.
• Go to Admin Dashboard > Settings > Permalinks. At Product permalinks, edit Custom base: /product/

• You now can get Dynamic Link by click on "Share" in a product. This is how this feature should work: Android demo reference & iOS demo reference

7. Share Tag​

Users can share a list of products with the same Tag. When users open the link, the App will be launched and show all products under that Tag.

• Make sure you have done from step 1 to step 5.

8. Share a Product or Page in Notifications​

The feature allows sending a Notification with the Product URL or a specific page. When users open Notification, App is launched with that product/page.

Note:

• Make sure you have done from step 1 to step 5.

Manual guide:

To make the feature work, go to the Cloud Messaging from Firebase Console, and Send your first message.

Then, on the Compose Notification screen, fill in the necessary information in all steps Information, Target, Scheduling, Conversion events (optional), and Additional options (optional).

In step 4 - Additional options (optional) - you will add a Key-Value for the Custom Data, fill dynamic_link for Key and the Product URL for Value.

9. Share a Tab or Screen​

To navigate users to a specific screen, you need to

• Follow the Precondition
• Manually create a dynamic link on the Firebase Console and configure it accordingly as below:

1. Go to https://console.firebase.google.com, select your project, and click New Dynamic Link

   

2. Click Next

   

3. Fill in the information for the following two fields: and click Next

   1. Deep link URL: Fill the link as scheme: your-home-page + ? + screen you want to open. We currently support tab_number and screen. For example:

      • tab_number: input a number like https://mstore.io?tab_number=3
      • screen: input a screen name like https://mstore.io?screen=category

   2. Dynamic link name: The name of this dynamic link, which you will refer to when tracking data, such as clicks on this link.

      

4. Select Open the deep link in your Apple App and select exactly your bundle id for your iOS app, and click Next

   

5. Select Open the deep link in your Android App and select exactly your bundle id for your android app, and click Next

   

6. Click Create.

   

7. Copy the link and use it:

   

Note:

• tab_number supports values from 1 to the number of tabs you have configured on your app.
• screen supports the following list:
  • home-search
  • profile
  • list-blog
  • wishlist
  • category
  • category-search
  • search
  • cart

This Realtime Chat feature helps to chat between the Vendor and the Client. When you click on the "Realtime Chat" item in the Smart Chat tab, the conversation screen of Firebase Realtime Chat will pop up.

Realtime Chat setup​

1. Precondition​

Create your project on Firebase. Then add iOS App into your project following this guide Firebase Settings. (Skip this step if you already did)

2. Configuration​

Go to Features > Smart Chat > turn on Enable Smart Chat. Then enable Use Realtime Chat and input Admin Email and Admin Name:

While creating a new Firebase chat option, you can input "firebase" in App to activate it:

Remember to enable Firebase in Features:

If it is still not able to turn on this feature , please double-check the following instructions: Enable Cloud Firestore at your Firebase project by following Cloud Firestore Get Started Docs until Step 5.

Your Admin Email will be the default email that all of your users would communicate with. By signing in using Admin Email , you would see the chat list containing all of the messages from your customers when choosing Realtime Chat at Smart Chat

3. Result​

The result will be like this:

Using Firebase Smartchat as a normal account:

Using Firebase Smartchat as the Admin account:

Message Notifications​

When users chat with a vendor using Firebase Realtime Chat, this feature allows notifications to be displayed on the device when messages arrive whether the app is running in the background or completely shut down, facilitating quick responses from users, vendors, and administrators, ensuring Don't miss any messages.

Precondition:

• Follow this guide Firebase Realtime Chat
• This feature requires Billing enabled. See detail - https://cloud.google.com/billing/docs/how-to/modify-project

Please follow these steps to set up:

1. Go to the Cloud Functions overview page in the Google Cloud console - https://console.cloud.google.com/functions/list

Make sure that the Google Cloud project to which you want to deploy Cloud Functions is selected.

2. Click Create function.

3. Fill in the information in the fields as shown below:

4. Click Save then expand the Runtime, build... section at the end of the page for additional configuration and security options.

Detail:

Name 1: FIREBASE_CONFIG

Value 1:

{

"projectId": "`https://snipboard.io/H6JDbz.jpg

"databaseURL": "`https://snipboard.io/w6dviT.jpg

"storageBucket": "`https://snipboard.io/gPelmt.jpg

"locationId": "`https://snipboard.io/XlS9mI.jpg

}

Name 2: GCLOUD_PROJECT

Value 2: [Project ID]

Name 3: EVENTARC_CLOUD_EVENT_SOURCE

Value 3: projects/[Project ID]/locations/[region]/functions/sendNotification

5. Build, Connections and Security and image repo section remain unchanged.

6. Click Next to move to the Code step.

7. In the Source Code field, select the ZIP Upload option and fill in the remaining information as shown below.

8. In the Destination bucket field, Click Browse and Select storageBucket

9. In the ZIP file field, please DOWNLOAD the ZIP file I have attached using the link then upload your project and Click Deploy.

Download link here

10. Continue Click Create Function.

11. Fill in the information and fields as shown below:

12. Click Save then expand the Runtime, build... section at the end of the page for additional configuration and security options (Similar to step 4)

13. Build, Connections and Security and image repo section remain unchanged (Similar to step 5).

14. Click Next to move to the Code step.

15. In the Source Code field, select the ZIP Upload option and fill in the remaining information as shown below.

16. In the Destination bucket field, Click Browse and Select storageBucket

17. In the ZIP file field, please DOWNLOAD the ZIP file I have attached using the link then upload your project and Click Deploy.

Download link here

18. When deployment finishes successfully, functions appear with a green check mark in the Cloud Functions overview page in the Google Cloud console:

19. Select pushNotification function to Edit.

20. Click Next to move to the Code step.

21. Select the .runtimeconfig.json file and Edit your project's information, referring to the suggestions in step 4.

22. After completing editing, Click Deploy again.

23. Similarly, Edit the .runtimeconfig.json file in the sendNotification function and click Deploy again.

24. Done.

This guide shows the way to update or sync the Changed Features and UI of your app without re-publishing the app to Apple Store and Google Play.

Follow steps below:

1. Execute the Firebase Settings​

Create your project on Firebase. Then add Android App and iOS App into your project following this guide Firebase Settings. (Skip this step if you already did)

2. Create a new private​

This step helps to generate a new private key to use for configuring updates to Firebase Remote Config. 

Step 1: open firebase console your project https://console.firebase.google.com/

• Select the gear icon, then select Project settings:

• Select the Service accounts tab:

Step 2: Add role “Firebase Remote Config Admin”:

• Click Manage service account permissions:

• Open IAM:

• Find a Name that matches the member name in the Firebase Console:

• Click the edit icon:

• Add new Role with Role is Firebase Remote Config Admin:

• Click the SAVE button.

Step 3: Now we go back to the firebase console to download the key by clicking the Generate new private key button:

3. Execute the Firebase Remote Config​

You can update or sync the Changed Features of your app without re-publishing easily on the drag&drop Fluttersplasher for free.

Now, open your app on Fluttersplasher . Go to Features, select Firebase Remote Config, enable the Firebase Remote Config, refer to the Firebase remote config.json file which is the downloaded key file in Step 3:

The system will load to see if your project has configs. If it is a new project you will not be able to choose the version. Otherwise, you will have 2 options:

• Click ADD NEW VERSION to create the latest config.
• Select the version and click LOAD VERSION to reload the old version.

Finally, click the button Apply in the upper right corner to update data and select Save. Now when you build your app, the features and UI of your app will follow the Remote Config on Firebase, so whenever you want to change the features/UI, just need to Apply here.

That’s all 🙂

Follow steps below to set up Firebase for your Apps:

1. Create Project on Firebase​

Step 1: Open the Firebase page https://console.firebase.google.com

Step 2: Select the [Create a project] button

Step 3: Enter your Project name, tick all checkboxes, and click the Continue button:

Step 4: Click the Continue button. Then tick the [I accept…] checkbox, and select the [Create project] button:

Step 5: Click the Continue button:

That’s all. You have created your project on Firebase successfully.

2. Add an Android App into your Firebase project​

Step 1: Open the Firebase page https://console.firebase.google.com

Step 2: Open your Firebase project. Click the gear icon in the upper left corner, and select the [Project settings] item:

Step 3: Select the Android icon in the [Your apps] section:

or select the [Add app] button, then click the Android icon:

Step 4: Enter your [Android package name] and click the [Register app] button: The [Android package name] and [Apple bundle ID] should be the same. Your Android package name must not include reserved keywords. Use only lowercase letters. Recommend in reverse domain format. For example, your domain is example.com, bundle ID and package name for your app should be "com.example.app"

Step 5: Click the Next button. You can download the [google-services.json] file or do it later:

Step 6: At the [Add Firebase SDK] section, click the Next button:

Step 7: Click the [Continue to console] button. At this stage, it is possible that Firebase will not detect your test device, but that's okay, just click the [Skip step] button to continue the following steps.

You have added an Android app to your Firebase project successfully. Congratulations!

3. Add an iOS App into your Firebase project​

Step 1: Open the Firebase page https://console.firebase.google.com

Step 2: Open your Firebase project. Click the gear icon in the upper left corner, and select the [Project settings] item:

Step 3: Select the iOS icon in the [Your apps] section:

or select the [Add app] button, then click the iOS icon:

Step 4: Enter your [Apple bundle ID] and click the [Register app] button: The [Apple bundle ID] and [Android package name] should be the same. Your Apple bundle ID must not include reserved keywords. Use only lowercase letters. (This guide to creating iOS Bundle ID). Recommend in reverse domain format. For example, your domain is example.com, bundle ID and package name for your app should be "com.example.app"

App nickname is only used to distinguish between applications on firebase so you can set arbitrary.

Step 5: Click the Next button. You can download the [GoogleService-Info.plist] file or do it later:

Step 6: Click the Next button until you see the [Continue to console] button, click it as image below: (At this stage, it is possible that Firebase will not detect your test device, but that's okay, just click the [Skip the step] button to continue the following steps.)

You have added an iOS app to your Firebase project successfully. Congratulations!

You can download the [GoogleService-Info.plist] file (and save this important file to use later):

4. Enable Firebase on Fluttersplasher ​

Let’s enable Firebase on Fluttersplasher by steps:

Step 1: On Fluttersplasher , open your app.

Step 2: Select the Features on leftmenu. Click the Firebase button.

Step 3: Turn on the Enable Firebase option.

That’s all 🙂

Biometrics Login​

This feature is available on almost apps, but Manager and Delivery Boy apps have not supported it yet.

A new convenient method for authorizing access to your app by Face ID and Touch ID. Users will not need to remember the account username and password in the next login.

⭐️ Mainly support the 3 screens:

• Login
• Checkout
• Using Wallet

Biometrics will be applied to your available screens that are included in the 3 above screens.

Configure: go to your app on Fluttersplasher . Then on the Profile tab (Settings screen), enable the Biometrics option:

Apple Login​

✅ This guide is for WooCommerce, Opencart, Magento, PrestaShop, WordPress.

❌ Not use for Shopify, BigCommerce, Notion, Strapi.

Follow steps below to enable Apple Login:

1. Execute the Firebase Settings​

Create your project on Firebase. Then add iOS App into your project following this guide Firebase Settings. (Skip this step if you already did.)

2. Setup Apple in Firebase project​

Step 1: Open the Firebase page https://console.firebase.google.com

Step 2: Open your Firebase project. Then in the left menu bar, select the [Build] item, and click the [Authentication] item:

Step 3: Select the [Get Started] button:

Step 4: Click the [Apple] item:

Step 5: Turn on the Enable option, then click the Save button.

3. Update Team ID & Bundle ID​

Step 1: Open the Firebase page https://console.firebase.google.com

Step 2: Open your Firebase project. Click the gear icon in the upper left corner, and select the [Project settings] item:

Step 3: Select your iOS app, then add Team ID and iOS Bundle ID to your iOS App.

• Go to Apple Developer and get the Team ID
• Go to AppStoreConnect and get your Apple ID
• Save them to a note for later usage

"How to create Bundle ID for iOS app on Windows or Mac?”

4. Create Apple Sign In Key & Upload .p8 File​

Step 1: Go to Apple Developer and create new Keys

Step 2: Input the Key Name. Select Sign In with Apple option and click Configure to edit.

Step 3: Select Primary App IDs and Save

Step 4: Now click Continue and Register

Step 5: After registering the new key successfully, download the key file

Step 6: Upload the key file into Mstore API of your admin site.

5. Enable Apple Login on Fluttersplasher ​

Turn on the Google Login option on Fluttersplasher by steps:

Step 1: On Fluttersplasher , open your app.

Step 2: Select Features on left menu. Click Sign In/Sign Up button (in the General section).

Step 3: Enable Apple Login option. Enter IOS Bundle ID and Apple Account Team ID. Then click Apply.

Google Login​

✅ This guide is for WooCommerce, Opencart, Magento, PrestaShop, WordPress.

❌ Not use for Shopify, BigCommerce, Notion, Strapi.

Video guide:

Manual guide: Follow steps below to enable Google Login:

1. Execute the Firebase Settings​

Create your project on Firebase. Then add Android App and iOS App into your project following this guide Firebase Settings. (Skip this step if you have already done this step before.)

2. Setup OAuth consent screen​

To set up a login with Google, let’s set up the OAuth consent screen for your Firebase project.

Step 1: Open the Google Cloud page https://console.developers.google.com

Step 2: Click the [Select a project] button:

or click the name of your projects (it may show the name of your projects):

Select the project you want to setup. If you cannot find them in the RECENT project list, please click ALL to display them all and select the project:

Step 3: On the left menu, select the OAuth consent screen

Step 4: Choose External and click CREATE

Step 5: Fill in some necessary information on the OAuth consent screen:

• Enter your [App name], [User support email], and Logo:

• Enter your [Application Homepage link], [Privacy policy link], and [Terms of Service link]. If you do not have these links, use the default link below (don't forget to add https://). Enter your [Authorized domain] or use the default fluxstore-login.firebaseapp.com (The [Authorized domain] will not have https://)

• Enter the [Email addresses]. Click the [SAVE AND CONTINUE] buttons until finish the OAuth consent screen. Then select the [BACK TO DASHBOARD] button, you will see this screen:

That’s all. You have set up the OAuth consent screen successfully.

3. Setup Google in Firebase project​

Step 1: Open the Firebase page https://console.firebase.google.com

Step 2: Open your Firebase project. Then in the left menu bar, select the [Build] item, and click the [Authentication] item:

Step 3: Select the [Get Started] button:

Step 4: Click the [Google] item:

Step 5: Turn on the Enable option, then click the Save button:

4. Update SHA-1 and SHA-256​

• Follow this guide to get and update SHA-1 and SHA-256 into your Android App in your Firebase project.
• When finishing settings, download the [google-services.json] file (and save this important file to use later)__:

5. Enable Google Login on Fluttersplasher ​

Turn on the Google Login option on Fluttersplasher by steps:

Step 1: On Fluttersplasher , open your app.

Step 2: Select Features on left menu. Click Sign In/Sign Up button (in the General section).

Step 3: Enable Google login option.

That’s all 🙂

Facebook Login​

✅ This guide is for WooCommerce, Opencart, Magento, PrestaShop, WordPress.

❌ Not use for Shopify, BigCommerce, Notion, Strapi.

Follow steps below to enable Facebook Login:

1. Execute the Firebase Settings​

Create your project on Firebase. Then add Android App and iOS App into your project following this guide Firebase Settings. (Skip this step if you already did)

2. Setup Facebook in Firebase project​

Step 1: Open the Firebase page https://console.firebase.google.com

Step 2: Open your Firebase project. Then in the left menu bar, select the [Build] item, and click the [Authentication] item:

Step 3: Select the [Get Started] button:

Step 4: Click the [Facebook] item:

Step 5: Turn on the Enable option

Enter facebook app and get them here. (Save them to a note for later usage)

Then click the Save button.

3. Add Facebook base64 keys​

• Go to this site and convert the SHA-1 keys to base64. Copy the output base64 and paste them in Facebook Login -> QuickStart -> Android -> section 6.

4. Enable Facebook Login on Fluttersplasher ​

Turn on the Facebook Login option on Fluttersplasher by steps:

Step 1: On Fluttersplasher , open your app.

Step 2: Select Features on left menu. Click Sign In/Sign Up button (in the General section).

Step 3: Enable Facebook Login option. Enter your Facebook’s information.

SMS Login​

✅ This guide is for WooCommerce, Opencart, Magento, PrestaShop, WordPress.

❌ Not use for Shopify, BigCommerce, Notion, Strapi.

Setup SMS Login​

Follow steps below to enable SMS Login:

1. Execute the Firebase Settings

Create your project on Firebase. Then add Android App and iOS App into your project following this guide Firebase Settings. (Skip this step if you already did)

2. Update SHA-1 and SHA-256

• Follow this guide to get and update SHA-1 and SHA-256 into your Android App in your Firebase project.
• In case you meet this issue: After creating APK and releasing the app in App Stores, you may get an error when logging in with SMS Login. You need to go to the App stores and copy the SHA-1 and SHA-256 and paste to your Firebase setting:

3. Enable SMS Login on Fluttersplasher

Turn on the SMS Login option on Fluttersplasher by steps:

Step 1: On Fluttersplasher , open your app.

Step 2: Select Features on left menu. Click Sign In/Sign Up button (in the General section).

SMS Default Country​

SMS Login by Default​

You can set only allow login to the app via SMS.

New SMS Login​

• Another UI of Registration Form of SMS login:

• Allow updating Email, Password after registration.
• Enable this new feature by go to Features > General > Sign In/Sign Up > enable SMS Login > enable Use New SMS Login

SMS OTP Digits plugin​

This Digits WordPress plugin is Not compatible with 'New SMS Login' above. It is available for SMS Login (OTP SMS).

Instead of remembering a password, the feature supports users signing up and logging in with their Phone Number and One Time Passcode (OTP) on SMS. The feature also helps to avoid fake orders.

First, install the Digits: WordPress Mobile Number Signup and Login plugin on your website. Make sure that the plugin works well on your backend.

Then open app on Fluttersplasher , go to Features > General > Sign In/Sign Up > enable SMS Login and Custom SMS Login Plugin:

Logo and Others​

This guide shows the way to:

1. Change Logo on Sign Up and Sign In screen
2. Require users to login before using the app
3. Show Phone field on the Sign Up screen
4. Require users to input Phone Number on the Sign Up screen
5. Show Reset Password and URL to reset on the Sign In screen.

1. Logo​

To change Logo on Login screen:

• Open app on Fluttersplasher
• go to Features > Branding > Theme and Logo
• Add Theme Logo > click Update

2. Others​

Enable these items if you need:

1. Required Login: Require users to login before using the app
2. Show Phone Number Field: Show Phone field on the Sign Up screen
3. Require Phone Number: Require users to input Phone Number on the Sign Up screen
4. Show Reset Password on the Sign In screen
5. Custom Reset Password URL: edit the url of reset password.

Enable Smart Chat​

Follow these steps to enable Smart Chat to easily contact your customers:

1. Open your app on Fluttersplasher .

2. Select Features on the left menu, then Branding, and click Smart Chat.

3. Enable Smart Chat → select Add New Chat Options.

4. On the Smart Chat Item SETTINGS,

5. Input the link of the chat option in App.

6. Input the option name in Label

7. Enable Use Image Data to upload your own icon image for the chat option. Otherwise, disable it and select the available Icon Data.

   

8. Click ADD to complete new chat options.

9. Scroll to Show on Screens and enable the screens showing the Smartchat button.

References​

Some references for the links of the chat option in App field:

• WhatsApp: https://wa.me/849908854 . If Smartchat Whatsapp fails to open, you need to change the link to https://api.whatsapp.com/send?phone=yourphone
• Phone: tel:8499999999
• SMS: sms://8499999999
• Tawk Chat: https://tawk.to/chat/5d830419c22bdd393bb69888/default
• Twitter Chat: https://twitter.com/messages/compose?recipient_id=821597032011931648
• For more Supported URL Schemes

Configuration​

For some special chat options below, you need to configure more information. Please follow the guide below:

• Firebase Realtime Chat
• ChatGPT: follow Setup SupaBase Server to integrate ChatGPT into Smart Chat.

Disable Smart Chat​

Steps:

1. Open your app on Fluttersplasher .
2. Select Features on the left menu, then Branding, and click Smart Chat.
3. Turn off Enable Smart Chat.

That's all 🙂

After designing your App’s UI, now setup your App’s features. You can also configure to update your App’s features without republishing app to App Store and Google Play.

Easily Search any Features​

Smart Chat​

Hide or enable the Smart Chat feature to easily contact your customers:

Login screen​

Setup the Login screen on your app:

GDPR Compliance​

GDPR (General Data Protection Regulation) is highly recommended to be added to the apps because of its essential role. This feature will require the users' permission for the app's Privacy Policies before using the app or signing up for a new account.

Currencies​

Configure the Currency for your e-commerce App:

Version Update Alert​

When there is a new version, an alert is shown with a link to the appropriate app store page. This feature is available on both iOS and Android apps.

In-app Updates​

The same with the Version Update Alert, but this feature helps your clients to update the new version in the app. When there is a new version, In-app Updates allow users to update the app without having to go to Google Play.

This feature is available on Android only because only it is supported in https://developer.android.com/guide/playcore/in-app-updates

If you have at least one of the following needs, please follow this documentation before building your app:

• You want to update your Apps without re-publishing them to App Store and Google Play.
• Or want to build Multi-language App on Cloud. (for this need, use only MStore API or Cloud Server).

Follow the detailed guide below 🙂

UI and Feature Files​

For easy understanding, kindly review the definitions of UI and Feature Files.

• The UI/Design of the app is saved to config JSON files. Each file is for one language.

For example: config_en.json is App Design file in English, config_ar.json is app design file in Arabic, etc. For other language, please view this guide. 

Config JSON files you get by selecting Export.

• The Features of the app are saved to env.dart file which you Export from your App on Fluttersplasher .

Now there are 3 ways (via MStore API, Cloud Server, Firebase) to update the UI/Design and Features of your Apps without republishing them to Google Play and Apple Store. Please view the next parts for detail.

MStore API​

This solution is used for Updating the UI DESIGN of Apps via MStore API. (recommended)

Available for WooCommerce and WordPress Apps. For other apps, please go to the next part.

1. Precondition​

Install MStore API to your website.

2. Configuration​

Step 1: Enable MStore-API Caching on Fluttersplasher tool as below:

Step 2: Upload the config json files (e.g. config_en.json files) to Website on Fluttersplasher :

Make sure it appears in the plugin setting as the image below:

Done. You have enabled this solution to your App. Design other features you like, then build and publish your apps to App Stores.

Later, if you want to update your UI Design, just do step 2 and enjoy the new UI.

Cloud Server​

Here is another solution used to Update the UI DESIGN of Apps via any Cloud Servers.

Available for all apps (except for Manager and Delivery Boy apps).

1. Precondition​

Upload (the UI Design) config JSON files to any Cloud Servers.

There are some free servers recommended by us:

• Github Page: https://pages.github.com (recommended for Multilingual Apps).
• Vercel: https://vercel.com (for single language App).
• Surge: https://surge.sh
• FireStore: https://firebase.google.com

Solution 1: Use Vercel (recommended because it is quick and easy, but for a single language app only)

Step 1: Create a new Free account on https://now.sh (or https://vercel.com) , then go to Settings > Token > Create:

Step 2: Copy and save the created Token (1).

Solution 2: Use other Cloud servers: (can use for both a single language or multilingual app)

• Step 1: Upload (the UI/Design) config JSON files to a Cloud Server.
• Step 2: Copy and save the link that you have uploaded (the link must end with a .json file, e.g. https://example.com/config_en.json) (2).

2. Configuration​

Step 1: Enable Config on Cloud option the steps below

Step 2: If using Vercel, paste the created Token (1) (on the "1. Precondition" part above) into the Token Key textbox below, then click UPLOAD, Apply, and Save to upload this configuration to Cloud:

If using other servers, paste the link (2) (on the "1. Precondition" part above) into the App Config URL textbox, then click Apply and Save to upload this configuration to Cloud.

Done. You have enabled this solution to your App. Design other features you like, then build and publish your apps to App Stores.

Later, when you want to update your UI Design: If using Vercel, you only need to input your created Token (1) (on the "1. Precondition" part above) and click UPLOAD:

If using other servers, export and upload (the UI Design) config JSON files to your Cloud Server.

Firebase​

This feature helps you to upload both UI Design (config JSON files) and Features (env.dart file) via Firebase Remote Config. This is the guide.

1. Multi-language Configuration​

Now you can use Fluttersplasher to set the Default Language of your app, configure multi-languages, or auto-detect languages, as the image below:

2. How to translate product content?​

In case you are using WooCommerce, to support product content translation (title, description..), it is required to install the following plugins:

• WooCommerce Multilingual.
• WPML Multilingual CMS
• WPML String Translation +2.0
• WPML Translation Management +2.2

If your website don’t use WPML, it is possible to integrate with Polylang Pro plugin.

If you are using Shopify, to support product content translation (title, description..), it is required to install the following plugin:

• T Lab ‑ AI Language Translate https://apps.shopify.com/content-translation (Video)
• Shopify Translate & Adapt https://apps.shopify.com/translate-and-adapt

3. How to update the App's translations?​

If you find any incorrect words in the translation of the app and want to update them correctly, follow this guide:

4. How to have multilingual Policy URL?​

This is a solution that supports Multi-language Policy URLs for your multi languages App.

Follow the steps below:

Step 1: Create app on Fluttersplasher > Features > GDPR Compliance > enter page ID or URL of your privacy policy

Step 2: Export the env.dart and config JSON files for your languages.

Step 3: In the env.dart , copy the code of PrivacyPoliciesPageUrlOrId  Then in the config JSON files (for example: the English config JSON file is config_en.json):

1. Scroll to the end of the file and find the last configuration entry for the design.
2. Paste the copied PrivacyPoliciesPageUrlOrId code, and save the code.

/// enter the Privacy Policies page ID or URL. Accessible in the app via Settings > Privacy menu.
"PrivacyPoliciesPageUrlOrId": "https://policies.google.com/?hl=en"

Step 4: When you auto-build your Multi-language App on Cloud, be sure to:

• Configure this document first.
• Enable this “Export env.dart & config JSON automatically” option:

5. How to have multilingual OnBoarding screen?​

This is a solution that supports Multi-language OnBoarding screen for your multi languages App.

Follow the steps below:

Step 1: Create app on Fluttersplasher > Features > OnBoarding > select version and upload image, content.

Step 2: Export the env.dart and config JSON files for your languages.

Step 3: In the env.dart , copy the code of onBoardingConfig  Then in the config JSON files (for example: the English config JSON file is config_en.json):

1. Scroll to the end of the file and find the last configuration entry for the design.
2. Paste the copied Onboarding code, and save the code.

Step 4: When you auto-build your Multi-language App on Cloud, be sure to:

• Configure this document first.
• Enable this “Export env.dart & config JSON automatically” option:

That’s all!

The Splash screen (also known as launch screen) is the first screen you see when you visit an app. Please follow these instructions, otherwise your app will be unresponsive and stuck on the loading page.

1. Enable Splash Screen​

Follow these step to enable the Splash Screen on app:

Step 1: open the app on Fluttersplasher .

Step 2: open Features, and then in Branding, select Splash Screen.

Step 3: turn on the Enable option.

2. Configurations​

After enabling the Splash Screen, let’s configure this screen to adapt your needs.

Step 1: open the app on Fluttersplasher .

Step 2: open Features, and then in Branding, select Splash Screen item.

Step 3: select the Type and upload the compatible Image link (refer to the 4 main Type details guides under for more information).

Step 4: setup the Duration (Used for all types except "flare" and "rive". When setting, the splash screen will last for a specific amount of time (in milliseconds)).

Step 5: select Background Color, Image Boxfit and configure the Padding.

Step 6: click the Apply and Save buttons.

Normal Image Types​

Fluttersplasher currently provides several Types for PNG, JPG, and GIF Image.

Including: Static, Fade In, Zoom In, Zoom Out, Top Down.

Rive Type​

To use Rive, follow the steps below:

Step 1: Go to this free tool https://rive.app to create, download the .riv file, and get the Animation names.

Step 2: Open the Rive Type and upload the .riv file

Step 3: Input the appropriate existing Animation name

Flare Type​

To use Flare, follow the steps below:

Step 1: Go to this free tool https://rive.app to create, download the .flr file, and get the Animation names.

Step 2: Open the Flare Type and upload the .flr file

Step 3: Input the appropriate existing Animation name

Lottie Type​

To use Lottie, follow the steps below:

1. Go to this free tool https://lottiefiles.com to create and download the .json file.
2. Select Lottie type and upload the .json file to Splash Screen of Fluttersplasher

3. Disable Splash Screen​

Follow these step to disable the Splash Screen on app:

Step 1: open the app on Fluttersplasher .

Step 2: open Features, and then in Branding, select Splash Screen item.

Step 3: turn off the Enable option.

Step 4: click the Apply and Save buttons.

The Product Detail Screen provides a comprehensive view of the selected product. This instruction provides you with the necessary details and guidance to customize and optimize the Product Detail Screen with Fluttersplasher .

Video Guide

Manual Guide

1. Product Detail Themes​

The Product Detail screen can display on the app under 4 types:

1.1 Simple Type

1.2 Half Size Image Type

1.3 Full Size Image Type

1.4 FlatStyle

To change the Product Detail screen type:

• Step 1: open your app on Fluttersplasher .
• Step 2: on the leftmenu, select the Design item. Then on the simulator, click on any product.
• Step 3: select Layout and choose one of 4 layouts.

2. Vertical Product Gallery​

In addition to the normal product gallery, the app presents the product image gallery in a vertical format, adding a unique touch to the user interface of the product detail page.

The feature is now available for Simple Type and Flat Style of Product Detail Themes.

Follow the guide below to setup the feature:

• Step 1: open your app on Fluttersplasher .
• Step 2: on the leftmenu, select the Design item. Then on the simulator, click on any product.
• Step 3: On the right panel, scroll to Product Image Scroll Direction. Then Select Horizontally or Vertically.

Horizontally:

Vertically:

3. Map in Listing​

After uploading a new listing, the Listing app support displaying the store on map on Listing Detail screen as the image:

To configure, follow the steps below:

• Step 1: open your app on Fluttersplasher .

• Step 2: on the leftmenu, select the Features item.

• Step 3: click the General, then select Google Map and config the feature as this guide:

  

• Step 4: On the simulator of Fluttersplasher , click on any listing. Enable Default Expand Map.

  

4. Product Detail Slider​

The slider settings for the Image Gallery on the Product Details screen are available for Simple Type and Flat Style.

Follow the steps below to configure:

• Step 1: open your app on Fluttersplasher .

• Step 2: on the leftmenu, select the Design item. Then on the simulator, click on any product.

• Step 3: On the right paner, scroll down to find the Slider Settings. There, you'll find the options to configure the settings to suit your specific needs.

  

5. Product Variation Layouts​

Variable products (or variant products) are supported in all apps on Fluttersplasher . Variable products display like this:

To show the variant products on the app successfully, make sure to:

1. Complete the website integration (install all the required plugins if any).

2. Add Variable products on your website. Set Attributes and Variations for the products.

   

3. You can choose the default selected values for attributes as below. These values will be automatically selected when users visit the Product Detail screen.

   

4. If you do not choose the selected default values in the website admin as this image:

Then For WooCommerce, MultiVendor (WCFM, Dokan), and Notion apps, there will be two types as follows:

• If you want automatically select the first values of attributes when the product is opened on the app, on Fluttersplasher : open your app, then select a product, and turn on Auto Select First Attribute :

• Else, if you do not want any default select value when opening the Product Detail screen, turn off "Auto Select First Attribute", and it will display like this:

Disable Buy Now button for Invalid Attributes​

When clicking on a invalid attribute on the variation product, instead of displaying Unavailable button, the Buy Now button still displays, but it will be disabled:

If customers do not select any attribute or select invalid attributes, and then click the Add To Cart or Buy Now buttons, it will show a popup as a reminder.

To do that, follow steps:

• Step 1: open your app on Fluttersplasher .
• Step 2: on the leftmenu, select the Design item. Then on the simulator, click on any product.
• Step 3: On the right paner, enable Show Buy Now button.

Show Image for Selected Variant​

To enable the automatic display of corresponding images when selecting a product variation on your app, please follow the steps:

Step 1: Set images for the variations of a product, for example:

Step 2: Configure the app to display the image for the selected variation.

undefined

6. Dynamic Product Variant​

With this feature, the product variation options fields are transformed into visually appealing representations such as color, box, and option layouts. It is currently compatible with all apps.

Before setting the Product Variant layouts, you need to set up the Attributes of Products as the image.

Then, follow the steps below to change the layout in Fluttersplasher :

Step 1: Open your app.

Step 2: Select any product on the simulator.

Step 3: On the right side screen, scroll down to find the Product Variant Layout.

Step 4: Click + to add new Attribute Slug.

Step 5: Select Layout for the attribute.

undefined

Attribute Layout​

Currently, our apps support 2 layouts to display attributes:

• Attribute Layout is Normal

• Attribute Layout is Inline

Follow the steps below to configure in Fluttersplasher :

Step 1: Open your app.

Step 2: Select any product on the simulator.

Step 3: On the right side screen, find the Attribute Layout and select the suitable layout.

7. Variation Swatches​

The Variation Swatches plugin turns the product variation select options fields into radio images, colors, and labels. Helps you show product variation items in images, colors, and labels. It also enables them in product quick view.

Besides creating size, brand, image, color, and label variation swatches, you can handle the swatches shape style Rounded and Circle.

It is available for WooCommerce, and Multi Vendors app. Compatible with this https://wordpress.org/plugins/woo-variation-swatches plugin.

undefined

8. Inline Video​

Allow your users to see a YouTube or Vimeo video instead of the featured image of the Product Detail page.

You can use WooCommerce Featured Video or YITH WooCommerce Featured Video plugins.

This feature is available for Woocommerce app or Multi Vendors app.

undefined

9. Rating and Reviews​

By reading reviews, customers can benefit from the firsthand experiences of others, gaining confidence in their purchasing choices. These apps - Woocommerce, Opencart, Multi Vendors, Shopify and Listing - support rating and review presentations on the Product Details screen.

Use Fluttersplasher  to enable the feature as below:

Step 1: Open your app.

Step 2: Select any product on the simulator.

Step3: On the right side screen, turn on Enable Review.

undefined

Photo Review​

The Product Details screen also supports review photo presentations. To allow the display of review photos on the Product Details screen, you should enable Rating and Review as the guide above.

This feature is available for WooCommerce, Multi Vendors apps with this plugin https://wordpress.org/plugins/woo-photo-reviews/

undefined

10. Brand Image​

Woocommerce and Multi Vendors allow the app to display Brand Image of products on Product Details screen.

Before enabling the feature on the app, you have to install the plugin Woocommercce Brand to your website. Then use Fluttersplasher  as below:

Step 1: Open your app.

Step 2: Select any product on the simulator.

Step 3: On the right side screen, turn on Show Brand option.

11. Buy Now Button to The Bottom by Default​

For the Simple Type of Product Detail screen, the Buy Now and Add To Cart buttons can also be conveniently located at the bottom, ensuring easy accessibility.

Use Fluttersplasher :

Step 1: Open your app.

Step 2: Select any product on the simulator.

Step 3: On the right side screen, select Simple layout and turn on Fixed Buy Button To Bottom.