Build A Volunteer Onboarding Portal with Shortcodes

Overview

Not everyone can walk in off the street and jump into serving in kids ministry, right? Hopefully at your church, like ours, they need to pass a background check first... and not everyone can grab a mic and lead worship, right? Of course not! They need to audition. Would you drop a fresh volunteer into a tech role with no training? Definitely not ideal! But how can you quickly and personally make evident to potential volunteers what each role's requirements are, whether or not they've met them, and what their next steps may be?

To this end, we recently built a "Volunteer Onboarding Portal" using some simple custom Inline Lava Shortcodes. Before anyone can serve at our church, we use a structured program many use called Growth Track, which is a 4-week class that acts as a kick-starter for an attender to learn about who our church is, what we believe about salvation, what baptism is, how they are wired (as they take a spiritual gifts and DiSC assessment), and how to make a difference and get involved. As part of the final week, they are now at a point where they know how they are wired and can get involved in a serving team if they wish, which we collectively call our DreamTeam.

We wanted to have a way for attenders finishing up Growth Track to quickly visualize what each serving area requires, but also personalize it to see if THEY have met it, if their credentials are still valid (background checks require yearly renewals), and if not, what their next step is to get qualified for the area they are interested in. When a person finishes Growth Track, they are given a celebratory "You Did It!" postcard that has a QR code on it (and the URL) directing to this page:

Here we see serving areas and once logged in, a user can see what each area requires and their personal standing therein. If I click "Prayer Team" on the left, I see this:

If I click on "Pre-Marriage Mentors" you see similar requirements in Growth Track and the Confidentiality Agreement, but some new ones such as SYMBIS Training or a Group Leader Agreement.

So as shown, some areas have overlapping requirements. Finishing Growth Track is required for all areas. Multiple areas require Child Safety Training, or a Background Check… or a DreamTeam Interview… And truth be told, we have multiple pages like this (one for people finishing Growth Track, one for those looking to volunteer for student camps, one for kids camps, etc.) all with their own serving areas, but which reference the same requirements. So instead of copy/pasting the same Lava code into each section, what could we do? Shortcodes! If you don't know what Shortcodes are, you may want to read up on them here: The Long and Short on Shortcodes

Adding the Page

So here is how we built this page. First let's start with creating a page and setting up the layout.

1) Go to "Admin Tools - CMS Configuration" and choose "Pages"

2) For our purposes, we'll place this as a child page in the External Site under the Connect page.

3) We'll call it "Onboarding" and give it a description and use the "Left Sidebar" layout.

4) Click the Advanced tab and give it an easier name under "Page Routes" like "onboarding" so you can navigate to https://YOURSITE/onboarding to send people to the page. That's more user friendly than /page/2687 or whatever the default is for you.

5) Navigate to your page on the external site either by clicking the link on the URL section, or by navigating to the new /onboarding page route you created.

Adding our Blocks

6) Now we need to create our HTML containers in the page. Hover your cursor over the bottom menu area and click "Page Zones" and then starting at the top in the "Feature Zone" we are going to add an HTML section we'll call "Banner" and another called "Instructions".

7) Repeat this until you match the following:

  • Feature Zone = Banner
  • Feature Zone = Instructions
  • Sidebar1 Zone = Serving Areas
  • Main Zone = Requirements
  • SectionA Zone = Apply

Populating our Blocks

8) Now let's populate these areas. Hover over the bottom menu and choose "Block Configuration" and then we will start by clicking "Edit HTML" on our Banner.

9) Here we used a PNG image we created as our banner. Download it here Save it and upload it to your site (Admin Tools - CMS Configuration - File Manager).

10) You'll want to adjust our code based on where you store your image. If it is just in the base folder, this should work.

11) Next you'll "Edit HTML" on the "Instructions" block and copy/paste this which will check if a user is logged in or not and either prompt them to log in, or give them instructions on how to use the page:

12) Now we will pre-load 5 serving areas (for the sake of brevity). Feel free to adjust the names in the h4 tags to match your areas and add/remove as needed! Keep in mind how many you have as we'll need that info on another step. Notice each area has a class of "servearea#" where # is the count we'll need to match later. Edit the HTML for your "Serving Areas" block and paste:

13) You'll notice the font colors are wrong and such, but don't worry, we'll get to that. Now let's add the javascript code that makes these links useful and the style code that makes them show up. On the same block you just edited, go into the Block Properties and copy/paste the following into the Pre-HTML section:

You will have to refresh the page for changes to take effect.

14) Now we will populate the right "Requirements" block by copy/pasting the following into its HTML space, and then refreshing the page to see if it works:

15) Check your page. If all has gone well, your page should now look like this:

Cool... cool... but... What if we have way more than 5 areas? I got you.

Expanding your list:

  • As you build out your ministries, you'll see in the above code (in step 14) we have IDs on the DIV elements. These are important as they are unique to each area listed (each counts up by 1) and are referenced by the javascript to show/hide content here. If you add more, each needs to be both numerically incremented here and then listed in the STYLE section (in step 13) above (Serving Areas - Block Properties - Advanced - Pre-HTML) that shows #servereqs1, #servereqs2, #servereqs3, #servereqs4, #servereqs5 {display: none;} already. You can add to that line as needed... after the #servereqs5 add a comma and more items like... #servereqs5, #servereqs6, #servereqs7 {display: none;}
  • You'll also see each Serving Area in that HTML (in step 12) has a class such as "servearea1" for the Arts (Band / Music) area: a href="#" class="servearea1". These too are important and should be added and incremented numerically per area added. The numbers here are used by the javascript to link to the content on the right. So "servearea1" pulls up content from "servereqs1" and so on.


