Integrating Luceo with your Website Using iframes. Version 4.1 Jan 15, 2013

Transcription

1 Integrating Luceo with your Website Using iframes Version 4.1 Jan 15, 2013

2 Table of Contents Table of Contents... 2 Preface... 3 Confidential Information... 3 Intellectual Property... 3 Quick Start Guide... 4 Introduction... 5 Process Overview... 5 iframe Overview... 6 Steps Involved... 6 Examples... 7 Example 1: Show list of Job Postings on company website... 7 Example 2: User selects job opening from the list & takes action... 8 Example 3: Send applicants to specific Job Posting on your website (i.e., if you are posting jobs to external sources)... 8 Encoding Parameters Fine Tuning iframe Code Language / CMS Code Examples What Luceo Needs from your Web Developer... 14

3 Preface Confidential Information This document is considered confidential information of Luceo Solutions, LLC. "Confidential Information means all trade secrets or confidential or proprietary information of either party relating to such party's business and technology, including without limitation, its products, customer lists, development and marketing plans, and financial information. ALL CONFIDENTIAL INFORMATION IS PROVIDED "AS IS WITHOUT ANY REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. IN NO EVENT SHALL THE DISCLOSING PARTY BE LIABLE FOR THE ACCURACY OR COMPLETENESS OF ANY CONFIDENTIAL INFORMATION. Intellectual Property This document is considered the Intellectual Property of Luceo Solutions, LLC. The Content and the Services and all right, title and interest in and to the Content and the Services are the sole property of Luceo or its licensors, and are protected by United States and foreign copyright, trademark and other laws. "Luceo," the Luceo design logo and certain other names or logos are service marks or trademarks of Luceo, and all related product and service names, design marks and slogans are the service marks or trademarks of Luceo. You must retain all copyright, trademark, service mark and other proprietary notices contained on the Content on any authorized copy you make of the Content Luceo Solutions, LLC INTEGRATING LUCEO WITH YOUR WEBSITE USING IFRAMES 3

