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

Section 1: Creating a free account

Go to the Displaychurch.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. 

Section 2: Activating your Displaychurch.events account

2a. 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 (brown box in image above).

2b. Then, go to your email. You should see a message from Displaychurch.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 Displaychurch.events account. The green circle with the check mark shows you that you have successfully activated your account (brown arrow in image below).

2c. Now you need to sync your CCB account with Displaychurch.events. On the left-hand side under Configuration, click on CCB Sync (brown box in image below).

Click on the Add CCB Account button which is at the top, right-hand side of the screen (gold arrow in image above). The New synchronization screen will open.

You will need your API username, API password, and API server address. We have a separate article 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. 

There are several services which you need to enable in order to have successful communication between your CCB account and Displaychurch.events. The services are: Find the list in this article (scroll down a bit in the article; it is towards the end).

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 (brown box in image above).

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

Click on the bar under Action (brown arrow in image above) and choose Sync, so that your Displaychurch.events account can pull in your events from your CCB account.

2d. Choose the website(s) which will display your Displaychurch.events calendar. On your Dashboard, under Configuration on the left-hand side, click on Your websites (brown box in image below).

Click on the Add Website button which is at the top, right-hand side of the screen (gold arrow in image above).

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. 

Section 3: Creating 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 (brown box below).

Then click on +Create new Calendar (brown box above).

Currently, 5 views

Depending on your plan, you will have access to up to 5 different calendar 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 Submit.

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

The Design tab

The number of sections depends on the view chosen.

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.

To help you, the Design tab has two icons: Spotlight and Help article link (see above image).

Spotlight: Click on spotlight to see where the particular design element is located.

Help article link: Click on the link to be redirected to a help desk article giving more information about the design item.

NOTE: We do our best to keep up with these articles as we add new views. At the moment, not every design item in every view has an article. So, if you need more help, please get in touch via the chatbot on our website: https://displaychurch.events/.

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

The Install tab

People need to see your calendar in order to use it. We will do this via the Install tab.

Click on Install (blue box below).

Toggle on the Published button by clicking it (blue arrow below). The button will turn blue.

Then, click on Submit (brown arrow above).

When your screen refreshes, you will see that you now have a sharable URL (brown box below). As the note on the screen says, this is the URL to use in an email or any Instant Messenger App - like on a mobile phone.

If you want to use this URL, you can copy it by clicking Copy (gold arrow below).

Embedding your calendar on your website

In addition to the Sharable URL, you will also see that both Quick setup and Advanced setup are now active.

Quick setup: a one and done copy/paste. If it works and looks good, you're ready to go.

Advanced setup

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

Step 1: 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.

Step 2: 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.

Section 4: Creating additional calendar views

Once a calendar is created, it is not possible to change its format. In other words, you cannot change a full calendar to events view, neither could you change a cards (list) to a cards (grid) view.

To enable other views, simply click on +Create new Calendar (brown box below), choose the view you want, and proceed as in section 3 above, Creating your First Calendar.

Did this answer your question?