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
Minimum required assets
Whitelabelling Buzzy requires the following brand assets and source files.
Logo
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,.jpgor.svgpreferred
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:
This resolves to the following code in the html <head> when the app runs:
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_rnrepo from githubcreate 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.jpgmay 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
.xcassetsScreenshots 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, see Google’s documentation.
Above info current as of 22 March 2021.
Last updated