Integrating the Youniverse job widget to your company's website

Intro

The job widget is used to help generate a content-rich careers page with real-time content.

Without knowing the Content Management System (CMS) you use we are unable to provide specific instructions, but these instructions provide a technical guide that will allow your website administrator or third-party website designer to integrate the widget.

Integration steps

The first step is to create a new current vacancies page on the website. We recommend using a separate staging website or page, to allow the design to be tested and configured away from your main careers page.

Then, edit the new page’s contents in ‘HTML’ mode. For many CMS systems, the HTML button will be located at the top of the page.

Next, add the following HTML code to the new page, replacing the placeholder {YOUR_YOUNIVERSE_URL} with your company’s Youniverse URL.

<script id="sherpaWidget" 

        type="text/javascript" 

        src="{YOUR_YOUNIVERSE_URL}/scripts/SherpaWidgets/SherpaWidget.js" 

        data-url="{YOUR_YOUNIVERSE_URL}/" 

        data-css="{YOUR_YOUNIVERSE_URL}/css/JobAdDefault.css"

        > </script>

    <link id="JobAdDefaultCss" 

        type="text/css" 

        rel="stylesheet" 

        href="{YOUR_YOUNIVERSE_URL}/css/JobAdDefault.css" />



    <div style="float:left;width:180px">
        <div id="sherpaSearch"></div>
    </div>


    <div style="float:left;width:560px">
        <div id="sherpaMain"></div>  
    </div>


    <div style="clear:both"></div>


Once you’ve added the HTML to your new careers page, please contact your deployment specialist or email [email protected] with the new career page’s URL. That will allow YOUniverse to configure the widget to communicate with your website and complete the integration process.

Styling and design

The job widget does not come with any formatting preconfigured, in order to ensure its compatibility with as many different webpage styles as possible.

From this step, you can modify the HTML and CSS file to suit your preferred design. If you are intending on using your own CSS file, you will need to change the reference from ‘JobAdDefault.css’ to your own CSS filename.

Once operational, the page can operate in four different views. All views use the same URL, but are accessed with different query strings:

  • List view (default) – displays a paginated list of available jobs.
  • Detail view – displays detail descriptions for a specific job.
  • Apply view – displays application form for a specific job.
    • Uses an <IFRAME> to render the page.
    • Register view – displays the ‘register your interest’ page (if available for your company).
      • Uses an <IFRAME> to render the page.

The view is rendered into the <DIV> element with ID “sherpaMain”, while the Youniverse Widget is rendered into the <DIV> element with ID “sherpaSearch”. It is a separate element to the sherpaMain element so that you can place it wherever you like within your page.

Integration complete

And there you have it! The Youniverse job widget should be configured within your company’s website and will automatically update with each new job that is posted within the Youniverse platform.

If you are experiencing problems or need assistance, feel free to email [email protected]

  • 27
  • 15-Jan-2019
  • 276 Views