The Careers Page Editor & iFrame

Updated August 08, 2024 19:54

There are several ways that your posted jobs can be displayed on a website. This article will cover the most basic of them all – the Avionte iFrame.

CHAPTERS

Basic Understanding
The Careers Page Editor
The Technical Bits and Code Examples
Wix iFrame setup

Basic Understanding

The Avionte iFrame is used to display the jobs that you posted in Avionte inside of a window (the “frame” of the word iFrame) on your existing careers page. To accomplish this, you will want to provide the URL of your current careers page to your Account Manager.

Many websites use a CSS file to define the styling of the pages within the site. If your website uses a CSS file, you can give the location of it to your Account Manager and they will apply it to the Avionté IFrame so that the styling (fonts, colors, sizes, etc.) matches the rest of your website.

It just doesn’t get any easier than that!

The Careers Page Editor

Users who have access to the Careers Page Editor (Job Board Editor) can get there by clicking on your picture

Click Account & Settings
Click Utilities
Click on Careers Page Editor Tile

On the left-hand side, you’ll see each of the Career Pages you have with Avionte. On the right, you’ll see the various items that you can customize in the IFrame of the selected Career Page. Below are the descriptions for the fields that aren’t obvious.

Careers Page Social Name: This section allows you to edit your company name which will appear on your jobs for external Careers Page/Job Boards.
Careers Page Primary Location: This is where the URL of your careers page is entered by the Admin user (additional URLs can be added, the first URL is the default).
- Note: If you should ever change the location URL of your Careers Page, you will need to update this field to reflect the new URL. Your Account Manager or Customer Support team can help you with that if needed.
Careers Page Languages: Select from a pre-defined set of languages or custom-define the fields for any language, not on the list
Careers Page Requirements: This is where you can define which data points are required when applicants apply online.
Careers Page Layout: Classic will list all of your jobs together with the most recently posted jobs at the top. Grouped will allow you to segregate the jobs and define what the group separator looks like if used (location, category, OR title).
EEO: Enables and disables the EEO form option for your web applicants.
Style Location: If a CSS file is used, this is where the file location is entered. The Avionte IFrame requires that it’s a site-wide CSS declaration. For maximum browser compatibility, we highly recommend that the file location use HTTPS.
Allow General Applications: Allows candidates to apply (submit their resume, contact info, etc.) even if they don’t see a particular job that suits them.
Include search capabilities: Ability for job seekers to search by Job title, Location, Department, AND/OR Position Category.
Applicant Referral: This allows a web applicant to indicate whether they were referred to this job by someone and if so, by whom.
Include Social Share Widget: Displays a widget that allows viewers of the jobs on your careers page to share the job on various social networks.

Once your IFrame is set up, unless you change your Careers Page, you shouldn’t have a need to ever use the Careers Page Editor again.

The Technical Bits and Code Examples

The remainder of this article might get a bit technical for some. It includes information that a web developer should be able to use to help with getting the IFrame into your Careers Page. There are essentially three steps that need to take place to get the IFrame loaded and working:

1. Add in the IFrame wherever you want the content to go on your careers page:

<iframe id="compframe" name="compframe" height="1500" width="95%" 
frameborder="0" allowTransparency="true" style="overflow:auto" 
onload="window.parent.parent.scrollTo(0,0)" > </iframe>

To enable automatic IFrame resizing based on content height:

<script type="text/javascript">
if (window.addEventListener) {
    window.addEventListener('message', receiveMessage, false);
} else if (window.attachEvent) { //IE
    window.attachEvent('onmessage', receiveMessage);
}
function receiveMessage(evt) {
    //alert("iframe content: "+evt.data);
    var iframe = document.getElementById('compframe');
    iframe.style.height = evt.data + 'px';
}
</script>

2. In the header, add the pointer to the JScript file:

 <script type="text/javascript"   
src="http://COMPANYBUILDNAME.myavionte.com/staff/consol_careers/dyniframe2.js"></script>

3. Add an onload directly after the body tag:

<body onload="getreq()">

–OR–

<script type="text/javascript"> window.onload=function(){getreq()}; </script>

Wix iFrame setup

These are the steps to use the iFrame for your Wix website.

Note: This is not an integration or partnership. These are the steps to use an iFrame.

Login to Wix.com with your credentials
Click Code
Click Turn On Developer Tools
1. If this is already activated then it'll show Turn Off Developer Tools
2. The example below has it already turned on
Scroll to the bottom of the page
Click on the bottom bar

Add the following to Page code

import wixLocation from 'wix-location';

export function compasframe_message(event, $w) { handleCompasFrameMessageReady(event, $w); }

function handleCompasFrameMessageReady(event, $w) { if (!event.data || event.data.type !== 'compasframe_ready') return;

let query = wixLocation.query;

$w("#compasframe").postMessage({ type: 'compasframe_load', query: query }); }

Go to the Area/Page, where you want to add the iFrame
Click the '+' symbol
Click More
Click Embed a Site
Adjust the size of the Embed a Site as desired
Find your specific bid and jbid IDs
1. Login to your BOLD environment
2. Click Account & Settings
3. Click Utilities
4. Click on the Careers Page Editor Tile
5. Copy the bid and the jbid
  
  In example above:
  
  bid = AbcDE456fgHI (replace the XXXXX in the link below)
  jbid = jKlmN1516oP (replace the YYYYY in the link below)
Update the following link with you 'bid' and 'jbid' IDs:
https://hire.myavionte.com/sonar/v2/careers/integrations/wix/iframe?bId=XXXXX&jbId=YYYYY

Example using the 'bid' and 'jbid' above:
https://hire.myavionte.com/sonar/v2/careers/integrations/wix/iframe?bId=AbcDE456fgHIjbId=jKlmN1516oP
On the Embed a Site, click View Properties
Set the following fields:
1. ID = compasframe
2. onMessage event = compasframe_message
Be sure to Save and Publish your changes
1. The preview may not work while in the Wix design view
2. Visit your website and refresh the page to see the changes

Feel free to reach out to your dedicated Customer Success Manager for any further questions. They can provide you with all the necessary information your web developer will need to get this up and running.

3rd party link Disclaimer: These links are being provided as a convenience and for informational purposes only; they do not constitute an endorsement or an approval by [The author] of any of the products, services or opinions of the corporation or organization or individual. [The author] bears no responsibility for the accuracy, legality or content of the external site or for that of subsequent links. Contact the external site for answers to questions regarding its content.

The Careers Page Editor & iFrame

CHAPTERS

Basic Understanding

The Careers Page Editor

The Technical Bits and Code Examples

Wix iFrame setup

Articles in this section

Get in touch

Comments