CCB.events is an app which allows you to easily create beautiful, embeddable calendar views by integrating your Church Community Builder™ account.   

There are 3 simple steps to get started. 

  1. Sign up and integrate your CCB account.
  2. Choose the calendar type you want. Customize the design.
  3. Embed the calendar on your website wherever you want it to be.

Here’s a step by step walkthrough on getting set up. 

The first step is to create a free account.

Go to the CCB.events home page and click on Get Started for Free

Complete the form with your name, email, and password.

Then click Start Free Trial to begin the process. 

Step two is to activate your CCB.events account.

Have a look at your Dashboard.

On the left-hand side is a column of actions.

Under Calendars, click Activate your account to start your free trial.

Then, go to your email. You should see a message from CCB.events. Make sure to check all your tabs including the Spam folder.

If you do not see a message, return to your Dashboard and click Resend activation link.

Click on the link in the email to activate your CCB.events account.

The green circle with the check mark shows you that you have successfully activated your account.

The third step is to sync your CCB account with CCB.events.

On the left-hand side under Configuration, click on CCB Sync. Here’s what you will see. 

Click on the Add CCB Account button which is at the top, right-hand side of the screen. The New synchronization screen will open.

You will need your API username, API password, and API server address. 

We have a separate video on how to create your API username and password if you have not already done so.

Here’s the short version: Log in to your CCB account and go to Settings. Click on API. Then click on Add a new API user. Complete the form in the User tab. Enable the following three items  in the Services tab:

Public_calendar_listing

Event_profiles (with an ‘s’)

and Event_profile (without an ‘s’)

 Then, click on Save.

Your API server address is your CCB account URL. Subdomain is the part before the 'dot ccb church' section.  

In this example, 'multisite' is the subdomain. So multisite is what needs to be filled in the field for the API server address. Your subdomain will be different, but it will be located in the same place.

Then, click Start Integration.

If everything has gone well, you will see a screen like this one.

Click on the bar under Action and choose Sync, so that your CCB.events account can pull in your events from your CCB account.

Step 4 is choosing the website(s) which will display your CCB.events calendar.

On your Dashboard, under Configuration on the left-hand side, click on Your websites.

You will see this screen.

Click on the Add Website button which is at the top, right-hand side of the screen.

Complete the pop up form with the website URL and click Submit.

Repeat this step for each unique website as needed.

If everything has gone well, you will see a screen like this one.

Now, you are ready to create your first calendar. 

You will be able to customize your calendar’s design, look, and feel.

On your Dashboard, click on Calendars which is in the left-hand side column.

Your new screen will show you two views. The list view and the monthly view. 

Depending on your plan, you will have access to one or both views.

Choose your view.

We suggest giving your calendar a meaningful name. A good idea is to give it the name of where you plan to embed it or which page you are embedding it on. 

Then click on Create.

 As you can see, you now have two more tabs in addition to Setup. They are Design and Install.

Click on Design.

If you choose the List view, you will see 4 sections. You will not see Full Calendar because it is not relevant.

If you choose the Monthly view, you will see 5 sections.

In each section, you can turn things off and on.

You can also choose things such as color, font, and number of events to display.

When choosing colors, you can sometimes opt for Inherit. This means that CCB.events will try to find the best possible option to match the colors of the website it is being displayed on.

We recommend starting with Behavior when designing your calendar.

When you are finished designing your calendar, click on Save.

Next step is to embed your calendar, so click on Install.

Turn on the Published button and click Submit.

You will see a screen like this with all the information you need to share or  embed your CCB.events calendar.

The first item is the shareable URL. This is great for text messages and emails. You can also use this to embed your calendar in a mobile app.

The embeddable code is what you need to put your calendar on a website. 

First, you copy the html code in #1 and install it into the head of your website. This is a one-time thing. If you cannot access the head of your website, you will include this html code in the next step.

Second, you copy the html code in #2.a  and put it on the page on which you want the calendar to appear.

If you need to, put the html code from #1 on the page BEFORE or AFTER the html code from #2.a.

If your calendar is not displaying properly, try using the html code from #2.b  instead.

As you can see from this example, the html code from #2.a  is before the html code from #1.

Did this answer your question?