1. Fountain
  2. Using Fountain
  3. Design

Enhance the Applicant Portal with iFrame & Javascript

Avatar
Helen

The Applicant Portal can be customized within Fountain to include some powerful features critical for applicant retention and engagement. By customizing your brand and understanding these tools, you can create an Application Form that will attract more applicants! 

What's Covered

iFrame

An iFrame is a window inside a window. It can be added on to any stage using html, and it is commonly used to have applicants sign a terms and conditions and show applicants the company website.

To add an iFrame:

    1. Click Customize in the top right corner of the stage that you want to insert the iFrame in.
    2. Under Stage Body, click Use code editor.
      mceclip0.png
    3. Insert the following line of code.
      <iframe src="website.com"></iframe>

Note: Whitelisted Sites

The sites that can be put into an iframe are: youtube (via embed code in video link share), vimeo, slideshare, google drive, dropbox, and screencast.

Javascript

Additional Custom Scripts can be added to each stage for additional customization.

To add a Custom Script:

  1. On the stage that you want to insert the Custom Script in, click Customize on the top right of the stage.
  2. Under Custom Scripts, choose whether you want the Javascript to be executed when an applicant lands on the stage or after they complete the stage.
    mceclip1.png
  3. Insert the Custom Script.

Hide Stage from Applicant Portal

In Company Settings > Company > Applicants, there is an option that to Make all stages in an opening visible to the applicants in their applications. This means that the application will have a list of all the stages on the left-hand side, as well as a progress bar showing the applicant's percentage through the application. You can only hide a stage from the Applicant Portal if this is allowed.

Enhance_with_iFrame_3.png

Best Practice

We recommend that you enable Make all stages in an opening visible to the applicants in their applications to ensure that the applicants know how much time the application will take.

Hiding a stage from the Applicant Portal progress tracker means that that specific stage will not be shown on the left sidebar. To do so, go to the stage you want to hide. Under Advanced Settings, toggle off Show stage in applicant portal progress tracker.

 

mceclip3.png

Changes in AX2.0

Our redesigned applicant experience (AX 2.0) has a fully overhauled, modernized user interface that fundamentally functions differently than 1.0.

As a result, a handful of customers have experienced breakages due to customizations applied to their openings via custom scripts. Scripts that depend on page events or reference anything in the webpage outside of custom scripts will no longer work.

Note

Most uses of custom scripts do neither and likely are NOT broken.

Technical Detail 

The biggest structural change Fountain implemented for AX 2.0 was updating the UI code architecture from Server Side Rendered (SSR) to Single Page Application (SPA). This means that Fountain styles (CSS) and structural elements (HTML) in the page have completely changed.

Additionally, custom scripts are now executed at a different point in time by the browser in AX2.0 vs. 1.0.

Below is a list of code examples that may result in breakages when using AX 2.0. Click the tabs below to review the troubleshooting steps to resolve.

 

Using Fountain CSS classes/styles

If you are using Fountain's internal CSS, you may have a styling breakage related to your customization. This is because it is likely the CSS class referenced in the script is no longer available.

Follow these steps to fix the breakage:

  1. Inspect the correctly working HTML element in AX1.0 to see what classes were being used within it. 

  2. Find the equivalent HTML element in AX2.0.

  3. Determine a method for applying styles to the new element. Reach out to your CSM or support@fountain if you need assistance. 

Please note, Fountain's CSS classes are dynamically hashed and prone to change. Since class hashes are prone to change, referencing them should be avoided since they are an unreliable means to reference an element.

References to Fountain elements 
References to HTML elements on a page may break in AX2.0. The element may no longer have an ID or classname which is externally accessible and will need to be updated to use an alternative element selection method such as XPath or getElementsByTagName. 
Window load, document DOMContentLoaded/readystatechange

In AX2.0, document load events run before custom scripts are injected into the page. Custom script code that references these events will not function properly.

If a breakage occurs, reduce the scripts to include only the code inside the event callback. This will likely solve the breakage because the code will run immediately upon injection.

setTimeout or setInterval
Use of setTimeout or setInterval in a global scope (not called within another function) will indicate an attempt to defer code until slightly after page load in AX1.0. If you see this code issue, please reach out to your CSM or support@fountain.com for assistance. 
document.write

If encountered, Fountain advises you to prefer document.body.appencChild or a similar modern equivalent instead of document.write.

Using the <iframe> element

Most instances of iframes should still work in AX 2.0. If you have issues, please reach out to your CSM or support@fountain.com for assistance. 

References to Ruby gon

If you see something like gon.[...], the script is probably not functioning properly. References to gon must be removed. 

Articles in this section

Was this article helpful?
28 out of 41 found this helpful

Comments

0 comments

Please sign in to leave a comment.