Get Started with Website Integration

Learning Objectives

After completing this unit, you’ll be able to:

  • Perform 95% of the setup required to display jobs and shifts on your website (Don’t worry! Your developers can do the rest.).
  • Prepare pages to display volunteer jobs on your website.
  • Test the Volunteer Jobs List page and Signup form.

A Little Prep Talk

If you’ve been following along with all the Volunteers for Salesforce modules, you’ve done quite a bit of work so far. You’ve learned how to structure campaigns, jobs, and shifts. You’ve also learned how to get all those volunteers entered and hours reconciled. Now comes the most exciting part—learning how to let volunteers sign up for shifts directly on your website.

Website integration with V4S is notoriously challenging because you have so many moving parts to track. In fact, we know that lots of you have put off website integration because no one has been around to talk you through the process. Trust us when we say we understand how you feel. That’s why we’ve asked Dianna to show us how it’s done.

Note

Note

If you're using Salesforce Lightning Experience, your screen might look different than the screens in the video above.

Each platform has its own way of integrating Salesforce pages. We can’t go into the details of how to integrate V4S pages for each website platform—that would drive us (and you) crazy!

What we will do is walk you through all the steps you can do on the V4S and Salesforce side of things to prep you for integration with your website. That takes you 95% of the way there. After that, we provide instructions that you can hand off to your web developer so that they can carry the integration through to the finish line.

The 10,000-Foot View

The EarthCorps website is a crucial asset. The website advertises 600 volunteer events every year and provides a way for 10,000 volunteers to sign themselves up for shifts. Can you imagine taking 10,000 phone calls and entering contact and shift data for 10,000 volunteers? No thanks!

In April, during what EarthCorps calls “Earth Month,” their volunteer calendar can look as crowded as this.

Screenshot of Volunteers Shift Calendar.

That’s a lot of events.

In the sections that follow, we’ll see, step by step, how EarthCorps integrates V4S with their website, making it a snap to manage their enviously huge number of volunteers. But first, let’s take the 10,000-foot look at exactly what you need to do to pull website integration off successfully.

  • Create a Salesforce site. This website page pulls the job and shift information that you want to display and shows it to prospective volunteers just itching to sign up for your event. Remember the Display on Website option you saw in previous units? The option that we promised would come in handy later? Well, that time has finally arrived. That option tells the website that this is a shift to display.
  • Activate and test the site. In this step, you see all the campaigns and shifts you created displayed on the site. You also test signing up as a volunteer and see how the data flows into the right spots in Salesforce. Magic!
  • Customize your sign-up form. You can choose how much or how little information to collect from each volunteer. For example, first and last name and email only or additional information, such as phone number, title, and address.
  • Learn about other V4S pages. V4S includes other useful pages besides the Volunteer Jobs Listing page and Sign-up form. We’ll take a brief tour of those other pages in this module.
  • Learn what to hand off to your web developer. Give your web developer exactly what’s needed to finish the process and make your pages live—right on your own website.

Now, on to the work, which ultimately means less data entry for you and happier and more engaged volunteers for your organization.

Create a Salesforce Site

What is a site in Salesforce? Without getting into too much developer speak, a Salesforce site lets you create public web pages that display the Salesforce data you choose to make public—all without any code. A Salesforce site also lets you create pages that take information from a volunteer and put it in all the right places in Salesforce. A Salesforce site is a wonderful time saver.

Building a site is by far the largest chunk of work you need to do to get V4S ready for your organization’s website. Here are the steps to make this magic happen.

  • Step 1: Enable Sites.
  • Step 2: Create a site.
  • Step 3: Configure data access—Sharing Rules Site.
  • Step 4: Configure data access—Guest User Access.
  • Step 5: Configure data access—Visualforce pages.
  • Step 6: Configure data access—profile object permissions.
  • Step 7: Set the time zone.

Let’s get to it.

Step 1: Enable Sites

By default, all your Salesforce data is private and secure, which means that no one without a login to your org can see or create data in your database. In general, you want this level of security.

But we also want our volunteers to see event details on our website. And, most importantly, we want them to enter their contact information and sign up for shifts.

This is where Salesforce Sites comes in. With a Salesforce site, you can make data publicly available on a website, but only the data you choose to share. You can allow users on your public website to enter information and have that information flow directly and securely into Salesforce.

