Recent Articles

Connect Google Play Developer Account

Connecting Your Google Play Developer Account In this tutorial, you will learn how to connect your Google Developer Account to your BuddyBoss App. Once you’ve connected your Google account, you’ll be able to sync your in-app products with your products in your Google Play Developer Account and be able to submit the Android version of your app to be published through our publishing service. Step 1- Set Up Your Google Console and Google Play Store Navigate to Google Console. After you login click on the project in the header section. Here, you can navigate to your projects or create a new one just by clicking on NEW PROJECT.  Once created, from the sidebar, navigate to API & Services > Enable API & Services. Click on Library. Here, search Google Play Android Developer API and click on the result below.  Click the ENABLE button. After enabling the API, it will redirect you to the API screen, from there, click Credentials. Scroll down a little you should see the section for Service Accounts. Enter a Service Account name. It can be anything, such as the name of your app or business. Then press CREATE AND CONTINUE button. Select a role from Basic then Owner.  Now Press CONTINUE.  Finally hit the DONE button.  In the next page, click at the ellipsis and from the drop down menu hit the Manage keys.   Here, click on the ADD KEY then the Create new key.  Select JSON and hit the CREATE button.   After that a notification will appear and the Service Account Key will be saved to your computer, ready to upload in the BuddyBoss App’s settings. Please be aware that you can download this file only once. Kindly ensure to secure it in case you require it in the future. Moreover, you can copy it after closing the notice.  Go to the Service Accounts and copy the automated Email. Now, navigate to Google Play Store and click on the Go to Play Console Button.  From the left side bar click on Users and permissions.  Press on Invite new users. In the Email address field paste the copied email. To give App Permissions, click Add app and select any of your apps.  If you want you can give full permissions through Account permissions. Or you can tick only the Financial Data and any other data. Then click the Invite user.  Now a popup will appear where you have to confirm it by clicking the Send invite button.  Now if you search with your service account name you will see the status is Active now.  In the User details section you will see an option Remove user.  After pressing it a popup will appear and you have to click Remove or you can Cancel it. Step 2- Set Up Your BuddyBoss App Let’s navigate to BuddyBoss App - Configure - Android Settings. Now click the Upload File button. Upload the JSON file you created from your Google Cloud account and saved it in your computer.  Now hit the Connect Account button. You will see the green Connected indication. That means, you have connected your BuddyBoss App with your Google Developer Account.  Now move to your Google Play Console - Home. Under your App name you will see the Application ID, copy that. Go to your BuddyBoss App WordPress backend and paste the Application ID. Scroll down below and tick the box here, it indicates that you have registered this Application ID in Google Developer Account.  So, that’s the way you can set up API Access with your BuddyBoss App. 

Forum Login Widget

Why Use Forum Login Widget? Unlock an exclusive entrance for your Forum enthusiasts with our Forum Login Widget! Craft a seamless login journey, effortlessly guiding users to registration or password recovery. Elevate your Forum experience today. Configure Forum Login Widget Navigate to Appearance - Widgets. Then click on any place where you want to add the Forums Login Widget. In the search bar find the Widget and drag it to the plus (+) icon.  Write down the Title and don’t forget to hit the Update button. Let’s refresh your frontend. As we have placed the widget on the Activity page then check that page. This is the form which will appear to the users.  Let’s now add the Register URL and Lost Password URL. Please don’t forget to press the Update button otherwise you will lose all your edits. And refresh the frontend again. Register and Lost Password will display like this hyperlinked way.  Enhance your Forum's accessibility and user experience with the Forum Login Widget. This tool is designed to streamline the login process and provide direct links for registration and password recovery. Boost your community engagement effortlessly.

Share App Link

Why Use Share App Link Feature in Your BuddyBoss App? Did you know, users referred by friends are 4x more likely to take action than other channels? Well, say hello to the latest feature, App Share Link. It’s your secret weapon for making app discovery and installation a breeze through the power of recommendations. Configure Share App Link  Navigate to Buddyboss App - Settings - Feedback and scroll down to find the Share App Link.  Tick the App Sharing box to enable the app sharing button.  Since a user will be sharing your app through many channels, we want to be in-control of the messaging. So let’s start by adding a Preview Title. Write the Preview Title and Preview Description. After that Upload the Preview Image.  In order to enable this on iOS, we need to check the box to Enable on iOS, and the same for Android. Of course, if you haven’t published your app on both stores, you can come back later and add them. We should also provide a fallback link in case someone opens the link on an alternative device, such as a PC.  And finally, if we go back to the top you can also see an App Sharing Link. You can apply this URL to buttons, Quick Links on app pages or in your menus. How to Share Your App Link Now, go to your mobile app and navigate to More - Settings. Scroll down and you will find out the Share this App option, tap on it. A new modal will appear showing different actions to share your app. For example, you could share this link directly to contacts or another app such as Facebook or LinkedIn. The Share App Link feature in your BuddyBoss App turns word-of-mouth into a powerful user acquisition tool. It simplifies sharing your app, boosting visibility and engagement through trusted recommendations. Let’s boost your membership business to the next level.

