Welcome to Mint

Thank you for purchasing Mint, it's such a pleasure to see you here!

This documentation is your guide to make the best out of Mint.
If you have any questions that are beyond this documentation page or are not about Mint.
Just open a ticket at Help Centre and we'll be there for you as soon as we can.

Requirements to Run Mint

  1. The latest version of Android Studio, the latest Gradle build, and the latest SDK.
  2. An active Mint Console account.
  3. A valid purchase code from Envato Market to create project.


Create a new Mint Console Account

  1. Visit https://console.themintapp.com/register to create a new Mint Console account.
  2. Fill the required fields to register.
    • Username.
    • Email Address.
    • Password: Must be longer than 6 characters.
    • Confirm Password.
  3. Click Register to finish creating your account.

Add Your First Console Project

  1. Download Mint Console on your device from here.
  2. Sign into your Console account and add a new project.
  3. Fill the required fields to add a project.
    • Project Name.
    • Project Purchase code: acquired on purchase from Envato Market.
    • Project Package name: Your application package name.
  4. Open Profile tab.
  5. Copy your Secret API Key (SAK).

Configure on Android Studio

  1. Unzip the downloaded pack to access Mint's source code folder which contains all files.
  2. Open & Import this project into Android Studio and make sure you have an active internet connection and the latest SDK and Gradle build installed.
  3. Wait for Android Studio to finish indexing & building the app.
  4. Place your Secret API Key inside the file in this directory app/src/main/java/com/picassos/Config.java

Host on Your Server (optional)

  1. Add a / to your website's URL, e.g. turn https://mywebsite.com into https://mywebsite.com/ which is now your Base URL, then paste it inside the Config.java file.
  2. Copy your Secret API Key and replace the placeholder ADD_YOUR_SECRET_API_KEY_HERE with it.
  3. Go to your profile and click DOWNLOAD FILES then extract the files downloaded. The zip archive downloaded will contain following files:
    • configuration: all configuration data will be placed in this folder.
    • navigation: all navigation data will be placed in this folder.
    • policies: privacy policy and terms of use data will be placed in this folder.
  4. Upload the three files to your server and make sure the base URL is unchanged.
  5. Visit the four provided links (with no spaces) to make sure they're working properly.
    • (insert your base ULR) /configuration/ (insert your Sercret API Key)
    • (insert your base ULR) /navigation/ (insert your Sercret API Key)
    • (insert your base ULR) /policies/privacy/ (insert your Sercret API Key)
    • (insert your base ULR) /polivies/terms/ (insert your Sercret API Key)


Change Package Name

  1. In Android Studio go to the file build:gradle (module: app) and change applicationId to the desired
    package name. e.g. From com.picassos.mint to com.yourcompany.yourappname
  2. Then go to AndroidManifest.xml and update the package name to the same name used in applicationId.

Change Physical Package Name.

  1. In your Project pane, click on the little gear icon.
  2. Uncheck / Deselect the Compact Empty Middle Packages option.
  3. Your package directory will now be broken up to individual directories.
  4. Individually select each directory you want to rename, and:
  1. Right click and select refactor.
  2. Click on Rename.
  3. In the popup dialog, click on Rename Package instead of Rename Directory.
  4. Enter the new name and hit Refactor.
  5. Click Do Refactor in the bottom.
  6. Wait for Android Studio to apply all changes.
  7. Note: Don't change name of Donut or Google. Only change the app package name.

Note: Your package name in google-services.json must be the same as the package names in project & app package name.


Setup Google Firebase project

  1. Open Google Firebase and sign in.
  2. Go to the console of firebase. add project and enter project name or application name then click continue.
  3. If you don't want to use Google analytics uncheck 'enable analytics for this project' and click continue then click create a project.
  4. If you wish to use Google analytics though simply click continue without unchecking and create a Google analytics account then click create a project.

Setup Firebase for Your Android App

(Register App) after creating project click on android icon and fill these fields:

  1. Android package name: your app package name for example com.company.app
  2. App nickname: this name will be shown in Google Firebase app title.
  3. Debug signing certificate SHA-1: required for Google sign-in and dynamic links. Check this section out for help SHA-1 Help.

