Skip to main content
All CollectionsEvent ALERTS
Event ALERTS: Banner
Event ALERTS: Banner

Place a banner at the top or bottom of a page or pages on your website to further highlight important events.

Jason Alexis avatar
Written by Jason Alexis
Updated over 5 months ago

Event ALERTS is an automated, 'set it and forget it' statement which gives information about an upcoming (or happening now) event. This innovative tool drives conversion and saves you time. You can customize when and where to display the event highlight based on different settings, and you won't have to manually update – the highlight will disappear once the event is over!


HOW TO GET TO THIS ITEM

Step 1: Log in to Display.Church

Step 2: Click on Event Alerts.

  • To create a new alert, click on the blue +Create new button.

  • To work with an existing alert, click on the 3-dots in the Action column and choose Edit from the pop-up menu.


HOW TO USE THIS ITEM

DESIGN:

INSTALL


SETUP

Change the name or integration of your alert here.

In this section, you choose the website on which to display your banner.

If there are no websites to choose from, this means that you have not yet given Display.Church access to any. Check out this helpdesk article for the 'how to': http://help.display.church/en/articles/5429485-managing-your-websites

You also choose the pages:

  • All pages

  • Home page

  • Specific page (you will be guided to give the URL)

In the next section, you will organize your main filtering. You use the connectors 'and' + 'or' to mix and match. This filtering logic is powerful (and a little complex). So we have given it its own article: https://help.display.church/en/articles/7890338-setup-events-filtering-logic

Breeze

CCB

GCal

PCO

Notice that at the bottom of the page there is a line which says: Events matching filter criteria (turquoise arrow in image to the left).

Click on this line to show a list of events which match the conditions you chose with your filters.

Click on the blue Update button to confirm your changes.


DESIGN: CONFIGURATION

Configuration

Location

  • Position: Where on the page the alert will display. Choices: top or bottom of the page.

  • Placement: Whether the banner will stick to the position (not move) or scroll with the page.

Behavior

  • Show after: When should the alert appear

  • Allow user to hide the banner: Whether the viewer can dismiss the alert or not.

  • Show banner again after: When the alert should display again.

Messaging

Type in your opening and closing messages.

See example below.

DESIGN: DESIGN

Some of the items begin with the word 'initial'. What does that mean?

COLORS

There are many styling options for your Event Alerts. One group is colors. You can match your church branding. Or perhaps you want to match the color scheme of an event.

Let's look at an example...

The two views below show the Display.Church default color settings.

Here is how the Event Alert looks at the start:


Then it changes to:

Before we begin, here is more info about the colors

Initial background color: The color of the banner background when it first appears.

Background color: The color of the banner background after a second or two.

Initial text color: The color of the text when it first appears.

Text color: The color of the text after a second or two.

Close button color: The color of the 'x' in the second view. [You cannot change the

color of the 'x' in the initial view.]

Close button color on hover: The color of the 'x' on hover.

DEFAULT SETTINGS (See how this looks in the images above this table)

CUSTOM COLORS (See the changes in the images below this table)

If you are not yet familiar with using our custom color picker, check out this helpdesk article: http://help.display.church/en/articles/4314468-using-the-custom-color-picker

Using custom colors...

Here is how the Event Alert looks at the start:

Then it changes to:

And hovering over the close button:

TYPOGRAPHY

Font Family

Choose the font for all your text and numbers EXCEPT the numbers in your countdown timer (if you choose to show one).

Default

This is the choice of the Display.Church application.

Inherit

In this option, the font is inherited from your website or other embeddable component.

Custom

Step 1: Click on Custom. It will show the default or inherited font. Click on the X (brown box below) to erase this choice.

Step 2: If you click on the capture line, you will see the message, "No options" (brown box below). There are many options, but you need to start typing to see them.

Step 3: Begin typing on the capture line (brown box below). As you can see (blue arrow below), a dropdown list of options is populating. If you know the name of the font you wish to use, type in the name. If not, scroll down the list, choose fonts and experiment with how they change the look of your calendar and/or events list.

SIZE


Choose the size of your text.

DESIGN: CALL TO ACTION

SETUP

  • Show Call to Action button: Toggle this on to show a button; toggle off not to show one.

  • Open links in a new tab How the links should behave

  • CTA action: What the button should link to. NOTE: If Display.Church does not have the correct information to correctly perform the CTA action you chose, the CTA button will not display.

  • Use default CTA button label: The text appearing on the button. Use the Display.Church default or type in your own text. If you toggle off this option, CTA button label appears. Type in your name in the space given. We have typed in 'Learn more'.

DESIGN

In this section, you will choose the colors of your CTA.

Default: The choice of Display.Church
Custom: Your own preference.

Not sure how to use our Custom Color Picker yet? Click here.

DESIGN: COUNTDOWN TIMER

2024.03.18: The countdown timer will automatically not display for all day events even if it is toggled on. In other words, Display. Church will override the toggle.

SETUP

Show countdown timer: Toggle this on to show a countdown timer; toggle off not to show one.

TYPOGRAPHY

Choose the font for your countdown timer numbers. Work in the same way as Typography in the Design: Design section (jump above to that section).

SIZE

Choose the size of your numbers.

Did this answer your question?