Link Search Menu Expand Document

Whitelabelling Buzzy

Whitelabelling Buzzy requires access to both the meteor (browser) and react-native (mobile apps) code repositories as well as the settings/config files. Generally the partner will supply the basic brand assets, and Buzzy devops will work on the actual configuration, asset generation and deployment of the whitelabelled product.

Table of contents

  1. Minimum required assets
    1. Icon
    2. Brand styleguide
    3. Splash screen (optional)
    4. App store screenshots (optional)
  2. Whitelabelling the webapp (B7)
    1. Logos
    2. Favicon
    3. Theme
  3. Whitelabelling the mobile app (RN)
    1. Icons & Splashscreens
      1. iOS
      2. Android
    2. Theme
    3. App Stores
      1. iOS
      2. Android

Minimum required assets

Whitelabelling Buzzy requires the following brand assets and source files.

  • light on dark (with transparent background) in horizontal format (app)
  • dark on light (with transparent background) (email notifications)
  • hi-res bitmap or vector (preferred)

Icon

  • square variation on logo or icon (eg favicon or app icons)
  • min 2048x2048
  • transparent background
  • hi-res bitmap or vector (preferred)
  • favicon: existing favicon assets / markup would be preferred (eg from existing website)

Brand styleguide

  • colour palette (web)
  • typography guides (web)

Splash screen (optional)

  • square design for a splash screen (landscape and portrait are cropped out of this, so anything like a logo or text needs to be a small thing in the center)
  • min 4096x4096
  • non-transparent background
  • .png, .jpg or .svg preferred

App store screenshots (optional)

  • Images to use in app stores (if available) - refer to Apple and Google Play store guidelines

Whitelabelling the webapp (B7)

The webapp can be whitelabelled via changes in the settings/config file to define the custom logos and icons, and basic colour theme settings defined in the .less styles (prior to being compiled to .css).

BEFORE YOU START

  • clone the buzzy7 repo from github
  • create a new branch for your whitelabel deployment
  • work within this new branch for the theme changes outlined below
  • clone a settings file somewhere locally - you will need to modify this to define and test some of your changes
  • settings, logo and favicon changes can be tested by running the branch locally and referring to your modified settings file eg via meteor run --settings ../my-custom-settingsfile.json

Logos

REQUIRED SOURCE FILES

  • light on dark (with transparent background) in horizontal format (app)
  • dark on light (with transparent background) (email notifications)
  • hi-res bitmap or vector (preferred)

APP LOGO
Resize your source logo down to a max height of 90px; it should still be legible when shrunk to fit inside an area of 192x28 pixels on a dark background. Export the logo as a transparent .png, and host it somewhere.

Open your settings file and enter the absolute path to your logo at public/BUZZY_CUSTOM/LOGO_MAIN/.

EMAIL LOGO
Resize your source email logo - for wide landscape logos, a max width of 240px is recommended. With vertical logos, a max height of 120px is recommended, but for standard-ish rectangle logos (eg 4:3 ratio etc) keep it very small (the default Buzzy one is 60x25px). Export your logo as a .gif, .jpg or .png file with a white or transparent background, and host it somewhere.

Open your settings file and enter the absolute path to your logo at public/BUZZY_CUSTOM/LOGO_MAIL/. Due to how the notification emails are generated, you’ll also need to define the dimensions of your email logo at public/BUZZY_CUSTOM/LOGO_MAIL_WIDTH and public/BUZZY_CUSTOM/LOGO_MAIL_HEIGHT - these should correspond to actual image dimensions (don’t rely on these variables to resize down from a larger image).

Favicon

REQUIRED SOURCE FILES

  • square variation on logo or icon (eg favicon or app icons)
  • must be larger than 260x260 (use a large icon image from the app as a source)
  • only needed if generating from scratch; existing favicon assets / markup would be preferred (eg from existing website)