(Download Config File) Download google-services.json and keep it for later and click next.
Note: Without this file, your app won't show any notifications.

  1. (Add Firebase SDK) skip this portion, we've already integrated the Firebase SDK for you :)
  2. (Run your app to verify installation) run app project on your phone or emulator to test it, or you can skip this step.

Setup Firebase in Your App Project

this is a very easy step, you only have to download google-services.json and place it in your app project files.
But be careful the package name in androidmanifest.xml must match the one in google-services.json

Send Your First Notification With Firebase

  • Click on Cloud Messaging then click on New Notification.
  • Now send your first notification by filling these fields:
    • Notification Title: Header text of notification.
    • Notification Text: Description text of notification.
    • Notification Image: You can add an image by adding the URL of an image or by choosing one from your desktop.
    • Notification Name: Name used to identify this notification on Firebase. This name is not visible to users.
    • Target, User Segment: Here you can target users by app version, country, language, etc.
    • Target, Topic: Here you can send notifications based on the topic users subscribed to:
      • youtube
      • vimeo
      • facebook
      • pinterest
      • imgur
      • Note: some topics may be added following the same pattern.
    • Publish: Click on review and publish your notification.

Obtain Server Key and Sender ID (required for OneSignal)

Go to your project settings and click on Cloud Messaging, then do the following:

  • Inside Project credentials copy & save Server Key and Sender Id wherever you please.


Create AdMob App

  1. Sign in to your AdMob account at AdMob Official Site.
  2. Click Apps in the sidebar.
  3. Click Add app, a dialog box will appear.
  4. Click Yes.
  5. Enter the name of the app and click search.
  6. Click Add beside the app you wish to add.

Create Native Ad Unit

  1. Click Ad units in the sidebar.
  2. Click add Ad unit.
  3. Select the Native advanced Ad format.
  4. Enter a name for this Ad unit. Recommended: Include relevant information, such as Ad format
    and location in your app to make it easier to identify later.
  5. Click Create Ad unit.
  6. Finally copy native Ad unit id and app id then place them inside Console's Manage Ads tab.

Create Interstitial Ad Unit

Do the same with Native Ad Unit but choose Interstitial instead as the Ad format.

Create Rewarded Ad Unit

Do the same with Interstitial Ad Unit but choose Rewarded intead as the Ad format.

Now place AdMob app id, native ad unit, etc. In your configuration. Note: Don't forget to add your AdMob app id insdie AndroidManifest.xml


