Method 1 - Adding a Calendar Button
If you would like to make your calendar of public events discoverable by volunteers, you can use the HTML code below to place a Calendar Button on your website.
There are two types of code (Fancy and Standard) from which to choose:
FANCY CODE - Use this code if you would like to adjust the design elements, e.g., color, font, border to align with your website aesthetics/graphic identity.
<html>
<head>
<style>
.event-button {
background-color: #5c8de8 !important;
border-color: #ffffff !important;
border-radius: 16px;
border:2px solid;
color: #ffffff!important;
display:inline-block;
font-size: 20px !important;
font-weight: 700!important;
padding: .5em 1.2em !important;
}
.event-button:hover{
border-color: #5c8de8 !important;
background-color: #ffffff !important;
color: #5c8de8!important;
}
</style>
</head>
<body>
<a href="https://events.civicchamps.com/organizations/(inset organization code)/opportunities" class="event-button">Sign Up</a>
</body>
</html>
STANDARD CODE - Use this code for a simple, basic button to link to your calendar.
<a href="https://events.civicchamps.com/organizations/(inset organization code)/opportunities" style="background-color: #5c8de8 !important; border-color: #ffffff !important; border-radius: 16px; border:2px solid; color: #ffffff!important; display:inline-block; font-size: 20px !important; font-weight: 700!important; padding: .5em 1.2em !important;">Sign Up</a>
Obtaining your Organization Code
In order for the links to direct your volunteers to the correct organization's calendar, you will need to input your organization's code where indicated in the HTML code.
Note: You will need to have an event on the calendar in order to obtain the code, the event can be live OR in draft mode.
To start, you will need to be in the Events tab in your Civic Champs Admin portal.
From here, you can select an event on the calendar and click on the Events Summary Page.
Your organization code is going to be located in the Webpage URL box. It is the last combination of numbers in the link after the forward slash.
Once you've found your organization code, you are going to need to copy and paste the code and input it where indicated in the Calendar Button HTML code.
Method 2 - Adding a Calendar iFrame
Use this code to add an iFrame to your website.
<iframe
src="[your calendar url]"
title="[your organization's name]"
width="1000"
height="900">
</iframe>
src - the link to your event calendar
title - your org name
width - how wide you want the iframe to be on the screen
height - how tall you want the iframe to be on the screen
Method 3 - Adding your Application Link
Navigate to the Groups tab in the admin dashboard to find your organization's specific application link. Use the VOLUNTEERS group link to add volunteers to your comprehensive volunteers list. Use specific group application links to add volunteers to your custom created groups. Learn more about Group Application Links here.