Profile Avatar Display Name

Why Use the Profile Avatar Display Name Feature? Say goodbye to blank profiles! Gone are the days of generic or missing avatars. With initial avatars, every member and group automatically has a recognizable profile image, fostering a more varied and vibrant community site. Configure Profile Avatar Display Name Navigate to BuddyBoss > Settings > Profiles. Here you can see the Display Name Format is First Name.  Scroll down to the Profile Images section. And you will see this new Display Name option under the Default Profile Avatar. If you scroll down more you will see the preview and how this will look on your web and app users. Before leaving don’t forget to click the Save Settings button from the bottom of this page.  Let’s go to the Members page. You will clearly notice the new Display Name in the avatar of users profile who haven’t uploaded any picture yet. As for this site, I have selected First name so it will show single initials on the default profile avatar.  Configure Group Avatar Display Name Go to the Groups section from the backend. Under the Group Settings, scroll down to the Group Images section. Then select Group Name for the Default Group Avatar. You can also preview the cover image here for web and app users. Now, hit the Save Settings button.  Let’s switch to the frontend to demonstrate how this feature will appear on your website. Using initials as a profile avatar can strike a balance between providing a visual representation of a user while respecting privacy and maintaining a professional and organized appearance.

Hide Groups Tabs

By default, the platform does not have this option. You can use the following CSS code. Please follow the steps below: 1. Go to BuddyBoss > Theme Options 2. Under Custom Codes, enable CSS 3. Append the following: #activity-groups-li.bp-groups-tab, #members-groups-li.bp-groups-tab, #photos-groups-li.bp-groups-tab, #albums-groups-li.bp-groups-tab, #documents-groups-li.bp-groups-tab, #nav-forum-groups-li.bp-groups-tab, #invite-groups-li.bp-groups-tab, #group-messages-groups-li.bp-groups-tab, #admin-groups-li.bp-groups-tab, #videos-groups-li.bp-groups-tab { display: none !important; } Edit remove the line that you don't want to be hidden.Always make sure the last class will have { instead of comma 4. Save changes. Note: Any modifications are considered as custom work already. Know more about our Support policy here: https://www.buddyboss.com/support-policy/

Display the LearnDash Course Page in List View By Default

By default, the platform does not have this option. You can use the following JavaScript code to display the LearnDash course page in list view by default. Please follow the steps below:     1. Go to BuddyBoss - Theme Options.     2. Under Custom Codes, enable JavaScript.     3. Append the following: jQuery( document ).ready( function(){ jQuery( '#course-dir-list .bb-course-items' ).addClass('list-view bb-list'); jQuery('a.layout-grid-view').removeClass('active'); jQuery('a.layout-list-view').addClass('active'); }); JavaScript     4. Click Save Changes. Note: Any modifications are considered as custom work already. Know more about our Support Policy here: https://www.buddyboss.com/support-policy/

App Colors