The favicon is defined in the settings file via public/BUZZY_CUSTOM/FAVICON as an escaped html string that is inserted in the app html head to define a favicon. The linked assets (eg icon files, svg, xml, webmanifest etc) will need to be hosted somewhere and referred to here via absolute urls - see the example below:

      "FAVICON": "<!-- Icons injected via settings --><link rel=\"apple-touch-icon\" sizes=\"60x60\" href=\"https://www.buzzy.buzz/assets/ico/apple-touch-icon-60x60.png?v=wAd86krNOG\">\n<link rel=\"apple-touch-icon\" sizes=\"76x76\" href=\"https://www.buzzy.buzz/assets/ico/apple-touch-icon-76x76.png?v=wAd86krNOG\">\n<link rel=\"apple-touch-icon\" sizes=\"120x120\" href=\"https://www.buzzy.buzz/assets/ico/apple-touch-icon-120x120.png?v=wAd86krNOG\">\n<link rel=\"apple-touch-icon\" sizes=\"152x152\" href=\"https://www.buzzy.buzz/assets/ico/apple-touch-icon-152x152.png?v=wAd86krNOG\">\n<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"https://www.buzzy.buzz/assets/ico/apple-touch-icon-180x180.png?v=wAd86krNOG\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"https://www.buzzy.buzz/assets/ico/favicon-32x32.png?v=wAd86krNOG\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"https://www.buzzy.buzz/assets/ico/favicon-16x16.png?v=wAd86krNOG\">\n<link rel=\"manifest\" href=\"https://www.buzzy.buzz/assets/ico/site.webmanifest?v=wAd86krNOG\">\n<link rel=\"mask-icon\" href=\"https://www.buzzy.buzz/assets/ico/safari-pinned-tab.svg?v=wAd86krNOG\" color=\"#03a9f4\">\n<link rel=\"shortcut icon\" href=\"https://www.buzzy.buzz/assets/ico/favicon.ico?v=wAd86krNOG\">\n<meta name=\"msapplication-TileColor\" content=\"#03a9f4\">\n<meta name=\"msapplication-TileImage\" content=\"/assets/ico/mstile-144x144.png?v=wAd86krNOG\">\n<meta name=\"msapplication-config\" content=\"/assets/ico/browserconfig.xml?v=wAd86krNOG\">\n<meta name=\"theme-color\" content=\"#ffffff\">",

This resolves to the following code in the html <head> when the app runs:

<link rel="apple-touch-icon" sizes="60x60" href="https://www.buzzy.buzz/assets/ico/apple-touch-icon-60x60.png?v=wAd86krNOG">
<link rel="apple-touch-icon" sizes="76x76" href="https://www.buzzy.buzz/assets/ico/apple-touch-icon-76x76.png?v=wAd86krNOG">
<link rel="apple-touch-icon" sizes="120x120" href="https://www.buzzy.buzz/assets/ico/apple-touch-icon-120x120.png?v=wAd86krNOG">
<link rel="apple-touch-icon" sizes="152x152" href="https://www.buzzy.buzz/assets/ico/apple-touch-icon-152x152.png?v=wAd86krNOG">
<link rel="apple-touch-icon" sizes="180x180" href="https://www.buzzy.buzz/assets/ico/apple-touch-icon-180x180.png?v=wAd86krNOG">
<link rel="icon" type="image/png" sizes="32x32" href="https://www.buzzy.buzz//assets/ico/favicon-32x32.png?v=wAd86krNOG">
<link rel="icon" type="image/png" sizes="16x16" href="https://www.buzzy.buzz/assets/ico/favicon-16x16.png?v=wAd86krNOG">
<link rel="manifest" href="https://www.buzzy.buzz/assets/ico/site.webmanifest?v=wAd86krNOG">
<link rel="mask-icon" href="https://www.buzzy.buzz/assets/ico/safari-pinned-tab.svg?v=wAd86krNOG" color="#03a9f4">
<link rel="shortcut icon" href="https://www.buzzy.buzz/assets/ico/favicon.ico?v=wAd86krNOG">
<meta name="msapplication-TileColor" content="#03a9f4">
<meta name="msapplication-TileImage" content="https://www.buzzy.buzz/assets/ico/mstile-144x144.png?v=wAd86krNOG">
<meta name="msapplication-config" content="https://www.buzzy.buzz/assets/ico/browserconfig.xml?v=wAd86krNOG">
<meta name="theme-color" content="#ffffff">

Tip: generating the required assets and markup for a comprehensive favicon suite is easiest via a service such as Realfavicongenerator. If you want to create your assets manually, this article is a good place to start.

Pro Tip: if your brand already has a website with a well-defined favicon, you can simply copy that code, redefine the icon paths to absolute urls, escape the code, and insert this into your settings file as per the example above.

Theme

REQUIRED SOURCE FILES

  • brand styleguide (if available)
  • colour palette (web)

Run and launch your local whitelabel buzzy7 branch locally.

Open the theme variables definition at client/styles/_variables.import.less and adjust the variables and colour definitions to suit your brand styleguide or colour palette. Test your changes thoroughly in the browser. Logo and settings changes from above can be tested by modifiying the path to the settings file when launching the app eg meteor run --settings ../my-custom-settingsfile.json. When ready, commit your branch, and move on to deployment.


Whitelabelling the mobile app (RN)

Whitelabelling Buzzy’s react-native mobile app needs changes both to actual app assets and theme variables in the codebase, plus additional app store assets (including descriptions and emulator screenshots) when deploying to the Apple and Google Play stores.

BEFORE YOU START

  • clone the buzzy_rn repo from github
  • create a new branch for your whitelabel deployment
  • work within this new branch for the changes outlined below

Icons & Splashscreens

iOS

REQUIRED SOURCE FILES

  • app icon 1024x1024 (can have transparent or solid background)
  • splash screen 2208x2208

Use an app such as Asset Catalog Creator Pro to generate Images.xcassets, which should contain both app icons and splashscreens.

