Javascript Application Form API: Apply with LinkedIn

Follow


!LinkedIn javascript SDK is been deprecated. Thus this article is not valid anymore! 

Please refer "Javascript Application Form API: TextKernel Sourcebox Widgets" to for alternative solutions.

 

 

This documentation is designed to let you setup your own application form page with the Javascript API to be prefilled from LinkedIn. This document can also be used as an inspiration for using other social media or even document providers to prefill you form. For example: Xing, Facebook, Google+, Dropbox and Google Drive.

This documentation is designed for people familiar with Javascript programming and object-oriented programming concepts. There are many Javascript tutorials available on the web. You should also be familiar with the LinkedIn javascript SDK and the concept of starting a job application from social media.

More information about the Application form API can be found in the following articles: Application Form API and Application Form API Advanced features

This API is available in version 7+ of the resource manager.

Before you get started

In order to use the LinkedIn javascript SDK, you need to create an account. This is described in the chapter "Configure your LinkedIn application for JavaScript SDK use" of the https://developer.linkedin.com/docs/getting-started-js-sdk article. You will need the "client id" as api key later on.
Make sure you register the scopes:

r_basicprofile r_emailaddress

Functional concept

To ease the job appication of a candidate, the Application Form API supports prefilling the application form from external sources. In this document we will do this with the LinkedIn javascript SDK.

In the example below, both the Widget and the form are placed in the same page. Splitting this in two seperate pages might be preferable for a production implementation. In which case it is also possible to place the widget directly into the job listing or a job page.

Complete example

The example below shows a working version of the concept. First the candidate must click on the LinkedIn widget. After the candidate grants access to LinkedIn, some of the candidates fields will be prefilled in the following form.

First we will show the whole example. After this example a step by step explanation is shown.

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://MyCompany.force.com/resource/cxsrec__cxsForm" type="text/javascript"></script>
    <link rel="stylesheet" href="https://MyCompany.force.com/resource/cxsrec__cxsFormStyle"/>
  </head>
  <body>

<script>
    // Setup an event listener to make an API call once auth is complete
    function onLinkedInLoad() {
        IN.Event.on(IN, "auth", getProfileData);
    }

    // Handle the successful return from the API call
    function onSuccess(data) {
        linkedInData = data;

        $('#cxsFormHolder').css('display', 'block');
        cxsForm.init({
            target:"#cxsFormHolder",
            server:"https://MyCompany.force.com/",
            onInit:fillFormWithData
        });
    }

    // Handle an error response from the API call
    function onError(error) {
        console.log(error);
    }

    // Use the API call wrapper to request the member's basic profile data
    function getProfileData() {
        IN.API.Profile("me").fields("first-name", "last-name", "email-address", "summary", "public-profile-url").result(onSuccess).error(onError);
    }

    function fillFormWithData() {
        // fill some fields from the LinkedIn response into the Connexys form
// when making a production implementatie, please add bound & null checks on the
// code below cxsForm.setFieldValue('cxsrec__cxsCandidate__c.cxsrec__First_name__c', linkedInData.values[0].firstName); cxsForm.setFieldValue('cxsrec__cxsCandidate__c.cxsrec__Last_name__c', linkedInData.values[0].lastName); cxsForm.setFieldValue('cxsrec__cxsCandidate__c.cxsrec__E_mail_address__c', linkedInData.values[0].emailAddress); console.debug('Public profile url: ', linkedInData.values[0].publicProfileUrl); console.debug('Summary: ', linkedInData.values[0].summary); // cxsForm.setFieldValue('cxsrec__cxsCandidate__c.cxsrec__?', linkedInData.values[0].publicProfileUrl); // cxsForm.setFieldValue('cxsrec__cxsCandidate__c.cxsrec__?', linkedInData.values[0].summary); } </script> <script type="text/javascript" src="//platform.linkedin.com/in.js"> api_key: CLIENT_ID scope: r_basicprofile r_emailaddress onLoad: onLinkedInLoad </script> <script type="in/Login"></script> <div id="cxsFormHolder" style="display:none"> Loading... </div> </body> </html>

 

Explanation for each part

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://MyCompany.force.com/resource/cxsrec__cxsForm" type="text/javascript"></script>
    <link rel="stylesheet" href="https://MyCompany.force.com/resource/cxsrec__cxsFormStyle"/>
  </head>

We load jquery, to use in our example. This is not required, the places where jquery is used in this example can be replaced by plain javascript or any other simular tool.

Also we load the Application Form API javascript and css resources. Replace https://MyCompany.force.com with own public site url. How to obtain this url is explained in the https://help.connexys.com/hc/en-us/articles/209210905-Application-Form-API arcticle.

// Setup an event listener to make an API call once auth is complete
    function onLinkedInLoad() {
        IN.Event.on(IN, "auth", getProfileData);
    }

    var linkedInData = null;

    // Handle the successful return from the API call
    function onSuccess(data) {
        linkedInData = data;

        $('#cxsFormHolder').css('display', 'block');
        cxsForm.init({
            target:"#cxsFormHolder",
            server:"https://MyCompany.force.com/",
            onInit:fillFormWithData
        });
    }

    // Handle an error response from the API call
    function onError(error) {
        console.log(error);
    }

    // Use the API call wrapper to request the member's basic profile data
    function getProfileData() {
        IN.API.Profile("me").fields("first-name", "last-name", "email-address", "summary", "public-profile-url", "picture-url").result(onSuccess).error(onError);
    }

This is the javascript code where we handle the communication with LinkedIn and initialize the form when we receive a success. The result we get from LinkedIn is stored in the linkedInData global variable, for later us. More information about the LinkedIn javascript SDK can be found here.

function fillFormWithData() {
        // fill some fields from the linkedIn response into the Connexys form
        cxsForm.setFieldValue('cxsrec__cxsCandidate__c.cxsrec__First_name__c', linkedInData.values[0].firstName);
        cxsForm.setFieldValue('cxsrec__cxsCandidate__c.cxsrec__Last_name__c', linkedInData.values[0].lastName);
        cxsForm.setFieldValue('cxsrec__cxsCandidate__c.cxsrec__E_mail_address__c', linkedInData.values[0].emailAddress);
    	console.debug('Public profile url: ', linkedInData.values[0].publicProfileUrl);
    	console.debug('Summary: ', linkedInData.values[0].summary);
//        cxsForm.setFieldValue('cxsrec__cxsCandidate__c.cxsrec__?', linkedInData.values[0].publicProfileUrl);
//        cxsForm.setFieldValue('cxsrec__cxsCandidate__c.cxsrec__?', linkedInData.values[0].summary);
// cxsForm.setFieldValue('cxsrec__cxsCandidate__c.cxsrec__Image_Url__c',linkedInData.values[0].pictureUrl); }

Some field are prefilled here, and others logged to the console. This method is defined as the "onInit" method of the form. Which fields are received from LinkedIn can be found out by inspecting the linkedInData global variable.

<script type="text/javascript" src="//platform.linkedin.com/in.js">
    api_key: CLIENT_ID
    scope: r_basicprofile r_emailaddress
    onLoad: onLinkedInLoad
</script>

Here we initialize the LinkedIn SDK. Replace CLIENT_ID with your clientId.

<script type="in/Login"></script>

Show the login with LinkedIn button, this button can be styled as described in the LinkedIn SDK documentation.

    <div id="cxsFormHolder" style="display:none">
      Loading...
    </div>

This were the Connexys form is inserted in the page. It is hidden until we get some data from LinkedIn.

 

Calling the example page from the Connexys package

We have also created an example page included in our package. This can be opened by pasting the url below into the browser:

https://MyCompany/cxsrec__cxsApplyFormExampleLinkedIn?apiKey=CLIENT_ID

- replace CLIENT_ID with your client id
- replace MyCompany.force.com with your site url
- you might have to add the cxsrec__cxsApplyFormExampleLinkedIn page to your site.
- for connexys employees you can find a client id in this article.


Added in version 8

To add the linkedIn photo directly to the photo field (image_url__c), a few things need to be done:

  • Add "https://media.licdn.com" to the Remote Site Settings in Salesforce.
  • In the above example add the following line to the fillFormWithData function :
    cxsForm.setFieldValue('cxsrec__cxscandidate__c.cxsrec__image_url__c',linkedInData.values[0].pictureUrl);

 

 

Powered by Zendesk