Why Use the Color Feature in Your BuddyBoss App? The Color feature assists you to have your own brand look to the next level without any hassle. Only you need to pick your color in the specific area. The fun part is you can check the preview of your app just the way your customers will see it.  Configure Colors Navigate to BuddyBoss App - Branding - Colors. First we will check the General section. Here you can choose your desired color, even there is an option to use the color code. Like we change the Background Color. On the right side, you can see the preview of the App Page.  There are more color changing areas available here, such as- Alternate Background Color, Color Image Background, Border Color, and Accent Color. Apart from App Page, you can see the Directory Page and Menu page as well.  In the Navigation Bar, change the color of Navigation Bar Background Color, Navigation Bar Text Color, and Navigation Bar Link Color.   After that change the color of the Tab Bar and More Screen section. You can change the color of Tab Bar Background Color, Icon Default, and Icon Active. At the right side currently you are watching the Tab Bar.  Here is the More Screen for you.  In the Buttons section, you are able to alternate the color of Primary Button background Color, Primary Button Text, Secondary Button background Color, and Secondary Button Text.  Like the same way we are changing Text Colors. Heading Text Color, Body Text Color, Description Text Color, and Meta Text Color can be changed here. Labels are essential to show the designation of a person. That’s why we have the Label Background and Label Text option.  You will find multiple useful color changing area in the Login Screens section.  Same as for the Register Screens.  We know you may have a priority of course based customers. That’s why there is a dedicated Courses section with Completed, In Progress, Start Course, Free, and Not Enrolled color changing areas.  In the Android Status Bar, we have only Android - Status Background Color. You can check out how this will appear in a customer's android phone.  In-App Purchases is also an important section for the customers. You can change color of the Purchased Status Checkmark and Benefits Checkmark area to change your desired color.  So, till now you are viewing the Android preview. There is an iPhone preview as well. After selecting all the colors don’t forget to press the Save Changes button or all your efforts will go vain.  Color is crucial for attracting customers by influencing their emotions and perceptions. It plays a key role in user engagement and app aesthetics, impacting retention and satisfaction. Hope BuddyBoss App Color feature can assist you in all aspects.  Related Material How to configure colors in BuddyBoss App Following are some helpful resources from the web that can help you in choosing fonts for your brand if you don’t already have them: https://venngage.com/blog/brand-fonts/ https://design.tutsplus.com/articles/how-to-choose-the-right-font-for-your-brand–cms-35096 https://digitalsynopsis.com/design/how-to-choose-right-font-branding-typography/

App Images & Icons

Why Use Images and Icons Feature in Your BuddyBoss App? Images and Icons is a smart feature for advanced branding of your BuddyBoss App. Here, you can custom images, add desired logos and set app icons. Let's learn how to navigate it easily from your WordPress Dashboard.  Configure Images and Icons Navigate to BuddyBoss App - Branding - Images. Here, you will see the Images and Icons option. The first section is Home Screen, upload your desired logo by clicking Upload Image. You can resize the logo as you want then hit the Finish button. Check out at the right side in the preview of how the logo will display in a mobile display. You are seeing the vision of iOS mobile, there is Android preview as well.  Then check the Login Screens. Upload Login Logo and Login Background.  To set the Logo and Background images press the Finish button. Voila! Here is the look your user will see when they are signing in.  On the top of the mobile view you will see the option bar. Till now we are watching the Login page preview. You can select the Forgot Password page preview as well.  Next move to the Register Screens. Upload an image for Register Background. To make the look of your app unified we are using the same background image. You can use whatever image you like. Unified look provides a branding atmosphere to the users. We will now see the Launch Screen. Firstly, upload the Launch Screen Background. Secondly, tick the Show Spinner option and select a color for it. Lastly hit the Finish button. Now let’s see how the Launch screen will look like. The spinner will ultimately spin like this.  The Image and Icons section is bigger than you can think. Yes we believe in micro work to give a brand look in every screen of your App. Upload Icons for both iOS and Android.  Resize the icon and press the Finish button. Now at the bottom of the mobile preview see the iPhone view of your App icon.  Then the Android App view.  We have dedicated Android Adaptive icon option where you can upload the Background Icon and Foreground Icon. After clicking the Finish button you can see the preview at the right side. Also, you can set up the Android Notification Icon. At the right side see how the notification will appear in an Android mobile.  After setting all the Logo, Icons, Background images don’t forget to press the Save Changes button otherwise you will lose all your setting option. Images and Icons option is dedicatedly created for making your branding look in a very customized and easy way. We hope it will assist you in the long run. If you feel that there is something more we can add for your convenience please let us know.  Check out the recommended image and icon size you should use while uploading them- Home Screen Logo- 1200 x 180 pixels Login Logo- 1200 x 774 pixels Login Background- 2732 x 2732 pixels Register Background- 2732 x 2732 pixels Launch Screen Background- 2732 x 2732 pixels iOS App Icon and Android App Icon- 1024 x 1024 pixels Background Icon and Foreground Icon- 1024 x 1024 pixels Android Notification Icon- 256 x 256 pixels Your image must be in PNG or PSD format. App Rebranding Graphic Assets Guidelines With the BuddyBoss App you also have the ability to customize your mobile app’s icon, splash or launch screen, and your login screen right from your WordPress admin. Please use the following guidelines when creating your mobile app’s graphic assets. This will ensure they fit perfectly with the mobile app and will help ensure they meet the app store guidelines. Standard Android and iOS App Icon App icons display on your device’s home screen, and for iOS will be used in the App Store. For Android, you will upload a separate icon for the Google Play Store while publishing. In modern versions of Android, this app icon will display with a white margin around it, which may not look nice depending on your icon style. Make sure to also add an Android Adaptive Icon to be used in modern versions of Android. For best practices when designing your app icons, see these guidelines. For best results, upload both images sized at 1024 x 1024 pixels. iOS icon should be opaque and Android icon can include transparency. Click here to download the standard app icon safe zone overlay. App Icon Safe Zone Specifications File Format PNG (32-bit) File Format 1,024px x 1,024px Safe Zone 682px x 682px Color sRGB Adaptive App Icon for Android Android versions from 2017 and newer require adaptive icons for the best experience. These icons can display in a variety of shapes (customizable by the user on their device) and allow for animated parallax effects in some devices. The icons require an opaque background layer, with a partially transparent foreground layer. Your logo should be in the foreground later. For more information, see these Android guidelines. For best results, upload both images sized at 1024 x 1024 pixels. The inner 683 px will be visible, with a 170 px outer margin reserved for parallax effects (depending on icon shape). Background icon should be opaque, and foreground icon should include transparency. Click here to download the adaptive app icon safe zone overlay. Background Foreground Specifications File Format PNG (32-bit) File Format 1,024px x 1,024px Safe Zone 683px x 683px Color sRGB Launch/Splash Screen The launch screen appears instantly when your app starts up and is quickly replaced with the app’s login screen. It is a temporary graphic while your app initializes. For more information, see these Apple guidelines. For best results, upload image sized at 2732 x 2732 pixels. Click here to download the launch screen safe zone overlay. Full Splash Screen Safe Zone Specifications File Format PNG (32-bit) File Format 2,732px x 2,732px Safe Zone 1,200px x 2,732px Color sRGB Login Screen The login screen can optionally include a logo and background image. If no background image is added, it will display the Login and Signup Screen background color. For best results, upload a logo with max dimensions of 200 x 150 pixels, and a background image sized at 2732 x 2732 pixels. Click here to download the login screen safe zone overlay. Login Background Login Logo Specifications File Format PNG (32-bit) File Format 2,732px x 2,732px Safe Zone Min. 200px x 150px Color sRGB   Related Material How to add branding Images and Icons in BuddyBoss App Apple App Store Product Page Guidelines: Watch this video about the Product Page: https://developer.apple.com/videos/play/insights/110/ Product Page Guidelines and Information: https://developer.apple.com/app-store/product-page/ Google Play Store Listing Guidelines Following is what will be covered: Guidelines for Google Play Graphic Assets: https://support.google.com/googleplay/android-developer/answer/9866151?hl=en Watch this video about the Store Listing: https://youtu.be/DgZWhWBfsXc Store Listing Policies: https://support.google.com/googleplay/android-developer/topic/9877064

