This post is a submission for the CMS Innovators of the of the year for the HubSpot Impact Awards. You can read more about the competition here.
The Challenge:
Linium Recruiting came to New Breed looking to move its website onto the HubSpot CMS and fully integrate the site with its talent acquisition platform, JobDiva. JobDiva itself is an incredibly robust SaaS platform that offers not only talent acquisition but also CRM and financial management, so we knew going in that incorporating this platform into the CMS was going to be a serious challenge.
The purpose of the site was to allow job seekers to create a profile in the site, upload or create their resumes, search and apply for jobs, and sign up for new job-listing alerts. This wasn't exactly a default HubSpot COS functionality.
The Process:
New Breed worked with Linium Recruiting through our standard CMS website-redesign process with the addition of an implementation plan for how to incorporate the JobDiva interface into the site seamlessly.
To do so, we decided that the best course of action was going to be to iframe and reskin JobDiva to match the layout and design of the new Linium Recruiting website. With this solution in mind, we worked through the standard design process of devising the strategy for information architecture and creating design concepts to match. These concepts incorporated how JobDiva was going to overlay into the new site.
Once it came to writing the code to incorporate JobDiva into the site, the team was forced to push the bounds of the CMS, JavaScript, COS RSS modules, customizing and styling in the back end of JobDiva itself. There are a few key elements of the site that really represent the work the team had to do to make this integration happen.
The first is the main JobDiva listing page which shows all current job openings. As you can see in the images below—looking at the native JobDiva display and the Linium site—it's barely recognizable:
JobDiva default:
Linium Recruiting execution:
To make this happen, the team used an iframe that housed the entire JobDiva site as planned. JavaScript and CSS were used to rearrange the JobDiva interface. CSS and JavaScript were put into the header of the JobDiva platform helped the team rearrange the elements of the JobDiva platform to match our desired concepts.
One inherent problem with using iframes is that they almost always have a set height and a scroll bar within the page, making for a less-than-ideal user experience. So the pièce de résistance of this page, which addressed this concern, was that the team implemented two scripts: one inside JobDiva's back end and the other on the HubSpot CMS side.
These scripts pass information back and forth: The JobDiva iframe detects the full height of the page and tells the HubSpot side's code what that is, so that the frame adjusts and the viewer doesn't feel like he or she has left the Linium site.
The second main place that JobDiva needed to be integrated was into the homepage of the site:
To do this, the team used the HubSpot RSS feed module to show the latest job listings from JobDiva. However, the listing RSS format from JobDiva needed to be parsed and styled using the HubSpot RSS tool to isolate just the title, location and date.
Then the team styled them to match the table shown on the front end (here's an example of the unstyled/unparsed RSS listing).
Beyond this, the link to the particular job needed to be stored as a variable and put into the iframe on the subsequent page, so that all the careers can be seen on www.liniumrecruiting.com/jobs, where the JobDiva iframe lives.
Here is the normal iframe code to show the default jobs listing view:
<iframe src="http://www2.jobdiva.com/candidates/myjobs/searchjobsdone.jsp?a=d2jdnwvqczztcj6k2nwje8t8dlby0201a5tk14dmebwyddkyzy3g82kc9l824gba"></iframe>
The bold text is the URL that displays the default job-listing page. The "a=d2jdnwvqczztcj6k2..." part is a specific ID that is given to Linium so that it will display the correct portal.
Here's an example of how we were able to get the search from the homepage to work by appending that variable to the URL:
http://www2.jobdiva.com/candidates/myjobs/searchjobsdone.jsp?a=d2jdnwvqczztcj6k2nwje8t8dlby0201a5tk14dmebwyddkyzy3g82kc9l824gba&SearchString=" +thevalue
We saved the terms for which they searched as a variable called "thevalue" and replaced the default "src" with this new one that included the stored value. For example, if someone were to search "newbreed" on the homepage, the iframe would display this page.
In addition to this, the native JobDiva career-search functionality seen on the homepage had by default "AND," not "OR," logic if multiple search terms were entered. For example, if a user entered "Teaching Albany" he or she would see only listings with both of those keywords. Linium wanted this search to have "OR" logic, so the team wrote Javascript to say that if a user searched multiple words, it would query "teaching" OR "Albany" to provide more results.
All this, and we haven't talked about the resume-creation portion yet! This section allows you to upload, copy and paste or create a resume. Throughout all the different layouts of this section, JobDiva had used different <div> classes and IDs, so each template needed to be completely and uniquely styled to account for this. The resume outputs were built in HTML tables, a somewhat antiquated development method, and they created a lot of empty cells. To correct this, the team wrote code to find and hide empty rows and cells in the tables in addition to styling them appropriately to match the rest of the site.
Finally, on the JobDiva-integration piece of the project, a custom job-alert form was created so that users can input different options and have tailored job results emailed to them. To accomplish this, all the different form-input variables were recorded using local storage. They were also put into the source of a hidden iframe on the form redirect page and passed to JobDiva so that the job-notification emails would be sent correctly.
For the JobDiva portion alone, there were more than 200 lines of JavaScript and a CSS file of 1,828 lines of code. This is about half of what we would expect for a large website project alone, and this only accounted for the JobDiva iframe piece of the project.
Beyond the JobDiva and HubSpot CMS integration side of the project, the site also featured a few exciting CMS elements. These included the team page, where we used MixItUp—a common filtering plugin—and the HubSpot blog functionality to create a page that would filter by location.
The Solution:
At the end of the day, Linium Recruiting was delivered a HubSpot CMS site seamlessly integrated with JobDiva—a feat that, to JobDiva's knowledge, had never before been attempted, never mind implemented successfully.
