What we did
We recently did a massive redesign of the Louisville Center for Nonprofit Excellence’s (CNPE) website. This included a clean, new design as well as streamlining the process for registering for one of CNPE’s great events or becoming a CNPE member. The only hurdle we foresaw was the massive amount of data CNPE has stored in Salesforce. Here’s how we tackled it.
If you haven’t heard of Salesforce, its basically a Customer Relationship Management system. It can also be heavily customized to store all different kinds of related data. CNPE uses it to store information about their member organizations, contacts within those organizations, events and event registrations.
For the rest of the site, WordPress was the best choice for CNPE’s needs since they wanted the ability to maintain and manage site content themselves – something that WordPress makes easy.
Given how much data CNPE has in Salesforce and how well it works within their process, it didn’t make sense to try to move all of that information into WordPress (or something else). However, due to a technology update from Salesforce, CNPE’s existing website was going to stop working on a specific date, so the challenge became how could we make WordPress and Salesforce play nicely together… and do it quickly.
Everyone from accounts to design to development pulled together to get the new site built ahead of the deadline. In addition to the new look-and-feel, we came up with a clean way for WordPress and Salesforce to work with each other (more about that in the next section).
How we did it
Pulling data from Salesforce
The first step was getting data out of Salesforce and into WordPress. Salesforce has REST API that lets you access whatever data you need. The website could’ve queried the API every time it needed data, but that would’ve been slow and wouldn’t have scaled well if lots of people were to use the website at once.
The ideal plan was to store a certain amount of data from Salesforce in the WordPress database while making sure to keep everything in sync, something that Salesforce makes easy with PushTopics!
A PushTopic is a Salesforce query that’s triggered when an update occurs. Clients can subscribe to this stream of updates to get changes in real time.
Here’s an example PushTopic for organization changes.
PushTopic pushTopic = new PushTopic();
pushTopic.Name = 'OrganizationUpdates';
pushTopic.Query = 'SELECT Id, Name FROM Account';
pushTopic.ApiVersion = 40.0;
pushTopic.NotifyForOperationCreate = true;
pushTopic.NotifyForOperationUpdate = true;
pushTopic.NotifyForOperationUndelete = true;
pushTopic.NotifyForOperationDelete = true;
pushTopic.NotifyForFields = 'Select';
Any time an organization is created, updated, deleted or undeleted, the Id and Name of that organization is pushed (using a CometD/Bayeux style push) to any clients who have subscribed to the topic.
This sounds simple enough, however, receiving those kinds of push notifications in PHP is almost impossible and WordPress is written in PHP. We solved that by writing a small NodeJS service that sits on a server listening for PushTopics from Salesforce. When a push notification comes in to the service, it passes the request along to a custom API endpoint in WordPress. This let us keep all of the contact and organization data in WordPress up to date.
We used the Modern Tribe Events Calendar WordPress plugin for the front end of the CNPE events calendar, so we made sure the NodeJS service also pushes event information in a format that the event calendar can load.
Writing back to Salesforce
Writing back to Salesforce happens on a small enough scale that we could use the REST API directly. There are plenty of Salesforce API wrappers, but our needs were pretty simple so we wrote a small Salesforce API wrapper using GuzzleHTTP.
WordPress has a built-in REST API for accessing posts, pages, users, etc, and, since WordPress 4.7, that API is easy to extend with your own custom API endpoints. We made heavy use of this feature for the CNPE website.
In addition to an API endpoint to get Salesforce updates, we built a set of endpoints for handling user event registration and payment. This let us implement the front end registration as a zippy, single-page ReactJS app inside WordPress!
A functionality-heavy website like this has a fair amount of backend code. In order to stay organized, we put most of our custom code into a WordPress plugin.
This plugin handled all of the code for:
- Custom API endpoints
- Salesforce integration
- Credit card payments (using Authorize.Net)
- Membership renewals
- Organization and user management
Other helpful technologies
We try to avoid “not invented here” syndrome as much as is reasonable. Often, a piece of functionality we need has already been solved in a robust way by someone else. Not having to write everything from scratch helps save time and saving time saves budget (which makes everyone happy!).
To that end, here are some great libraries we made use of for this site:
- nforce for Salesforce connectivity
- Supervisor to keep our nodejs service running
- node-slakr to send error messages to our Slack team