Follow along and do the steps as we see how EarthCorps has enabled a Salesforce site.

  1. From Setup, enter Sites in the Quick Find box, then select Sites under Sites and Domains.
  2. Enter a domain name for the site in the http:// field, and click Check Availability. The domain name is typically in the form of [Organization Name].force.com.
Note

Note

After you register the domain by clicking Register in the next step, you can’t change it. Ever. For now, that’s no big deal, because the V4S web pages are hosted on your organization’s own website, and volunteers will never see this domain name. But . . . it’s still a good idea to choose a reasonable name. Your future self will thank you.

3. Read the Sites Terms of Use, check the box to show you’ve read it, and click Register Salesforce Site Domain

Screenshot of Sites Terms of Use check box and Register My Salesforce Site Domain button.

Voila! You’ve now enabled Salesforce Sites functionality.

Step 2: Create a Site

Now we actually create a site, which contains the pages that display your jobs and shifts, and the Volunteer Sign-up page.

1. On the Sites page, click NewScreenshot of Sites page.

2. Enter the required information in the New Site dialog.

  • Site Label—It’s always a good idea to use a descriptive name. Who knows, you might be so enamored of Sites that you choose to make many more. For now, let’s call this site Volunteers.
  • Site Name—This field is automatically filled in with the same name as the Site Label. You can leave it as is.
  • Site Contact—Choose an appropriate system administrator. Dianna enters her own name.
  • Default Record Owner—Choose the user who should be the owner for all new records that guest users create. Dianna enters her own name.
  • Active—Select this option to start testing your site right away.
  • Active Site Home Page—For now, set the home page to use the default Under Construction Visualforce page. Click the Search icon Search icon, then choose the UnderConstruction Visualforce page.
  • Clickjack Protection Level—Set to Allow framing by any page (no protection). This option allows Sites pages to be iframed in your organization’s website. Don’t worry if this doesn’t make sense to you. We’ll talk more about it later. 

3. Click Save.

Congratulations! You’ve created a site. Now we need to make sure that volunteers can see all event information and sign up for shifts. You can do this by configuring data access.

Step 3: Configure Data Access - Sharing Rules

After you've created a Site, configure the data access settings so that volunteers can interact with your Site's contents. Sharing is the general term that describes how you control who sees what in Salesforce. Sharing settings control users' access to the Contact, Account, Campaign, Volunteer Jobs, and other V4S objects. Sharing Rules enable you to make exceptions to your org-wide sharing settings for a selected set of users. We'll create sharing rules to extend sharing access to the guest users who visit our Volunteers website. If you haven’t had a chance to dive into the nitty gritty of how Salesforce data access works, never fear. The links in the Resources section provide a fabulous overview of how it all works. The V4S Documentation (listed in the Resources section) also walks you through this step in detail. 

On your V4S website, volunteers can update their contact information and sign up to volunteer. But in order for them to be able to do those things, they need access to some important Salesforce records: Accounts, Contacts, and Campaigns. 

So, let’s create some sharing rules to give guest users access to your records.

Define Campaign Sharing Rules

For Jobs and their related Shift and Hours records to display on the Volunteers Site, the Campaign must be shared with the Site Guest User.

  1. Click Setup, then click Setup.
  2. Enter Sharing Setting in the Quick Find box, then click Sharing Settings.
  3. Scroll down to Campaign Sharing Rules related list.
  4. In the Campaign Sharing Rules related list, click New.
  5. In the Label field, enter Volunteers Site Guest User.
  6. Salesforce fills in the Rule Name field for you.
  7. In the Rule Type field, enter Guest user access, based on criteria.
  8. Select the records to share:
    • Field: Active
    • Operator: equals
    • Value: True
  9. In the Select the users to share with section, enter Volunteers Site Guest User (your site name might be different).
  10. In the Select the level of access for the users section, set Campaign Access to Read Only.
  11. Click Save.

Define Account Sharing Rules