4 Quick Start Guide If you are an IT Professional or someone in charge of a company website and are already familiar with using iframes, use this page as a quick reference to embed iframe code on your website. If you are not familiar with using iframes, please read this document beginning with the Introduction on page 5. (Note: All examples on this page, replace yourcompany with your company identifier provided by Luceo at the time of configuration). If you want to show a list of job openings or a search page, then use this iframe code: <iframe src= ></iframe> If you want to show a specific job opening, then use this iframe code: <iframe src= ></iframe> (Note: Replace x with the Job ID Number from the Luceo system.) If you want to show a generic job application, then use this iframe code: <iframe src= ></iframe> If you want to show a specific job opening (passed from external source), then use this iframe code: <iframe src= echo $_REQUEST[ id ];?>&idpartenaire=<?php echo $_REQUEST[ partner_id ];?>></iframe> (Note: This code uses passed parameters from external sources. The syntax used to read each parameter is language specific. This example is for PHP. Other language examples are located in the Language / CMS Code Examples section of this document or can be found on our demo website located at INTEGRATING LUCEO WITH YOUR WEBSITE USING IFRAMES 4

5 Introduction This document will explain how to integrate Luceo with a corporate website using iframes. It also provides examples of integration on websites using PHP, ASP.NET, JavaScript, Cold Fusion, and Wordpress. Definition: An iframe, or Inline Frame, is a website within a website. It is commonly used to display content from another source. Purpose: An iframe makes it possible for Luceo clients to easily integrate the Luceo system into a company website. Impact: With minimal effort, webmasters are able to integrate Luceo on the company website. This integration allows applicants to search and apply for open positions on the company website with their information directly entered into the Luceo system at the completion of the application process. Process Overview Once a Job Posting is made active using Luceo software, company Job Postings can then be displayed on your company website. In the Luceo system, there are a number of features that can be implemented that will allow your prospective candidates to interact with your company. The features selected are determined by you and your HR team during the Luceo implementation process. You can: Show a list of job openings Allow users to search for job openings Show individual job openings Allow users to apply for a job opening Allow users to submit a general application to apply to your company versus a specific job opening Show featured openings on the home or any internal web page Allow users to register (subscribe) to receive alerts of new job openings Allow users to register (create login and password) before submitting their application To add any of these features to your company website, you can use iframes which will allow you to deliver each of these features to your target audience. INTEGRATING LUCEO WITH YOUR WEBSITE USING IFRAMES 5

6 iframe Overview An iframe (or Inline Frame), is a way to deliver content from another website, through a window you create in your website. This makes it possible for your webmaster to use some basic HTML code to quickly and easily integrate job posting content and related forms into your company website without having to do any programming. Steps Involved Adding iframes to your website is a simple 3 step process: 1. Identify or create page on the company website where you want to deliver iframe 2. Add iframe code to the page 3. Test the page using a web browser INTEGRATING LUCEO WITH YOUR WEBSITE USING IFRAMES 6

7 Examples In order to better understand the iframe integration, we will provide a few examples. Actual working samples can be seen on our demo website Example 1: Show list of Job Postings on company website As mentioned before, an iframe is a way to deliver content from another website, through a window you create in your website. In this example, the content from the other website (your Luceo solution) would be provided to you in a link such as: If you were to view this link in a browser you would see the job-posting list in a white label format that is, the information you see won t have any branded information. This is simply the content that will show through the window you create in your website. In order to create the window to show this content on your website, the iframe code below will need to be put into the HTML source code of your webpage in the position on the page where you would like that content to appear. <iframe src= ></iframe> As candidates visit your website and review the listing page, they will take some action (i.e., select a job that is of interest to them, apply for an opening, etc.) Each time this is done, the iframe is reloaded with new content (from Luceo) without reloading the page on your website. Any actions performed within the iframe, are done on the remote website (your Luceo solution) showing through the window in your company site. In this example, a site visitor can view openings, select the opening, and apply for the opening, all without leaving or refreshing the page on your website. INTEGRATING LUCEO WITH YOUR WEBSITE USING IFRAMES 7

8 Example 2: User selects job opening from the list & takes action Having embedded the iframe on your webpage as described in the step above, the user can then select a job opening from the list. In Luceo, each job opening has an associated ID number. When clicking on a job opening, the Luceo website showing through the iframe will display a page showing the details of the position at the following address: and it will pass the associated job posting ID number (e.g. 5) like: On this job posting detail page, the user will be able to take a couple actions: a.) Apply for the opening - which calls a new page through the iframe window: b.) Send to a Friend which calls a new page through the iframe window: All of this works without your company webmaster having to do anything more than add a single iframe to a single website page. Example 3: Send applicants to specific Job Posting on your website (i.e., if you are posting jobs to external sources) If you will be posting to external sites such as CareerBuilder, you will need to set up your webpage to receive parameters so that Luceo (the site inside the iframe) knows what specific information to serve. The steps involved to set this up are: 1.) Identify or create two pages on your company site (one page for the job description and one page for the application). In this step, creating the new page(s) on company site, two webpages need to be defined. Depending on your site they might be set up like: and -ORhttp:// and INTEGRATING LUCEO WITH YOUR WEBSITE USING IFRAMES 8

9 2.) Create iframe and code it to receive parameters passed by external source. Once the pages are set up (as in Step 1 above) you will need to add a few lines of code to create the iframe on the page and to receive parameters passed by an external source. Luceo will provide the URLs to use in the iframe for displaying the job details and job application details similar to: However, In order to be able to use a single page for all job postings, you will need to set up the iframe code to receive parameters identifying the job posting id and the id of the sourcing partner passed by the external source both provided by Luceo. Using PHP as an example, this would look something like: <iframe src= echo $_REQUEST[ id ];?>&idpartenaire=<?php echo $_REQUEST[ partner_id ];?>></iframe> The code =<?php echo $_REQUEST[ id ];?> tells the page to display the parameter named id in this location. This parameter id is passed by the external source. Similarly, the code =<?php echo $_REQUEST[ partner_id ];?> tells the page to display the parameter named partner_id in this location. This parameter partner_id is passed by the external source. 3.) Look-up address to provide to external source and submit post. Once this code is in place on the page, the last step is to provide redirection URLs created in the Luceo system to your external sources. The Luceo system will build the URL, using the web page (provided in Step 1 above) plus the correct parameters for each posted position and posting source. Providing these specific URLS to your posting partners will allow an applicant applying to one of your positions from an external source (such as Careerbuilder or LinkedIn) to be directed to your website page positioned on the job they are interested in. On your website, the applicant can upload his resume and complete his application. You can locate the redirection URL to be provided to your posting partner by editing your job posting in the Luceo system. In the edit display, the URL can be found by hovering over the icon in the address column that looks like: The Luceo system will display the redirection URL to share with your source. You will see 2 parameters at the end of the URL called id and partner_id representing the unique identifier for the posted position and the unique identifier of the posting source. Example of the redirection URL string to be provided to your source: The first half of the redirection URL is your webpage name (as in Step 1 above). The latter half contains the parameters for the posted position id and the id of the posting partner. In this INTEGRATING LUCEO WITH YOUR WEBSITE USING IFRAMES 9