16) Lastly on our layout, we need to add our bottom bar. Though this is optional. We wanted to have a common "Apply Here" link people could use as a next step if they have met all the requirements. Edit the HTML on the bottom "Apply" block and copy/paste (keeping in mind you'll have to change your link location as needed to a page you design or wherever you want that button to go):

For us, the button currently goes to a page that holds links to forms to apply to the various serving areas. Building those is beyond the scope of this recipe, but you can change the onclick="location.href='~/page/917'" destination as needed for your site.

Building our Shortcodes

17) ONE LAST piece to work on now is the magic that makes this work so well. We need to build our Lava Shortcodes! Why shortcodes? Well, we COULD put duplicates of our code on this page for every "INSERT SHORTCODES HERE" section, but that would be messy, resource intensive, not easily expandable if we add areas, and totally unnecessary! Let's put it in a central location and pull what is needed for each area with a simple shortcode instead. For example, if down the road they decide being a Group Leader would require a background check, all we’d have to do is add a {[ ServeReqBackgroundCheck ]} line in that DIV. Let's go back to the back-end of Rock, and navigate to "Admin Tools - CMS Configuration" and pick "Lava Shortcodes" so we can build our own.

18) Here we see the built-in shortcodes that come with Rock, but we will add our own. I named all of my Serving Requirement Shortcodes starting with “ServeReq – ” so they’d all be in the same area and I’d quickly know what they were. Most of these do a simple Person Attribute check, maybe referencing a date, and have a basic IF statement to return either a “you meet this” or a “you don’t”… and some are more complex doing further checks on ages and such.

Let's build one to get started. Click the plus sign to add a Lava Shortcode. Here we will check if the person has an attribute or not. You can change this attribute to any Person Attribute you have. For our example, we are using one we made (Admin Tools - General Settings - Person Attributes) called "AUDDate" which stands for "Audition Date" for a band member. We will insert some Lava that assigns the attribute to a variable we create here called "artsaud" (this can be anything you want as long as it matches in all 3 spots here) and then we check if "artsaud" is not empty (!=''). If it is not empty, we return some HTML formatted icons and green text showing a checkmark and the date the audition was completed. If it IS empty, we return some red text and an X icon saying it was not complete and who to contact to take that next step.

Here is the Lava we are using in the above image:

So you could take this lava and modify the person attribute (AUDDate) to be any you'd like to check against, and change the text to be applicable to your area/church...

19) Let's look at a more complicated one that uses slightly more Lava to determine if a person is required to have a background check, when it was done, and how long it is valid for (we require yearly renewals). Here you'll see we assign two different variables the values of different person attributes. One checks if they have a "BackgroundCheckDate" person attribute and the other checks if they have a "PoliceOfficerCertificateStatus" person attribute. With those values loaded into our variables, we first check if the user is under 18 years old or if they h ave a "policecert" value of "Approved" and if either of those are true, they auto pass our requirements. If neither of those apply, we move on to check if the "backgroundcheck" is not blank, then do some Lava to see how long it is valid for, and return results based on if it is valid, expired, or not completed.

Here is the Lava we are using in the above image:

20) One final example I'll give is of a shortcode that checks and returns 4 different person attributes to see if a user has completed all 4 weeks of our Growth Track course. You can see we assign each to a variable as in the other examples, then we check if each is not blank and return either the completed text with the class date, or send them a link for how to get information on completing that class.

Here is the Lava we are using in the above image:

21) Armed with our shortcodes, we would finish this project by returning to our "Requirements" block HTML (step 14) and replace the "INSERT SHORTCODES HERE" placeholders with whichever shortcodes you want to call for that serving area. When using a shortcode, you wrap the "tag name" of your shortcode in {[ ]} brackets. For example, if we decide serving on the Band would require completing Growth Track, doing an Arts Interview, and completing an Arts Audition... might become:

... and so on. Now if down the road we decided serving in the Band would also require a Background Check (maybe it's a Kids area band), we would simply add {[ ServeReqBackgroundCheck ]} to the list. How cool is that?!?

Now maybe you are asking why we put placeholders in as "INSERT SHORTCODES HERE" and didn't just put in the shortcodes first. If you put in shortcodes that don't exist yet, the page will throw a Lava error and not load properly. So if you see that happen, check your spelling and such to make sure you didn't have a typo in your shortcode name.

Conclusion

Armed with this, you should now have a functional volunteer onboarding portal. The largest portion of work for you will be figuring out what pieces you require for each area and then crafting your lava shortcodes around those. If you want to test your code, I HIGHLY recommend the "Lava Tester" plugin by "Central Christian Church (AZ)" to write your shortcodes in and see the results for any given person. Keep in mind if doing this, you'll need to change the "CurrentPerson" text in my above examples to just "Person" in the lava tester or it will always return results about YOU as the logged in user vs the Person you are picking from the plugin. Just be sure to change your code back to "CurrentPerson" before saving it into the shortcode box.