For Site Guest Users to view and update their contact information or sign up to volunteer, they need access to their contact record. Since the organization-wide default for contacts is set to Controlled by Parent, we’ll need to set up account sharing rules. Remember: This is just an example. You’ll need to create a sharing rule that accommodates your specific language or field criteria.

  1. Click Setup, then click Setup.
  2. Enter Sharing Setting in the Quick Find box, then click Sharing Settings.
  3. Scroll down to Account Sharing Rules related list.
  4. In the Account Sharing Rules related list, click New.
  5. In the Label field, enter Volunteers Site Guest User.
  6. In the Rule Name field, leave the default Rule Name field value as is.
  7. In the Rule Type field, select Guest user access, based on criteria.
  8. Select the records to share. For example, if your account names in NPSP include the word Household, you would enter these values:
    1. Field: Account Name
    2. Operator: contains
    3. Value: Household
  9. In the Select the level of access for the users section, set Default Account and Contact Access to Read Only.
  10. Click Save.
Note

Note

You don’t need to define sharing rules for contacts since the Organization-Wide Default for the contact object is set to Controlled by Parent. But, if your org-wide defaults are set up differently, you may need to, as contacts are considered private, and cannot be shared, if they're not associated with an account.

Step 4: Configure Data Access - Guest User Access

To ensure that your guest users can update the records that are shared with them, you must give them access.

To navigate to the Grant Guest Users Update Access checkbox:

  1. From Setup, enter Custom Settings in the Quick Find box, then select Custom Settings.
  2. Click Manage next to Volunteer Settings.
  3. View Custom Settings:
    • If Custom Settings have not been set, click New.
    • If Custom Settings have been set, click Edit.
  4. Select Grant Guest Users Update Access, Signup Matches Existing Contacts, and Signup Creates Contacts If Not Match.
  5. Save your changes.

Step 5: Configure Data Access - Visualforce Pages

Now we need to make sure that our volunteers profile can access the V4S Visualforce pages. We also need to verify that the profile has the right permissions on all objects that V4S touches.

This all may seem like a lot of painstaking steps, but keep in mind that this is a one-time setup process. After you’ve configured the correct access, you don’t need to touch these configurations again. And all your hard work pays off when you see how easy it is for your volunteers to sign up and their data to flow right into Salesforce.

Let’s tackle the Visualforce pages first.

  1. If you wandered away from your site to check on your organization-wide defaults, you can get back there by entering Sites in the Quick Find box in Setup, then selecting Sites.
  2. Click the site label for your site.
  3. On the Site detail page, click Public Access Settings, and then navigate to the Visualforce Page Access section.If you’re using the Enhanced Profile User Interface, the link is in the Apps section. With the standard Profile User Interface, you’ll find Enabled Visualforce Page Access toward the bottom of the page. 
  4. Under Visualforce Page Access, click Edit, and add the following pages to the Enabled Visualforce Pages list.
  • GW_Volunteers.JobCalendar
  • GW_Volunteers.PersonalSiteContactInfo
  • GW_Volunteers.PersonalSiteContactLookup
  • GW_Volunteers.PersonalSiteJobCalendar
  • GW_Volunteers.PersonalSiteJobListing
  • GW_Volunteers.PersonalSiteReportHours
  • GW_Volunteers.PersonalSiteTemplate
  • GW_Volunteers.PersonalSiteTemplateEspanol
  • GW_Volunteers.VolunteersJobListing
  • GW_Volunteers.VolunteersJobListingFS
  • GW_Volunteers.VolunteersReportHours
  • GW_Volunteers.VolunteersSignup
  • GW_Volunteers.VolunteersSignupFS

Your screen looks like this.

Screenshot of Available and Enabled Visualforce Pages.

5. Click Save

Almost there . . .

Step 6: Configure Data Access - Profile Object and Field Permissions

Now let’s set the object and field permissions. This table shows all the objects that V4S touches and the permissions it needs to do its job.

Object Read Create
Accounts Checkmark Checkmark
Campaigns Checkmark
Contacts Checkmark Checkmark
Documents Checkmark
Household* Checkmark Checkmark
Job Recurrence Schedule Checkmark
Leads Checkmark Checkmark
Volunteer Hours Checkmark Checkmark
Volunteer Jobs Checkmark
Volunteer Recurrence Schedule Checkmark
Volunteer Shifts Checkmark

In the Field Permissions section, look for all volunteer-related fields (all have "volunteer" in the field name) and enable Read and Edit permissions.

For example, these are some of the Volunteer fields on the contact object.

Save your changes and repeat for each object listed above.

* Permission on the household object is needed only if you’re using household objects with the Nonprofit Success Pack. If you’re not sure, go ahead and set the permissions to Read and Create. It doesn’t hurt anything.