In your whitelabel buzzy_rn branch, replace the ios/Images.xcassets directory with the new one.

Android

REQUIRED SOURCE FILES

  • app icon 2048x2048 (can have transparent or solid background)
  • app icon 2048x2048 (transparent - needed if above is solid background)
  • hex colour value of the icon (input into icon ui prior to generating)
  • splash screen 4096x4096 .png (note .jpg may get better results despite docs)

This article has good a reference/overview.

ICONS
Use http://romannurik.github.io/AndroidAssetStudio/ to generate launcher icon ic_launcher.zip, shortcut icon ic_shortcut.zip and notification icons ic_stat.zip directories. Each one of those contains a res directory - you then need to open them all and manually combine them into a single res directory.

SPLASH
Use https://apetools.webprofusion.com/#/tools/imagegorilla - only the splashscreens part. It will generate a zip folder containing a number of directories such as res/drawable-xxxhdpi. Some will already exist from the icon generation above, and some are new. Again, manually merge these into your single res folder. The quality may be poor; it may take several goes or manual edits to get rid of random chunks of black square artefacts - see this issue. Despite what the Ape Tools documentation advises, jpg source files may work better.

MISSING
Check an existing buzzy_rn branch as there may be a couple of other folders inside res we haven’t generated yet - values and layout. Copy these into the new res folder and edit any paths in nested files.

In your whitelabel buzzy_rn branch, replace the android/app/src/main/res directory with the new one.

Theme

REQUIRED SOURCE FILES

  • brand styleguide (if available)
  • colour palette (web)

Run and launch your local whitelabel buzzy_rn branch in an Android or iOS emulator, or on a tethered device.

Open the theme variables definition at src/themes/theme.js and adjust the variables and colour definitions to suit your brand styleguide or colour palette. Test your changes thoroughly in the emulator. Icon and splashscreen changes from above should also be tested. When ready, commit your branch, and move on to deployment.

App Stores

iOS

REQUIRED SOURCE FILES (Reference)

  • App store icon auto-generated via XCode build, comes from .xcassets
  • Screenshots As per Apple, we need minimum of 4 files:
    • 1284 x 2778 6.5 inch (iPhone 12 Pro Max, iPhone 11 Pro Max, iPhone 11, iPhone XS Max, iPhone XR)
    • 1242 x 2208 5.5 inch (iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus)
    • 2048 x 2732 12.9 inch (iPad Pro (4th generation, 3rd generation))
    • 2048 x 2732 12.9 inch (2nd generation iPad Pro) (note that this has same dimensions as the one above, but is listed as a separate requirement)

Note that the above is a guide only - Apple frequently updates its list of required assets, so you’ll need to check Apple’s documentation before you start.

If you choose to mock up your own app store images that include a device frame (eg an ipad or iphone frame as part of the image), you’ll need to make sure that the device depicted matches the screenshot requirement and corresponds to the actual latest Apple release of that device; for instance, don’t depict an iPad Air in an image supplied to meet the iPad Pro 4th generation requirement. Apple has been known to reject images based on this.

To generate actual screenshots of the themed app, you’ll need to run it locally in an iOS emulator (choose the appropriate device type for the required screenshot), decide on the actual screens you wish to capture (you may need to create some example content), and then capture those screens. You’ll need to repeat this for each device listed as required by Apple at the time you’re doing this.

Generate the assets above, then log in to your Apple developer account and replace the assets where required. For other content required on your Apple App Store product page, see Apple’s documentation.

Android

REQUIRED SOURCE FILES (Reference)

  • Hi-res icon 512 x 512, 32-bit PNG with alpha, max file size 1024Kb
  • Feature graphic 1024 w x 500 h, JPG or 24-bit PNG (no alpha)
  • Screenshots At least 2 screenshots overall.
    • JPEG or 24-bit PNG (no alpha). Min length for any side: 320px. Max length for any side: 3840px. Grouped into 4 types: Phone/Tablet/Android TV/ Wear OS.
    • As a minimum, try:
      • 1242 x 2208 for phone
      • 2048 x 2732 for tablet
      • Tip: reuse edited versions of the Apple screenshots from above

Google Play is far more lenient when it comes to app screenshots than Apple is - check their documentation here. This means we can often simply reuse edited versions of the iOS screenshots for the Play store - the depicted UI won’t match the exact Android UI, so it’s up to you whether this is an acceptable compromise for the savings in time and effort.

If you wish to generate accurate screenshots, you’ll need to run it locally in an Android emulator or attached device (choose the appropriate device type for the required screenshot), decide on the actual screens you wish to capture (you may need to create some example content), and then capture those screens. You may need to repeat this multiple times, depending on which screens and which device resolutions you wish to capture.

Generate the assets above, then log in to your Google Play Store account and replace the assets where required. For other content required on your Google Play Store product page, seeGoogle’s documentation.


Above info current as of 22 March 2021.