Classic Extensions Embedding

Table of Contents

Classic Web Extensions Embedding #

NOTE: These instructions apply only to our legacy ‘web extensions’. If you are configuring the Job Board (2019 and beyond) please see these instructions instead.

The PCRecruiter “Web Extensions” are the public-facing links for candidates, applicants and managers. They are hosted on the PCRecruiter server and driven by the software. Access to the links, templates and settings for the web extensions requires top-level admin access to the PCRecruiter account.

The instructions on this page are a complete detailing of how PCRecruiter links are implemented on a client’s website, however, in most cases the website manager for the user’s organization will only need to handle Step 5 (adding the supplied code to the website), while all other steps will be handled by or with the direct assistance of a Main Sequence representative. Please note that these instructions are written based on the PCRecruiter hosted service – if you are running PCRecruiter on your own servers, your URLs will vary.

In short, PCRecruiter uses a combination of an iframe and custom javascript to embed the pre-designed content into the web page of your choice. All of the database-driven content is created and rendered by the PCRecruiter server and appears within the iframe on the site. The javascript sizes the frame dynamically and also handles redirecting any traffic hitting the iframe content directly back to the iframe parent page.

Click each step below for instructions:

Step 1) Locating Your Links #

  1. Log into, or have a database administrator log into, the PCRecruiter database.
  2. Navigate to the Job Board Links area.
    • In PCRecruiter 8 or earlier, navigate to SYSTEM > Console > Candidate and Employer Registration Links
    • In PCRecruiter 9+, click SYSTEM and look for “PCR Website Links”

    The URLs will be something like these:
    JOB SEARCH: https://www2.pcrecruiter.net/pcrbin/regmenu.aspx?uid=dbname.profile
    LOGIN/REGISTER: https://www2.pcrecruiter.net/pcrbin/regfirst.aspx?uid=dbname.profile
    EMPLOYER/MANAGER : https://www2.pcrecruiter.net/pcrbin/employer.aspx?uid=dbname.profile

Additional links can be generated for special purposes, such as linking directly to a particular search result or a listing of all positions, or linking directly to the apply link or job description for a particular position record. Ask your Main Sequence representative for details.

Once you have your link, it is recommended that you keep it open in a separate tab or window while doing any configurations so that you can verify the effect of your changes.

Step 2) Database Setup and Configuration #

Before the job board or other Web Extensions links can be added to your website, the PCRecruiter database must be populated with your active jobs and configured to show/hide your desired content. The process of adding jobs to the database and configuring which fields candidates must complete when applying will be covered as part of the PCRecruiter admin training and setup process. It is not recommended that any job board be added to the public website until the training and configuration have been completed.

Step 3) Matching the Colors, Fonts and Buttons with CSS #

The web extensions include a default stylesheet which is located on the PCRecruiter server. All font and images styles in the job board’s default css may be overidden. In most cases, a Main Sequence representative will have your fonts, colors and buttons configured for you during the training and configuration process. If you should wish to edit your own styling:

  1. Log into, or have a database administrator log into, the PCRecruiter database.
  2. Navigate to the Cascading Style Sheets area.
    • In PCRecruiter 8 or earlier, navigate to SYSTEM > Console > Customize Web Extensions > Cascading Style Sheets
    • In PCRecruiter 9+, click “SYSTEM” and search for “Cascading Style Sheets”
  3. Create your CSS to suit your needs.

Most elements in the web extensions carry IDs or classes which you can override. In most cases, the styles you’ll be overriding are:

.pcrtitlecolor — the backround cell of page/section titles
.pcrheadingcolor — the left side table heading cells
.pcrtablecolor — the general table cell style
.pcrtablecoloralt — an alternate cell style for search result list ‘stripes’
.pcrtitlefont — the fonts in page/section titles
.pcrheadingfont — the left side table heading font
.pcrtablefont — the font for basic table data
.pcrtextbox — inputs in forms
.pcrtextarea — textareas in forms
.pcrcheckbox — checkboxes in forms
.pcrselect — select dropdoowns in forms
.pcrscrollbox — scrolling checklists in forms
.pcrecheck — background image of ‘required’ icon on forms
.pcrcomment — text to the right of fields in some forms
.pcrbuttonw — the buttons **

** The original PCRecruiter Web Extensions used HTML tables to simulate buttons. Newer implementations (PCR v 8.4 and beyond) may use standard HTML ‹button› tags instead. In PCRecruiter 8 this switch will be found under SYSTEM > Console > Edit Database Names and Locations > Job Board Info. In PCRecruiter 9, use SYSTEM and search for “Job Board Info”. The ‘Buttons’ value can be set to use either the older table-based “Ebutton” or a standard “HTML Button”. We recommend using the HTML Button, as it avoids conflicts with CSS styling intended for tables. The buttons are designed to size dynamically based on the width/height of the text in them, with a minimum base-width of 90px. If you wish to alter the base width, add the following attribute to the BODY tag in your HTML wrapper and change the number accordingly: data-buttonwidth=”90″

