This is available on Subscription Tiers: 

Essentials, Accelerate, and Ultimate

Why This Matters

Our Custom Branding feature lets you customize client-facing portions of Wodify to match your business' branding. You can customize the color scheme, header image, and more. This branding will appear on the Wodify mobile app, Kiosk+, and Simple Sign-In.

Step-By-Step How To

Access Custom Branding

With Custom Branding, you can choose your primary colors, customize your Loading screen and header color, upload your logos, and choose your icon customization.

Our dynamic simulator will showcase all your branding changes with a real-time app preview. This allows you to interact and demonstrate how the customizations appear across devices, ensuring a consistent user experience for your business.

1. Go to  Web & Mobile > Custom Branding
2. Select the Light Mode or Dark Mode tab. Each tab has its own Loading Screen, Header Background, and Logo fields, so you can set a different look for each mode.
3. From here, test color combinations and preview each mode on its own tab, ensuring your colors accurately represent your brand, and are easy to read!

Customization Options

1. Primary Colors: This will customize the colors of the buttons and link text in both Light Mode and Dark Mode.
2. Loading Screen: This will be the image and background color of the loading screen in the Wodify app. Set this separately on the Light Mode and Dark Mode tabs.
3. Header Background: This will be the image and background color of the header in the Wodify app and Online Sales Page. Set this separately on the Light Mode and Dark Mode tabs.
4. Logos: You can select or drag images to upload directly. Upload your logos on the Light Mode tab, and upload a different set on the Dark Mode tab if you want your logos to look different in each mode. If you leave the Dark Mode logo fields empty, your Light Mode logos will be used in Dark Mode.
   1. Horizontal: This will be the primary logo used throughout Wodify, including in the header of the mobile app, Kiosk+, and in WodiFind.
   2. Square: This logo will be used in WodiFind and the Mobile app loading screen. NOTE: If you do not provide a square logo, the horizontal logo will be used.

Pro Tips

Loading Screen:

1. Custom Image
   • We recommend an image that matches the general proportions of a phone (taller than it is wide) so that the image fills up a majority of the screen.
2. Background Color
   • If your Loading Screen Image is not a .png file with a transparent background, we recommend that you match the color with the outer border of the image to make the loading screen feel cohesive.
   • You can do this by figuring out the hex color of your image using a tool like this Chrome extension. Then, use that hex number for the Loading Screen Background Color.

Header:  

1. Custom Image
   • We recommend rectangular images that are square or banner-shaped (wider than they are tall).
   • We recommend that you use an image with a height of at least 80 pixels so that it fills the height of the header.
2. Header Background Color
   • If your Header Image is not a .png file with a transparent background, we recommend that you match the color with the outer border of the image to make the header feel cohesive.
   • You can do this by figuring out the hex color of your image using a tool like this Chrome extension. Then, use that hex number for the Header Background Color.

Light and Dark Mode Tabs:

1. Set Each Mode
   • Loading Screen, Header Background, and Logos are set separately on each tab, so check both the Light Mode and Dark Mode previews before you save.

Primary Color/ Light and Dark Mode:

1. Contrast is Key
   • Ensure that there's enough contrast between the foreground (text) and background. Tools like the Web Content Accessibility Guidelines (WCAG) contrast checker can help.
2. Avoid Pure Black or White
   • For dark mode, rather than using pure black, opt for a dark gray. Similarly, for light mode, instead of pure white, consider a very light gray. This reduces eye strain.
      

FAQs

1. "What file types are allowed for uploading logos?"
   Answer: Wodify supports file types .png, .jpg, and .svg.
    
2. "What logo dimensions are recommended?"
   Answer: 900px width by 240px height horizontal logo, and 800px width by 800px height square logo. Please note that the maximum file size is 5MB.
    
3. "Are there more ways to customize the app further for my business and client needs?"
   Answer: Absolutely! Take a look at the Customize Mobile App Navigation to see how to configure your app’s navigation settings to match your gym's needs!
    
4. "Do I have to upload separate logos for Dark Mode?"
   Answer: No. If the Dark Mode logo fields are empty, your Light Mode logos will be used in Dark Mode. Upload Dark Mode logos only if you want a different look in each mode.
    
5. "My Light Mode and Dark Mode tabs look the same. Why?"
   Answer: When this update was released, your existing Loading Screen, Header Background, and Logo settings were copied to both tabs so nothing changed for your clients. Edit the Dark Mode tab whenever you want a different look in Dark Mode.