10 example the parameter id=5 is the unique posting number for a particular position and partner_id =125 is the unique identifier for a particular posting partner. When applicants are on the posting partners website and click through to your site using this link, they will land on this page, and the iframe will read the 2 parameters and serve up the corresponding job posting on your website. INTEGRATING LUCEO WITH YOUR WEBSITE USING IFRAMES 1 0

11 Encoding Parameters Some websites use encoded parameters. If this is required, Luceo can be set up to encode parameters on request. This is an example of a link using encoded parameters: Fine Tuning iframe Code When you add an iframe to the page, there are times you may want to change the default settings such as showing or not showing a frame border, changing the height and width, allow scrolling, etc. Here is a quick reference list of available parameters you can use for more control over the iframe display on your company site: Attribute Value Description frameborder 0 or 1 Specifies whether or not to display a border around an <iframe> height Pixels or % Specifies the height of an <iframe> width Pixels or % Specifies the width of an <iframe> marginheight Pixels Specifies the top and bottom margins of the content of an <iframe> marginwidth Pixels Specifies the left and right margins of the content of an <iframe> scrolling yes, no, or Specifies whether or not to display scrollbars in an <iframe> auto src URL Required to specify the address of the document to embed in the <iframe> Using a simple iframe as an example: <iframe src= ></iframe> Remove the default border: <iframe src= frameborder= 0 ></iframe> Remove border & set height/width: <iframe src= frameborder= 0 height= 800 width= 545 ></iframe> Remove border, set height/width, turn off scrolling: <iframe src= frameborder= 0 height= 800 width= 545 scrolling= no ></iframe> INTEGRATING LUCEO WITH YOUR WEBSITE USING IFRAMES 1 1

12 Language / CMS Code Examples There are many unique web delivery environments and each has its own method to pass and use dynamic variables (parameters). This section will provide a few examples in popular programming languages and content management platforms: PHP Example: Page URL: iframe Code embedded on <iframe src= echo $_REQUEST[ id ];?>&idpartenaire=<?php echo $_REQUEST[ partner_id ];?>></iframe> ASP.NET Examples: Using VB.NET... Page URL: iframe Code embedded on <iframe src= Request.QueryString("id")%>&idpartenaire=<%= Request.QueryString("partner_id") %> ></iframe> Using C#... Page URL: iframe Code embedded on <iframe src= Request.QueryString["id"]%>&idpartenaire=<%= Request.QueryString["partner_id"] %> ></iframe> INTEGRATING LUCEO WITH YOUR WEBSITE USING IFRAMES 1 2

13 Cold Fusion Example: Page URL: iframe Code embedded on <iframe src= #POST.id#</cfoutput>&idpartenaire=<cfoutput> #POST.partner_id#</cfoutput>></iframe> Javascript Example: Page URL: iframe Code embedded on <script language="javascript"> var querystringid = unescape(document.location.search.split('?id=').join('')) var querystringpartner = unescape(document.location.search.split('&idpartenarie=').join('')) document.write('<iframe src=" +querystringid+que rystringpartner+ "/> ) ; </iframe> </script> Wordpress (CMS) Example: WordPress is designed to reject any URL query parameters that it doesn t recognize so your URL parameter will be dropped before you get a chance to use it. Therefore, Wordpress requires a plugin to accept URL parameters. We recommend a free plugin called URL Params (for more information: Once this is installed, create a wordpress Page called job-description (with Permalinks turned on), and embed the iframe code below using Wordpress shortcode to add the parameters. Page URL: iframe Code embedded on <iframe src=" param=id]&idpartenaire=[urlparam param=idpartenaire]" frameborder="0" width="920" height="800"></iframe> INTEGRATING LUCEO WITH YOUR WEBSITE USING IFRAMES 1 3

14 What Luceo Needs from your Web Developer Luceo will build the iframe and create redirection URLS based on the sizes and URL names provided to us. However, in order to develop the iframe and prepare for integration on your website, we will need the following information from your web developer. 1. Size of the frame: Height: px Width: px 2. CSS Style Sheet (Attach or provide URL) 3. Test page where job openings iframe will be located. URL: Final page where job openings iframe will be located. URL: 4. Test page where job details iframe will be located. URL: Final page where job details iframe will be located. URL: 5. Test page where job apply iframe will be located. URL: Final page where job apply iframe will be located. URL: 6. Encode parameters? YES NO INTEGRATING LUCEO WITH YOUR WEBSITE USING IFRAMES 1 4