VERTICAL LAYOUT:
By the default, our web extensions are laid out in a table with a left and right column. If the content area of your site is very narrow, you may want to create a vertical layout instead. You may do so by adding this block to your CSS:

.stacked {regmenu-stacked: true; reg5-stacked: true; reg1-stacked: true; apply-stacked: true; reg7-stacked: true; regmail-stacked: true; empl2-stacked: true; empl1-stacked: true; emplmenu-stacked: true; empl4-stacked: true; emplogo-stacked: true; emplact-stacked: true; empl5-stacked: true; empl6-stacked: true; }

In many implementations, simply stacking the job description page and apply page will suffice:

.stacked {reg5-stacked: true; apply-stacked: true;}

#reg5_table20 .pcrheadingcolor {padding: 10px 0 0 0; border-bottom: 1px solid #CCC; background-color:transparent}
DISABLE DEFAULT STYLES:
If you wish to create your own stylesheet from scratch, you may completely disable the default web extensions stylesheet. In PCRecruiter 8 this will be found under SYSTEM > Console > Edit Database Names and Locations > Job Board Info. In PCRecruiter 9, use SYSTEM and search for “Job Board Info”.

Step 4) Adding HTML Wrappers #

The HTML Wrapper is the HTML template that is ‘wrapped’ around the default PCRecruiter content. Without it, the PCRecruiter links have no branding or styling beyond the defaults.

  1. Log into, or have a database administrator log into, the PCRecruiter database.
  2. Navigate to the HTML wrapper area.
    • In PCRecruiter 8 or earlier, navigate to SYSTEM > Console > Customize Web Extensions > HTML Wrapper
    • In PCRecruiter 9+, click “SYSTEM” and search for “HTML Wrappers”
  3. The upper box holds the wrapper for the Candidate web extensions (job search, registration, apply, etc.), and the lower box holds the wrapper for the Employer web extensions (manager/client portal features). The system holds only one template for each. Copy the code provided below into both boxes and save the changes. For most configurations no alterations to this code are needed. 
    <!DOCTYPE HTML>
<html>
   <head>
      <title><!-- Place a title here if desired --></title>
      <!-- Place any custom scripts or styles here -->
   </head>
   <body>
      <div id="pcrbox">[[extensions]]</div>
      <script>window.pcrframeoptions = {offsetX: 0, offsetY: 0,css:''}</script>
      <script src="https://www2.pcrecruiter.net/pcrimg/inc/pcrframeguest.js"></script>
   </body>
</html>

Step 5) Putting Your Links Online #

  1. Create/select a page on your website to act as the container for the PCRecruiter content. We recommend keeping the URL short – for example, www.mysite.com/jobs.
  2. Copy/paste the following HTML code into the page where you want the PCRecruiter content to appear (the method for doing this will vary depending on the your website platform**: 
    <!-- START PCR -->
<script src="https://www2.pcrecruiter.net/pcrimg/inc/pcrframehost.js"></script>
<link rel="stylesheet" href="https://www2.pcrecruiter.net/pcrimg/inc/pcrframehost.css">
<iframe frameborder="0"
host="{your PCRecruiter Link Here}"
id="pcrframe" name="pcrframe"
src="https://www2.pcrecruiter.net/pcrimg/spacer.gif"
style="height:640px;width:100%;background-color:#fff;border:0;margin:0; padding:0"
onload="pcrframeurl();">
</iframe>
<!-- END PCR -->

    You will edit the host=”” to place your PCRecruiter Web Extensions URL between the quotes. For example, https://www2.pcrecruiter/pcrbin/regmenu.aspx?uid=mydatabase.mycompany. This is likely the URL you retrieved in step 1, but may be different if otherwise directed or supplied by your Main Sequence contact. Optional parameters:
    initialheight=”” (defaults to 640 pixels if omitted)
    background=”” (defaults to transparent if omitted)

  3. View your page. If you have implemented the code correctly, you should see the PCRecruiter content inside of your own page. The box should stretch vertically to accommodate the content as you navigate within the pages.

**WordPress Implementation #

If your website is built on WordPress, you can use our plugin to place the iframe and javascript into the site. This method is less prone to error than copy/pasting HTML manually into the WordPress editor.

  1. Log into WordPress with administrative permission and select “Add New” from the plugins menu.
  2. Search for and install the “PCRecruiter Extensions” plugin.
  3. Activate the plugin. You do not need to adjust any Settings for this implementation.
  4. Create or edit the a page on your website that will act as the container for the PCRecruiter content. We recommend keeping the URL short – for example, www.mysite.com/jobs.
  5. In the new page you’ve created, enter the following Shortcode: 
    [[PCRecruiter link=""]]

    You will edit the link=”” to place your PCRecruiter Web Extensions URL between the quotes. This is likely the URL you retrieved in step 1, but may be different if otherwise directed or supplied by your Main Sequence contact. You will only need the portion of the URL after /pcrbin/.

    For example, if your link is https://www2.pcrecruiter/pcrbin/regmenu.aspx?uid=mydatabase.mycompany, your shortcode would be [[PCRecruiter link=”regmenu.aspx?uid=mydatabase.mycompany”]]

Step 6) Configuring Your Landing Pages

