Groups: Design - Badges

Highlight characteristics of your small groups.

Jason Alexis avatar
Written by Jason Alexis
Updated over a week ago

Highlight characteristics of your small groups. Remember: the information comes from your ChMS.

HOW TO GET TO THIS SECTION

Step 1: After you log in, click on Groups (orange highlighted tab in image to the right).

Your Groups page will open.

Step 2: Choose the group view you wish to modify.

Step 3: If you are not already in the Design tab, click on Design (brown box in image to the left).

Step 4: Scroll down until you see Badges.


HOW TO WORK WITH THIS SECTION


Simple List View

We will work through one example.

Note the space below the description and above the CTA button (turquoise arrows in the image below).

You can display a variety of badges in this space. Here is an example:

Here's how...

Once you are in the groups widget you wish to work with, click on the Design tab and scroll down to the Badges section.

The options for your integration are below:

Pushpay/CCB

Step 1: When no badges are selected, the section looks like the image above.

Toggle on the badges you wish to display. The buttons will turn blue:

PCO

Step 1: When no badges are selected, the section looks like the image above.

Toggle on the badges you wish to display. The buttons will turn blue:

FOR BOTH CCB & PCO

Step 2: Choose your badge background. The default is light grey.

However, you can choose a custom color.

If you are not familar with our Custom Color Picker , please click here for more info.

Step 5: Choose the color of your badge text. The default is black.

However, you can choose a custom color.

If you are not familar with our Custom Color Picker , please click here for more info.


Cards (Grid) View

We will work through one example.

Note the space under the image and above the small group name (turquoise arrows in the image below).

You can display up to 2 badges in this space. Depending on the badge length, two badges will display side by side or one under the other.

Here's how...

Once you are in the groups widget you wish to work with, click on the Design tab and scroll down to the Badges section.

The options are below:

When no badges are selected, the section looks like the image to the left.

We will work with the primary badge. The secondary badge works exactly the same way.

Step 1: Toggle on a badge to display it. The toggle button will turn blue.

When you do, you will notice that more fields are displayed.

Pushpay/CCB options

PCO options

Step 2: Click on the downward arrow to display the dropdown menu. Click on the label of your choice.

EXAMPLE: If we choose 'Group type' we will see something like this...

PCO

Pushpay/CCB

Let's continue with styling.

Here is an example with another badge that says 'Announcement Only'.

Step 3: Choose your badge background. The default is light grey.

However, you can choose a custom color.

If you are not familar with our Custom Color Picker , please click here for more info.

Step 4: Choose the color of your badge text. The default is black.

However, you can choose a custom color.

If you are not familar with our Custom Color Picker , please click here for more info.

Did this answer your question?