App Typography

Why Use Typography in Your BuddyBoss App? Typography allows you to add custom fonts to match unique branding styles. It covers the process of importing fonts from Google, assigning them to various BuddyBoss App sections, and adjusting font scales for optimal readability. Let’s see how you can customize it.  Configure Typography Navigate to BuddyBoss App - Branding - Typography. Here you will see the Import Fonts section. Click on Upload Fonts button. A popup will appear where you can upload your own fonts. In this tutorial, we will discover the Google Fonts.  If you click on Import Google Fonts you will see this popup. Where you can select any font. For example, we select Acme, check out the demo of the font right below. And there are warnings like what this font can’t display in your BuddyBoss App. So Acme can not support multiple styles in the App so it’s better to select another one if you need all the styles.  Now we select Roboto and see how many styles are supported with this font. And you can see the samples also. Let’s click the Import button. Please note that you can upload as many Fonts as you want. To give an unified look we are selecting one type of Font style. Look at the top of the page, see the successful message of importing the font we selected. Under Import Fonts, check the Roboto is available and you can change the Font Size. Have a look in the Select Fonts section. For Body Text, select a font, as we have Roboto here choose that.  Same goes for Navigation Bar Titles.  In the Headings section select your Font. Like we mentioned before if you have uploaded more Fonts you can use that in different area of your BuddyBoss App.  We do the same thing for Tap Bar as well. Check at the right-down side to see how your Tab Bar will look.  Isn’t it amazing to see the preview just on the right side. Now, select the Font Family for Menus and don’t forget to click the Save Changes button or you will lose all your settings. Typography acts as the initial voice of a brand, setting its tone and identity through visual style. Moreover, it influences the audience's perception even before they engage with the content directly. So, choose your Font Style, Font Size and set it the right way to attract your app users.  Related Material How to add Custom Fonts in BuddyBoss App https://venngage.com/blog/brand-fonts/ https://design.tutsplus.com/articles/how-to-choose-the-right-font-for-your-brand–cms-35096 https://digitalsynopsis.com/design/how-to-choose-right-font-branding-typography/

Reactions