Create OneSignal App

  • Go to OneSignal and create a new account or sign in with your existing account.

  • Click on new APP/WEBSITE then enter your application name and select Google Android.
  • Copy your App ID and paste it inside Gradle (App) then run your app to validate.
    • Now, run your app to verify installation.

    Send Your First OneSignal Notification.

    1. Go to Messages and click on NEW-PUSH.

    2. Where you can select a portion of your audience to target.
    3. Select Send to Subscribed Users to send notifications for all people subscribed to your app.
    4. Select Send to Particular Segment(s) to target users subscribed to:
      • YouTube
      • Facebook
      • Vimeo
      • Pinterest
      • Imgur
    5. Fill required fields for notification title and whatnot.

    Now we demonstrate to you how to use OneSignal Commands to program notifications to open activities, pages, links and videos on being clicked.

  • Inside your ADDITIONAL DATA fill key with "key" and fill value as explained in this section depending on the command you wish to use.

  • You can also place a button inside your notification by doing the following:

  • Add the same command but add a text and an icon name.
  • Finally, click Confirm and your notification is sent!
  • Note: In App Messages is also supported, don't forget to give it a go!


    OneSignal Commands

    You can use these commands to open an activity, a page, a link and or a video when the user clicks on a notification sent using OneSignal.

    All OneSignal commands are written in the same format, for example youtube:video?1cE9sw which means:

    • youtube: activity name and you can change it based on the activity you want to interact with, activities supported are:
      1. main: Main Activity
      2. youtube: YouTube Activity
      3. vimeo: Vimeo Activity
      4. facebook: Facebook Activity
      5. pinterest: Pinterest Activity
      6. imgur: Imgur Activity
    • video? interaction name to open activity or video or link:
      1. open? Open Activity
      2. video? Open Video

    For example, let's open the Pinterest activity in your app when the user clicks the notification, the command to use here is pinterest:open. Additionally, We can open a specific video directly from YouTube or Vimeo by typing youtube:video?videoID. Also, some commands allow you to open specific parts inside the main activity such as:

    • main:open?bookmarks Open bookmarks page.
    • main:open?downloads Open downloads page.
    • main:open?settings Open settings page.
    • main:open?about Open about page.

    Note: you can only use one command at a time, using more than one command may crash the app.

    Google AdMob Commands

    This form of commands can be added to a URL to show an Ad and after it's closed by the user, for example: https://rixhion.com?native.
    This will show a native Ad while loading URL. Only native Ads support this function.

    JavaScript Bridges

    You can use these commands inside Onclick Events on your website to control the app.
    For example let's assume you have a simple link on your website and you want to add an onclick event to open a native ad, you use this command in Javascript: app.donut_native();

    You can download this sample and add it on your server to test javascript commands.

  • app: app id to interact with:
    1. app.donut_toast("text"); Show toast with text.
    2. app.donut_native(); Show native ad.
    3. app.donut_navigation(); Show navigation.
    4. app.donut_about(); Show about app.
    5. app.donut_bookmarks(); Open bookmarks page.
    6. app.donut_settings(); Open settings page
    7. app.donut_downloads(); Open downloads page


    Change App Icon

    To change application icon and splash screen logo please follow these steps:

    1. Replace mipmap-mdpi with a 48x48px icon.
    2. Replace mipmap-hdpi with a 72x72px icon.
    3. Replace mipmap-xhdpi with a 96x96px icon.
    4. Replace mipmap-xxhdpi with a 144x144px icon.
    5. Replace mipmap-xxxhdpi with a 192x192px icon.

    Or open android studio and do the following:

    1. Expand the project root folder in the Project View.
    2. Right Click on the app folder.
    3. In the Context Menu go to New -> Image Asset.
    4. In the pop up that appears select the the new logo you would like to have (image/clip art/text).


    Change Theme & Colors

    Follow the provided steps to customize the looks of your app:

    1. Open values/colors.xml to edit the colors of your app, we recommend changing them to
      match the color of your website, or simply you can leave them as they are.
    2. Open values/styles.xml to edit light and dark mode, we don't recommend editing this file at all if you're
      unsure of what you'll be doing, changes to this file are risky and we take no responsibility for any critical issues caused by edits to this file.

    Mint Cards

    Our all new card system is now here! all cards mentioned below are available in our Power Store on Mint Console Mobile.

  • Customization Cards: one of these will let you request specific changes to be made to your app that usually
    require coding. And in less than two business days, our developers will apply the changes and review your
    app's code for quality and email it back to you!
  • Custom Dark Mode Cards: adding dark mode support to your website is a complex task that can
    take effort to be implemented manually. So, this card lets us add dark mode support to your website
    and integrate the feature right into your app in less than two business days!

    Design, Remove, and Add Views Using CSS.

    You can add custom CSS to your website for your design edits to be applied only inside the Mint app.
    That is to say, coding for Android using CSS ;). This feature is built to work with both light & dark mode.
    You can hide the footer or change the colors of your app's design anytime in three simple steps!

    1. Go to Custom CSS tab in Mint Console.
    2. Write your custom CSS inside IDE.
    3. Click `Save Custom CSS` to apply your changes and open your app to make sure all changes are applied and are the way you want them.

    Understand How to Remove Views.

    Removing footer: In your code, the footer has the class .footer or footer or has the id #footer, so you do the following to remove it:

    .footer {
      /* you can use the same with #footer and footer */
      display: none;
    #footer, #nav-bar {
      /* you can also hide more than just the footer */
      display: none;
    #side-navigation ul li a {
      /* or you can also toggle visibility like below */
      visibility: hidden;

    Understand How to Edit Views.

    For example, you have an image on your website that you want to add an effect that makes it
    slightly grow in size and be blurred on press.

    img {
     /* For example you have an img view
          that is achieved through this code: */
      position: relative;
      width: 100px;
      height: 100px;
      border-radius: 20px;
      transition: .4s ease;
    /* Using this bit of code you can apply
       the effect we've mentioned above */
    img:hover {
      transform: scale(1.1);
      filter: blur(2px);
     /* note: the action here is on hover, because it 
           is the equivalent of a press on Android */

    Without Mint Custom CSS. The image has no effect. Hover over image.

    With Mint Custom CSS. The effect is applied. Hover over image.

    Download Samples.


    Change Splash Screen Icon

    Replace the file in drawables/splash_logo with the desired logo. Recommendations:

    • 512 * 512 Pixels is the recommended resolution for your splash screen logo.
    • A transparent image is recommended.
    • Gif Images Are Not Supported.

    Fullscreen Image Support

    You can change splash screen logo or image to be fullscreen easily by doing the following:

    1. After changing the splash screen icon to the image you want. Go to the project and open sourcecode/app/src/main/res/layout/activity_splash.xml
    2. Change width and height from `ImageView` 150dp to match_parent for both.


    Wizards Remove, Add, or Edit

    A Wizard is an activity that is opened on startup of your app, and the best way to learn to use them is through testing.
    You can easily remove, edit, or add wizards through Mint Console desktop.
    Without the need to write one line of code. Simply follow these steps:

    1. Go to Wizards tab inside Mint Console.
    2. In the right side, you can add your wizard by filling the following fields.
      1. Wizard Title.
      2. Wizard Description.
      3. Wizard Thumbnail. Here, add your wizard thumbnail located in the drawable folder inside app source files.
    3. You can edit an existing wizard by clicking on the Pen icon or delete it by clicking on the trash icon.
    4. Click on Download Wizards File.
    5. Place or overwrite this file in sourcecode/app/src/main/assets/adapter/wizards.json to apply changes.
    6. we recommend removing unused wizard images to decrease the space used by your app.


    Mint App Updates

    Keep your app up to date by releasing updates regulalry through the Google Play Store.
    Follow these steps to set-up a popup to remind your users of the latest update, and you can also
    set up the pop-up that it forces users to update to the version number assigned.

    1. Open Mint Console desktop application then go to Manage Updates tab.
    2. Specify your latest version code. App updates are determined by their version code (version number), not by the version name.
      • For example, if the latest version code specified at the Mint Console is 10 and your users' installed app version code is 9.
        Your app will request users to update the app. and can force them to update through that next step.
    3. Specify whether to force users to update the app or not by enabling or disabling Force Update.
    4. Click SAVE UPDATES CONFIGURATION to save changes.


    Manage Login Providers

    You can manage your app login providers simply by toggling them on or off (after adding them) inside Mint Console in the Providers tab.

    Add Sign-in with Google Option

    Google sign-in lets your users sign into your app using their Google accounts. To enable this option do the following:

    (SHA-1 is required to enable Google Sign-in)

    1. Setup your project on Firebase by following the steps provided here: Google Firebase.
    2. Go to Login Providers tab in Firebase Console.
    3. Activate Google Login by simply toggling the option on.

    Note: We don't have any access to usernames or email addresses of signed-in users. Instead, we save their account IDs so any changes
    to username or email address won't affect data. Also, we save Google account ID in our private Shared Preferences.

    Add Sign-in with Facebook Option

    Facebook sign-in lets your users sign into your app using their Facebook accounts. To enable this option do the following:

    1. Go to Login Providers tab in Console.
    2. Activate Facebook Login
    3. Go to https://developers.facebook.com/apps/ and log in using your Facebook account.
    4. Create a new application, and fill the following fields:
      • App Display Name: This is the app name associated with your app ID.
      • App Contact Email: This email address will be used to contact you about potential policy violations, app restrictions
        or steps to recover the app if it's been deleted or compromised.
    5. In your Facebook dashboard. Choose Facebook Login Setup.
    6. Select the Android platform as shown below:
    7. We have integrated the Facebook SDK beforehand so you'll have to skip some steps, but please be careful for the ones to NOT skip.
      • Skip 1. Download the Facebook SDK for Android.
      • Skip 2. Import the Facebook SDK.
      • Important, Don't skip: 3. Tell Us about Your Android Project
        • Package Name: Enter your application's package name.
        • Default Activity Class Name: Enter your application's package name and add .MainActivity to the end
          of it to look like this com.company.app.MainActivity
        • Click Save and if shown click `Use this package name`.
      • Important, Don't skip: 4. Add Your Development and Release Key Hashes.
        • We need to set up the key hashes. Which can be done by running the following commands on mac terminal and windows command prompt (cmd):
        • // Mac Command
          keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
          // Windows Command
          keytool -exportcert -alias androiddebugkey -keystore "C:\Users\USERNAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64
      • Important, Don't skip: 5. Enable Single Sign On for Your App and click Next.
      • Important, Don't skip: 6. Edit Your Resources and Manifest.
        • Copy `facebook_app_id` and `fb_login_protocol_scheme`
        • Go to sourcecode\app\src\main\res\values\strings.xml file.
          Paste your app id in `facebook_app_id` and `fb_login_protocol_scheme` as shown below:
      • Skip 7. Log App Events.
      • Skip 8. Add the Facebook Login Button.
      • Skip 9. Register a Callback
      • Skip 10. Check Login Status.
      • Congratulations :) you have integrated Facebook log-in successfully!

    Add Sign-in with Google Firebase Option

    Google Firebase sign-in provides a one-time password for your users when entering their phone number which is called (OTP).
    To enable this option, please do the following:

  • Go to Login Providers tab in Console.
  • Activate Google Firebase Login
  • Connect your Google Firebase project

    1. Sign in with your Google account and connect your project.

    Enable Firebase phone authentication

    1. Open the project that your are using for your app and go to Authentication, Sign-in method.
    2. Enable Phone Authentication.

    Enable Firebase Firestore databases

    1. Go to Database.
    2. Make sure Start in production mode is checked and click next.
    3. Click Done to create your database.
    4. Now, go to Rules and change from false to:


    Change Progress Loader

    You can customize your progress loader anytime through Mint Console.
    This is the selection of progress loaders we currently have for Mint:

    Note: We recommend using the Native Progress built-in loader for a more native experience.

    Rotating Plane

    Double Bounce


    Wandering Cubes

    Chasing Dots

    Three Bounce


    Cube Grid

    Fading Circle

    Folding Cube

    Rotating Circle


    Install WordPress WP REST API Controller Plugin

    1. Login to your WordPress admin.
    2. Go to Plugins.
    3. Click Add New to add a new plugin.
    4. Search for WP REST API Controller plugin and click Install Now.
    5. After it finishes installing, click Activate to activate the plugin.
    6. Now, go to your website and add /wp-json/wp/v2/posts to the end of it to check if the plugin works.

    Enable WordPress

    1. Open Console Desktop.
    2. Go to WordPress page.
    3. Now, enter your Base URL (Website URL). For example https://example.com
    4. In Per Page Results, add your posts result.


    Obtain Youtube Channel ID

    Open Youtube Channel Id Finder.

    1. Enter your Youtube Channel Url.
    2. Copy your Channel ID, for example: eg-UC2Oos3JPCcWtRxCa5nCHZHw
    3. Paste it inside Configuration Page.

    Obtain Your Youtube API KEY

    Go to https://developers.google.com/ and log in or create an account, if necessary.

    1. After logging in go to this link https://console.cloud.google.com/ and click on the blue CREATE PROJECT button as shown in the screenshot below.
      Then wait a moment for google to prepare your project.
    • Fill in whatever Project Name you want.
    • Then click on the GoogleAPIs link in the top left corner and then click the link option called “YouTube Data API.” It’s under
      YouTube API’s. You can see it highlighted in the screenshot below.
    • Click ENABLE.
    • Next click on the blue ‘Create Credentials’ button to the right.
    • Choose YouTube Data API v3 for the first selection and Web server (e.g. node js. Tomcat) for the second selection.
      Afterwards choose Public data. Then click the blue button “What credentials do I need?.”
    • Wait for google to create your new project and you should see the screen below where you can copy your API Key.


    Obtain Vimeo Channel Username.

    1. Paste your Vimeo channel URL (e.g. https://vimeo.com/passionparis) here and click enter.
    2. Place your username & id inside your Configuration Page.

    Obtain Vimeo Secret Token

    1. Once you're logged into your Vimeo account, visit https://developer.vimeo.com and click New App.
    2. Fill the required fields then click Create App to create a new application.
    • After your Vimeo App is created, navigate to the Authentication tab and click Generate.
    • Now, copy your Access Token and paste it inside Configuration Page.


    Obtain Pinterest Username

    Go to your Pinterest profile page e.g. https://www.pinterest.com/Picassos-Team

    1. Copy your username, for example: Picassos Team.
    2. Place your username inside your Configuration Page.

    Obtain Pinterest Access Token

    1. Once you are logged in to your Pinterest account, visit https://developers.pinterest.com/ and click Apps.
    2. Click on New App to create a new application.
    3. Fill the required fields and wait for Pinterest to review your app. Once it's accepted you're pretty much done!


    Obtain Facebook Page Id.

    1. Paste your Facebook page/account URL (e.g. https://www.facebook.com/Picassos-Team) here and click enter.
    2. Place your username inside your Configuration Page.

    Obtain Facebook Access Token.

    1. Once you're logged into your Facebook account, visit https://developers.facebook.com/ and click My Apps.
    2. Then click Create App.
      • Enter your application name & contact email.
      • Click Create App ID.
    3. Click on Tools and select Graph API Explorer.
    4. Fill in the required data.
    5. Click on User or Page and choose Page Access Token. Select your page and verify.
    6. Click on the blue info icon to the left of your Access Token and click on Open in Access Token Tool.
    7. Click on Extend Access Token. Copy your access token and paste it inside your Configuration Page.


    Obtain Imgur Profile Username.

    Go to your Imgur profile page eg-https://imgur.com/user/Picassos-Team

    1. Copy username, for example: Picassos Team.
    2. Place your username inside your Configuration Page.

    Obtain Imgur Access Token.

    1. Once you're logged into your Imgur account, visit https://api.imgur.com/oauth2/addclient and enter the following data:
      • Application name: Enter your application name
      • Authorization type: Select "OAuth 2 authorization with a callback URL"
      • Authorization callback URL: Enter https://www.getpostman.com/oauth2/callback
      • Application website (optional): Enter your website's URL.
      • Email: Enter your email address.
      • Description: Type your application's description.
    2. Now save your Client ID and Client Secret.
    3. Download Postman to get your access token.
    4. Choose OAuth 2.0 and click on Get New Access Token.
    • Fill in the required data as explained below.
      1. Token Name: Imgur Token
      2. Auth URL: https://api.imgur.com/oauth2/authorize
      3. Access Token URL: https://api.imgur.com/oauth2/token
      4. Client ID: Enter your client id.
      5. Client Secret: Enter your client secret.
    • Click Request Token and login with your Imgur account.
    • Now copy your access token and paste it in your Configuration Page.


    Get SHA-1 for Mint

    1. In Android Studio click on the Gradle tab.
    2. Click on SigningReport then copy your SHA-1.

    Sign Your Application (Sourced from: Sign your app)

    Your app needs to be signed in order to be accepted by the Google Play Store.
    Here we will show you how to build a signed bundle for your app.

    1. In the menu bar, click Build > Build > Generate Signed Bundle/APK.
    2. In the Generate Signed Bundle or APK dialog, select Android App Bundle or APK and click Next.
    3. Below the field for Key store path, click Create new.
    4. Fill the required fields under keystore as explained below.
      • Keystore path: Select the location/path where your keystore will be created.
      • Password: Create and confirm a strong & secure password for your keystore.
    5. Fill the required fields under key as explained below.
      • Alias: Enter an identifying name for your key.
      • Password: Create and confirm a strong & secure password for your key. And make sure it's not the same password you've created for your keystore.
      • Validity (years): Set the amount of time in years for your key to remain valid. Note that, your key should be valid for at least 25 years, so you can sign updates with the same key through the entire lifespan of your app.
      • Certificate: Enter the required information about you (or the team working on the app) to certify your ownership of this key and thereby your ownership of this signed bundle for your app, all the information entered won't be displayed in your app, but will be a part of the certificate as a part of the APK.
    6. Once you complete the form, click OK.
    7. Click next.
    8. Choose release and/or debug then click finish and wait until the process is done.

    Change App Name.

    1. In Android Studio, open this directory: sourcecode/app/src/main/res/values/strings.xml
    2. In line 14 with app_name change value from Mint to your application name.

    Change Version Name & Code.

    1. In Android Studio, open this directory: sourcecode/app/src/main/res/values/strings.xml
    2. Change value of versionCode and versionName.