At this point, your PCRecruiter links are styled and embedded in an iframe and will be available to anyone who visits the page on your website. However, if you were to visit a direct link to a specific page in the PCRecruiter content, such a job board or social network link to a particular job, you would see only the content of the frame and not the complete website. The “Landing Pages” in PCRecruiter allow the system to redirect the visitor back to the page on your website.

  1. Log into, or have a database administrator log into, the PCRecruiter database.
  2. Navigate to the Landing Pages area.
    • In PCRecruiter 8 or earlier, navigate to SYSTEM > Console > Customize Web Extensions > Landing Pages
    • In PCRecruiter 9+, click “SYSTEM” and search for “Landing Pages”
  3. In the “Secure Base URL” box, enter https://www2.pcrecruiter.net
  4. In the “Primary Landing Page” box, enter the URL of the page you created on your website in Step 5. For example, www.mysite.com/jobs.
  5. The remaining boxes are optional. These can be filled in if you wish to create additional pages on your website for specific PCRecruiter links rather than using the same shell page for all PCRecruiter links. For example, if you wish to have a different page on your site containing a direct link to the login/registration form, or a branding template to use when profile forms are emailed out of the system. Consult with your Main Sequence representative for details.

Common Questions: #

Do I need to use an iframe or can I create a complete wrapper to match my site?
In some cases, you may need to link to the PCRecruiter URLs directly in a full window rather than placing them in an iframe. This may be due to limitations of your website platform, or a desire to make it clear to the visitor that the job board is not part of your website. In these cases, you can use the HTML Wrapper (see Step 4) to hold a full template that matches the complete look of your website. The page URL will be a www.pcrecruiter.net address, but the page will look like the rest of the website to the visitor. The downside to this method is that you will need to maintain this wrapper independently of your website – if you change your website menus, layout, etc. you may need to retrofit the wrapper with the updates. In addition, while JavaScript and CSS may be used in the template, PHP, ASP, and other server-side code will not run. If you intend to use https:// links to PCRecruiter, you will also need an SSL certificate for your own website (or wherever you are hosting your images, stylesheets, scripts, etc.) Depending on your needs, these may be problematic limitations.
To create a full wrapper matching your site:

  1. Build the HTML template. A common way to do this is to go to the website in a browser and use “View Source” to get the HTML of the page. Then you’ll need to change all of the URLs for links, images, stylesheets, and scripts to absolute paths that point back to your website’s URL. Image files can be hosted directly within PCRecruiter if necessary (SYSTEM > Console > Server Image Store), but this may slow down performance of the pages.
  2. In the area of your HTML where the PCRecruiter content should appear, enter the following tag:[[extensions]]Make sure that this tag is not placed inside of any ‹form› tags. You may want to add an extra ‹div› to fix a particular width on the module.
  3. Follow Step 4 above to locate and paste in your HTML Wrapper.
  4. When you view your PCRecruiter links, they should look like the website. Verify that all images, menus and other items within the page point the proper addresses.
  5. To complete the process, edit your website and use a button, link, or menu item that points to the PCRecruiter link. Because the wrapper has all of your site navigation links in it, there is no need to launch the link in a new window or tab.

What about SSL / HTTPS?
Due to the sensitive nature of contact information and resume data, Main Sequence recommends using a secure connection for the Web Extensions if possible. PCRecruiter accounts hosted on the PCRecruiter.net service have SSL connections by default. If the PCRecruiter system is being run from a non-PCRecruiter.net location, SSL details would be available from the host of that location. If you follow the iframe/landing pages method as described above, your PCRecruiter content will be secure (although a ‘lock’ icon may not appear on the browser).

Can I build my own job board instead of using the pre-built Web Extensions?
Main Sequence offers a public API for PCRecruiter that contains the necessary calls for listing jobs and submitting candidate data, resumes, and attachments to the system. The API can be used to build your own job board, but cannot be used in conjunction with the pre-built Web Extensions. Complete info on our API can be found at https://www.pcrecruiter.net/solutions/api

Will PCRecruiter work with my hosting service / web platform?
The PCRecruiter Web Extensions are hosted on the PCRecruiter server, and therefore the hosting environment or platform of the website itself is largely irrelevant. The PCRecruiter iframe method described above should work with all major hosts (GoDaddy, HostGator, BlueHost, etc.) and template-based content management systems (WordPress, Joomla, Drupal, etc.). Some functions, such as the auto-sizing iframe and landing pages redirection code, will not work with DIY/drag-and-drop site builders such as Wix.com or GoDaddy Website Builder.

What about mobile compatibility?
The “Classic Web Extensions” are not mobile-friendly. Please implement the Job Board instead.