Introducing our Reactions feature. Users can now express their reactions to activity posts and comments through options such as Like, Heart, Laugh, Angry and more.  There is a huge emotion library for you to set up reactions according to your community site. Additionally, you have the flexibility to upload custom icons tailored to the specific needs of your community.  This feature is available for both the  BuddyBoss Web and App. Configure Reactions Step 1: Enable Reactions Mode Navigate to BuddyBoss > Settings > Reactions. You can choose whether to enable reactions for Activity Posts and/or Activity Comments. Then choose the Likes option under Reactions Mode and hit the Save Settings button.  With Likes enabled, your users have a single interaction with the activity post or comment, and that is clicking the Like button.  Next is Emotions. After choosing it the emotions will appear then hit the Save Settings again.  After choosing the Emotions option the Reactions button will appear. Here you can change the Icon and Text. Let’s click on the icon.  An Icons modal will appear on your screen with a wide selection of reactions. For this example we will select the Hand Pointer. Now, hit the Select Icon button below.  As you can see the reaction has changed, also here we have edited the text. This label is shown Heart. Don’t forget to hit the Save Settings button.  Let’s say you want to see how to select an emotion. Press the pencil icon of any emotion like below- An emotion modal will appear. On the right side, you can change the Label and Text Color of this emotion. You can check the Preview of this emotion as well. Lastly hit the Save Emotion button. Step 2: Add More Emotions  After selecting an emotion we will now discover how to add an emotion. Press on the plus icon.  Again that emotions modal will appear. We choose Cold Face and again just like before you can change the Label and Text Color of this emotion. Now, press the Save Emotions button. You can see the Cold Face emotion right here. Now suppose, you don't want to activate all the emotions you have, you want to deactivate some of them. Simply uncheck the emotions you want to deactivate. For instance, we uncheck the Angry and Cold Face. Don’t forget to hit the Save Settings button below to see the changes in the frontend. Check the frontend now. Yes, only 4 emotions are visible to the users. Moreover, check out the reaction button below as well. If you navigate to the emotion modal you can explore the wide emotion category we made for you. Here, you can select your emotions based on the category.  Like here we have selected the Food & Drink category emotions.  Step 3: Add Icons Apart from Emotions we have a vast collection of Icons. Just navigate the same way you add new emotions by clicking on the plus icon.  At the top left corner, select the Icons option. Choose any icon you like. Just like emotions you can edit the Label, Text Color, and Icon Color. Now hit the Save Emotion button. Now you can see your chosen icon in the emotions list.  Let’s watch out how this icon emotion will look on the frontend. Step 4: Upload Your Custom Icon Another option to use your reaction is Custom Icon. You can upload your customized icon and use it as a reaction. Click in the pencil icon of any emotion.  Select Custom, from the left upper corner. Now, you have to upload your own custom icon. Hit on the Upload Icon button. Here, you can resize according to your preference and press the Done button. Write down the Label and select Text Color. Lastly, hit the Save Emotion button. So, this is how your custom emotion can be set.  Let’s see how the custom icon reacts in the frontend. You can use your reactions to the comments as well. Like here we have reacted in the comments.  Step 5: Delete Reactions There might be a time when you want to delete any reactions. For example, you are getting lots of Angry reactions and it’s affecting your membership website’s authority badly. In this situation, you can delete that particular reaction. If you want to delete any reaction just click on the cross (X) button in the right corner of that reaction. And, you can add a maximum of 6 emotions. A warning popup will appear to confirm your deleting emotion. Hit the Confirm button and that emotion will be deleted.  Step 6: Use Migration Wizard When switching reactions mode, use our Migration Wizard to map existing reactions to the new options. This action will convert reactions previously submitted by members on your site to an Emotion of your choice. Reactions not selected can be converted at any point in the future using this migration wizard.  There are two processes in Migration Wizard. One is for Likes and the other one for Emotions. As we are now in Emotions mode let’s see that at first. If you carefully look at the bottom, there is a Migration Wizard hyperlinked. Click on it.  This popup will appear. Here, you can convert reactions previously submitted by members on your site to an Emotion of your. We have selected BB Emotion to Love and press the Continue button.  Then this popup appears, watch out for these warnings before hitting the Start conversion button.  If you don’t have any reactions to convert then you will get this message.  Now, if you select the Likes mode and then the Migration Wizard. Here, you can only turn Emotions into Likes. Then press the Continue button. Again this warning message will appear and hit the Start conversion button. Incorporating reactions into a community site can significantly enhance user engagement, facilitate diverse forms of communication, and provide valuable insights for community management. Hope you get full benefit out of this feature.