As you can see from the table, V4S requires Read and Create permissions for accounts. Let’s follow along with Dianna as she sets those permissions on accounts.

Note

Note

EarthCorps is using the Enhanced Profile User Interface. If you’re using the standard interface, your screens look different from Dianna’s, but the tasks are the same.

  1. Click Profile Overview to get back to the Volunteers Profile page. Screenshot of Profile Overview button.
  2. In the Apps area, click Object Settings.
  3. Click Accounts, and then click Edit.
  4. Under Object Permissions, enable Read and Create, and then click SaveScreenshot of Read and Create Object Permissions.

Now that you’ve seen how Dianna has set the account permissions, go ahead and set the object permissions for the rest of the objects in your org based on the table.

Step 7: Set the Default Time Zone

This step is one of those small things that can make a big difference for you and your volunteers. Remember when we talked about complications around time zones, especially for events in multiple locations? What we do here is set the default time zone for your sites account—the Sites Guest User Profile—so that all campaigns and jobs default to the time zone you set. You can always override the default time zone at the campaign or job level, as we learned in the previous unit.

EarthCorps is located in the lovely Pacific Northwest, so Dianna sets the default time zone to Pacific Daylight Time.

  1. On the Sites page, click the site label for your Volunteers site to get to the Sites Detail page. Screenshot of site label for your Volunteers site.
  2. On the Sites Detail page, click Public Access Settings.
  3. Click Assigned UsersScreenshot of Assigned Users button.
  4. Click Edit next to Site Guest User, Volunteers.
  5. Under Locale Settings, choose the correct time zone from the drop-down list. EarthCorps chooses (GMT-07:00) Pacific Daylight Time (America/Los Angeles). Screenshot of Locale Settings and Time Zone.
  6. Click Save.

Good work! Now all campaigns and jobs default to the time zone you set, which means you need to set it only at the campaign or job level if you have an event in a different time zone.

Activate and Test the Site

We’ve gone through many steps to enable and create a site, and we’ve made sure that it has access to the data it needs. Here’s where we finally get to see all our hard work in action.

We activated our site earlier, but it never hurts to double check. You can do that from the Sites page. If you see an Activate link next to your site, you need to click it. If you see a Deactivate link, you’re already activated and ready to go.

Now let’s test it out! We’ll start with viewing the Jobs Listing page, which shows all the shifts we entered in the previous module.

  1. From Setup, enter Sites in the Quick Find box, then select Sites.
  2. Click the Site URL for your site. EarthCorps clicks http://earthcorpsvfstrailhead.force.comScreenshot of Site URL.

You see something like this. Screenshot of standard Under Construction page.

Wait a minute, where are all our events? Don’t worry, what you’re seeing now is just the standard Under Construction page that we set as the default home page back when we first created our site. There’s one more step to see the actual Jobs Listing page.

3. In your browser’s address bar, add the following to the end of the site’s URL.

/GW_Volunteers__VolunteersJobListingFS

Note

Note

There are two underscore characters between Volunteers and VolunteersJobListingFS.

For EarthCorps, the URL looks like this.

http://earthcorpsvfstrailhead.force.com/GW_Volunteers__VolunteersJobListingFS

And, drum roll, please . . . We can now see the Volunteers Job List page in all its glory. Just look at all our events. Screenshot of Volunteers Job List page.

Note

Note

The default configuration for the Volunteer Jobs Listing page shows shifts that are scheduled for three months out, so you see shifts for the current month and the following two months. If you don’t have shifts that fall in this time frame configured in your Salesforce org, you don’t see any shifts on this page. To change the time frame configuration, see the Volunteers for Salesforce Installation Configuration Guide. You can find it on the Volunteers for Salesforce Documentation page listed in the Resources section.

And if you’d like to see a calendar view of the Volunteer jobs and shifts you created, simply enter the URL http://earthcorpsvfstrailhead.force.com/GW_Volunteers__JobCalendar.

Note

Note

There are other pages besides the Jobs Listings page you can test. See the Customize Your Website section in the V4S Installation and Configuration Guide (available on the Volunteers for Salesforce Documentation page listed in the Resources section) for more.

Take a moment to appreciate what you’ve done here. You’ve created a site that shows all the shifts you entered in Salesforce. And even more exciting, each shift has a sign-up link next to it. We’ll test that out in the next unit, Sign Up Volunteers Through Your Website.

Resources

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities