Apply with LinkedIn

Integrating with Apply with LinkedIn

Step 1 - Whitelist JS Domains

In order to ensure that other applications cannot fraudulently represent themselves as your own using the JavaScript SDK, you must configure a list of valid domains where your application lives that LinkedIn is allowed to trust. Make sure to include fully qualified domain names, including the protocol (i.e. http, https) and any non-standard port numbers (other than ports 80 or 443).

  • For apps created via LinkedIn Developer Portal Add your domain(s) to the "Valid SDK Domains" field in your application's settings page under "JavaScript" tab (see image below)

Javascript API Domains

  • For apps created via the provisioning API Update the valid JS domains for each child app using the endpoint documented here .

Note

Note : Failure to configure a JavaScript API domain will result in an error in your browser's JavaScript console whenever your webpage attempts to initialize the Apply with LinkedIn widget.

Step 2 - Initialize the Plugin

In order to use any of the functionality provided by the "Apply with LinkedIn" plugin, it must be included on your webpage.

javascript

<div name="widget-holder">
    <script type="text/javascript" 
        src="https://www.linkedin.com/mjobs/awli/awliWidget">
    </script>
    ...
</div>

Step 3 - Configure the Plugin

Each page that the plugin needs to be added to requires slightly different set-up based on what the plugin is doing. When identifying the user who clicked apply, prefilling profile information, or providing information back to the LinkedIn that this user has finished his/her application, the setup will be similar on each page, but with slight differences in the parameters to invoke the plugin and the callback to handle the response.

When rendering the "Apply with LinkedIn" button, the plugin will check to see if there is a LinkedIn cookie for the user. If a cookie is present, the "Apply with LinkedIn" button will render. If a cookie cannot be found, the data-default-button-callback will be called where the client can render the default apply button.

If the user does not have a LinkedIn cookie, and data-allow-sign-in is set to "true", then "Sign in with LinkedIn" will show. After the user signs in to LinkedIn, the user will have a LinkedIn cookie on their browser and the "Apply with LinkedIn" button will render.

Example of the rendered plugin:

Example of the rendered plugin for customers that will use profile info across multiple jobs, i.e. Search & Staffing agencies:

javascript

<div name="widget-holder">
    <script type="text/javascript" 
        src="https://www.linkedin.com/mjobs/awli/awliWidget">
    </script>
    <script type="IN/AwliWidget"  
        data-company-job-code="{UniqueJobCode}" 
        data-integration-context="urn:li:organization:{id}"
        /*  the value inputted here is retrieved from the 
            customer configuration widget (for ATS partners) */
        data-mode="BUTTON_DATA" 
        data-callback-method="onProfileData" 
        data-api-key="{API key}"
        data-allow-sign-in="true">
    </script>
</div>

Plugin Invocation Parameters

Name Required Description
data-api-key Y API key (Client ID) for your application.
data-company-job-code Y Unique job posting id within the company's system. This value will be used by LinkedIn to identify the job and for tracking purposes.
data-integration-context Y A value in the format of urn:li:organization:{ID}, ATS partners will retrieve this after the customer has logged in to the customer configuration plugin . Non ATS partners should receive this directly from LinkedIn.
data-mode Y The mode this plugin will be used. Four modes are currently supported: BUTTON Mode: Creates the "Apply with LinkedIn" button on the page, and starts the click tracking in within LinkedIn. Once clicked, the callback method that partner provides will be triggered. BUTTON_DATA Mode: Similar to BUTTON mode, but will also fetch the data when the button is clicked, and the plugin will call partner’s callback method to process the data. DATA Mode: No button will be created on the page, but when the page is loaded, the member’s LinkedIn profile data will be fetched and returned to the page. The callback method provided will be called when data is ready. The user must click on the “Apply with LinkedIn” button on the previous page for the profile data to return to the page. CONVERSION Mode: No visible items will be created on the page. A conversion tracking event will be sent back to LinkedIn to track the application status of the member. Note that the user must click on the “Apply with LinkedIn” button on the previous page to track this conversion.
data-allow-sign-in N When set to “true”, this allows the plugin to show up as “Sign in to LinkedIn” when the user does not have a LinkedIn cookie. When set to "false", the Apply with LinkedIn button will not render when the user does not have a LinkedIn cookie and will not provide a sign in option for those users. Once the user signs-in to LinkedIn, the user sees “Apply with LinkedIn”.
data-callback-method N The callback method that will be called when there is communication required between the plugin and the client. Depending on the mode that is configured, different callback methods will be required. BUTTON Mode: Specify the actions to take after the plugin button is clicked. BUTTON_DATA Mode: Specify the actions to take after the plugin button is clicked and the applicant’s profile data is received from LinkedIn. DATA Mode: Specify the actions to take after the profile data is received from LinkedIn. CONVERSION Mode: Callback not required. For BUTTON , BUTTON_DATA , and DATA modes, the tracking events/profile data fetch action on the LinkedIn side will still be triggered even if a callback is not provided.
default-button-callback N When in BUTTON mode, this callback method will be called if the user does not have a LinkedIn cookie. The "Apply with LinkedIn" button will not be rendered if data-allow-sign-in is set to "false". This callback method should be used to render the client's default apply button so the users can continue the application process.
data-color N Acceptable values are blue, black or white. The default value is blue.
data-size N Acceptable values are small, medium or large. The default value is medium. For reference, the size of the button is as follows: small Width = 175px, Height = 72px medium Width = 175px, Height = 80px large Width = 230px, Height = 88px

Apply with LinkedIn Supported Use Cases

To ensure customers can view job seekers who are starting their application regardless of how their Application Tracking System (ATS) is set up, we’ve built-in modes for our plugin:

  1. Standard Flow - consists of a "job overview" page, “enter information” page, and “finished application page” (pages: A, C, D below)
  2. Create Account Flow - consists of a job overview page, create account on ATS page, enter information page, and finished application page (pages: A, B, C, D below)
  3. One Page Flow - consists of a job overview page with enter information components, and finished application page (pages: E, and D below)

Standard Flow

The Standard Flow is for products where the apply process is made up of three steps:

  1. User clicks "apply" button (Page A)
  2. User fills our form with their information and submits (Page C)
  3. A "thank you" or "confirmation" page is shown to the user (Page D)

Standard Flow

Step 1 - Render the apply button

If the user has a LinkedIn cookie, when the user hits job overview page (page A), the “Apply with LinkedIn” button will render. If the user does not have a LinkedIn cookie and data-allow-sign-in is set to "true", then "Sign in with LinkedIn" will show. After the user signs in to LinkedIn, the user will have a LinkedIn cookie on their browser and the "Apply with LinkedIn" button will render.

JavaScript

<div name="widget-holder">
<script type="text/javascript" 
    src="https://www.linkedin.com/mjobs/awli/awliWidget">
</script>
<script type="IN/AwliWidget" 
    data-company-job-code="{UniqueJobCode}"
    data-integration-context="urn:li:organization:{id}"
    data-mode="BUTTON" 
    data-callback-method="onButtonClick" 
    data-default-button-callback="enableDefaultButton" 
    data-api-key="{API key}"
    data-allow-sign-in="true">
</script>
    <button id="default-apply-button" 
        style="visibility: hidden" 
        onclick="onButtonClick()">
        Default Apply
    </button>
</div>
<script>
    // redirect to next page
    function onButtonClick() {
        window.location = "./form.html";
    }
    function enableDefaultButton() {
        document.getElementById("default-apply-button").style.visibility = 'visible';
    }
</script>

When the user clicks “Apply with LinkedIn” button, LinkedIn will track that the member has clicked “Apply” for that job. This tracking is done within the plugin, and no explicit configurations are needed. The callback provided for data-callback-method will be invoked to handle the button click action.

Step 2 - Apply form is presented to user

Once a user has clicked the "Apply with LinkedIn" button, their LinkedIn information can now be used to pre-fill the apply form.

JavaScript

<div name="widget-holder">
    <script type="text/javascript" 
        src="https://www.linkedin.com/mjobs/awli/awliWidget">
    </script>
    <script type="IN/AwliWidget" 
        data-company-job-code="{UniqueJobCode}" 
        data-integration-context="urn:li:organization:{id}"
        data-mode="DATA" 
        data-callback-method="onProfileData" 
        data-api-key="{API key}">
    </script>
</div>
<script>
    function onProfileData(profileData) {
        var firstnameField = document.getElementById('firstname');
        var lastnameField = document.getElementById('lastname');
        firstnameField.value = profileData.firstName;
        lastnameField.value = profileData.lastName;
    }
    // prefill form with profile data
</script>

Step 3 - User hits submit and lands on finished application page

When the user lands on the page designating that the application process has been finished, LinkedIn will track that the member has finished the application for the job. To add confirmation tracking, the plugin must be included on the confirmation page.

JavaScript

<div name="widget-holder">
    <script type="text/javascript" 
        src="https://www.linkedin.com/mjobs/awli/awliWidget">
    </script>
    <script type="IN/AwliWidget"  
        data-company-job-code="{UniqueJobCode}" 
        data-integration-context="urn:li:organization:{id}"
        data-mode="CONVERSION" 
        data-api-key="{API key}">
    </script>
</div>

Create Account Flow

The Create Account Flow is similar to the standard flow; however, it supports the client creating an account for the user before applying in the client's system. This flow is made up of four steps:

  1. User clicks "apply" button (Page A)
  2. User creates an account with the client (Page B)
  3. User fills our form with their information and submits (Page C)
  4. A "thank you" or "confirmation" page is shown to the user (Page D)

Create Account Flow

Step 1 - Render the apply button

If the user has a LinkedIn cookie, when the user hits job overview page (page A), the “Apply with LinkedIn” button will render. If the user does not have a LinkedIn cookie and data-allow-sign-in is set to "true", then "Sign in with LinkedIn" will show. After the user signs in to LinkedIn, the user will have a LinkedIn cookie on their browser and the "Apply with LinkedIn" button will render.

JavaScript

<div name="widget-holder">
    <script type="text/javascript" 
        src="https://www.linkedin.com/mjobs/awli/awliWidget">
    </script>
    <script type="IN/AwliWidget" 
        data-company-job-code="{UniqueJobCode}" 
        data-integration-context="urn:li:organization:{id}"
        data-mode="BUTTON" 
        data-callback-method="onButtonClick" 
        data-default-button-callback="enableDefaultButton" 
        data-api-key="{API key}"
        data-allow-sign-in="true">
    </script>
    <button id="default-apply-button" 
        style="visibility: hidden" 
        onclick="onButtonClick()">
        Default Apply
    </button>
</div>
<script>
    // redirect to next page
    function onButtonClick() {
        window.location = "./form.html";
    }

    function enableDefaultButton() {
        document.getElementById("default-apply-button").style.visibility = 'visible';
    }
</script>

When the user clicks “Apply with LinkedIn” button, LinkedIn will track that the member has clicked “Apply” for that job. This tracking is done within the plugin, and no explicit configurations are needed. The callback provided for data-callback-method will be invoked to handle the button click action.

Step 2 - User creates an account

No changes need to be made to the Apply with LinkedIn plugin in order to support the account creation process in the client's system.

Step 3 - Apply form is presented to user

Once a user has clicked the "Apply with LinkedIn" button, their LinkedIn information can now be used to pre-fill the apply form.

JavaScript

<div name="widget-holder">
    <script type="text/javascript" 
        src="https://www.linkedin.com/mjobs/awli/awliWidget">
    </script>
    <script type="IN/AwliWidget" 
        data-company-job-code="{UniqueJobCode}" 
        data-integration-context="urn:li:organization:{id}"
        data-mode="DATA" 
        data-callback-method="onProfileData" 
        data-api-key="{API key}">
    </script>
</div>
<script>
    function onProfileData(profileData) {
        var firstnameField = document.getElementById('firstname');
        var lastnameField = document.getElementById('lastname');
        firstnameField.value = profileData.firstName;
        lastnameField.value = profileData.lastName;
    }
    // prefill form with profile data
</script>

Step 4 - User hits submit and lands on finished application page

When the user lands on the page designating that the application process has been finished, LinkedIn will track that the member has finished the application for the job. To add confirmation tracking, the plugin must be included on the confirmation page.

JavaScript

<div name="widget-holder">
  <script type="text/javascript" 
        src="https://www.linkedin.com/mjobs/awli/awliWidget">
  </script>

  <script type="IN/AwliWidget"  
        data-company-job-code="{UniqueJobCode}"
        data-integration-context="urn:li:organization:{id}"
        data-mode="CONVERSION" 
        data-api-key="{API key}">
  </script>
</div>

One Page Flow

The One Page Flow supports pages where the apply button and the user information form sit on the same page. In this flow:

  1. User views the job overview page and user information form. The Apply with LinkedIn button renders (Page E)
  2. User clicks the Apply with LinkedIn button to fill the form with their information and clicks submit. (Page E)
  3. A "thank you" or "confirmation" page is shown to the user (Page D)

One Page Flow

Step 1 - Render the apply button

If the user has a LinkedIn cookie, when the user hits job overview page (page A), the “Apply with LinkedIn” button will render. If the user does not have a LinkedIn cookie and data-allow-sign-in is set to "true", then "Sign in with LinkedIn" will show. After the user signs in to LinkedIn, the user will have a LinkedIn cookie on their browser and the "Apply with LinkedIn" button will render.

JavaScript

<div name="widget-holder">
    <script type="text/javascript" 
        src="https://www.linkedin.com/mjobs/awli/awliWidget">
    </script>
    <script type="IN/AwliWidget" 
      data-company-job-code="{UniqueJobCode}" 
        data-integration-context="urn:li:organization:{id}"
        data-mode="BUTTON_DATA" 
        data-callback-method="onProfileData" 
        data-api-key="{API key}"
        data-allow-sign-in="true">
    </script>
</div>
<script>
    function onProfileData(profileData) {
        var firstnameField = document.getElementById('firstname');
        var lastnameField = document.getElementById('lastname');
        firstnameField.value = profileData.firstName;
        lastnameField.value = profileData.lastName;
    }
    // prefill form with profile data
</script>

When the user clicks “Apply with LinkedIn” button, LinkedIn will track that the member has clicked “Apply” for that job. This tracking is done within the plugin, and no explicit configurations are needed. The callback provided for data-callback-method will be invoked to fill the form with profile data.

Step 2 - User clicks Apply with LinkedIn button

When the user clicks the Apply with LinkedIn button, LinkedIn will track that the member has started the application for the job and LinkedIn will fetch the member’s profile data and pass it back to the client. The callback function provided by client will be invoked to handle the data.

Step 3 - User hits submit and lands on finished application page

When the user lands on the page designating that the application process has been finished, LinkedIn will track that the member has finished the application for the job. To add confirmation tracking, the plugin must be included on the confirmation page.

JavaScript

<div name="widget-holder">
  <script type="text/javascript" 
        src="https://www.linkedin.com/mjobs/awli/awliWidget">
  </script>
  <script type="IN/AwliWidget"  
        data-company-job-code="{UniqueJobCode}" 
        data-integration-context="urn:li:organization:{id}"
        data-mode="CONVERSION" 
  data-api-key="{API key}">
  </script>
</div>

Sample Profile Data Response

If the member is LinkedIn authenticated, and the plugin is configured in DATA mode or BUTTON_DATA mode, we will fetch the member’s profile data and pass it back to the partner’s page.

Depending on the implementation, the data can be used to help fill the application form. The application needs to create a callback method to handle this data returned from LinkedIn.

A sample response is shown below:

JSON

{
  "firstName": "FirstName",
  "lastName": "LastName",
  "headline": "Software engineer at Linkedin Corporation",
  "summary": "This is my Summary.",
  "location": {
    "locationName": "San Francisco Bay Area",
    "country": "us"
  },
  "profileImageUrl": "https://media.licdn.com/dms/image/samplsamplesample/profile-displayphoto-shrink_100_100/0?e=12345&v=beta&t=samplsample"
  "publicProfileUrl": "www.linkedin.com/in/firstname-lastname-123",
  "specialities": "specialities of this person",
  "positions": [
    {
      "title": "Software Engineer",
      "summary": "Software development",
      "startDate": null,
      "endDate": null,
      "isCurrent": true,
      "companyName": "Linkedin Corporation",
      "company": {
        "name": "LinkedIn",
        "type": "EDUCATIONAL",
        "ticker": "LNKD"
      }
    },
    {
      "title": "abc",
      "summary": null,
      "startDate": {
        "month": 1,
        "year": 2011
      },
      "endDate": {
        "month": 2,
        "year": 2013
      },
      "isCurrent": false,
      "companyName": "nonexistingcompany",
      "company": null
    }
  ],
  "skills": [],
  "educations": [
    {
      "schoolName": "University of Pennsylvania",
      "fieldOfStudy": "Computer Science",
      "startDate": {
        "year": 2016
      },
      "endDate": {
        "year": 2020
      },
      "degree": "Master of Engineering (MEng)",
      "activities": "a brief description to my UPenn activities",
      "notes": "Hanging around"
    }
  ],
  "patents": [
    {
      "title": "Super Power Granting Machine",
      "summary": "It will grant you one super power of your choice",
      "number": "123321-abc",
      "status": 1,
      "statusName": "Patent",
      "date": {
        "month": 2,
        "year": 2000,
        "day": 1
      },
      "url": null
    }
  ],
  "languages": [
    {
      "name": "English",
      "proficiency": "ELEMENTARY"
    },
    {
      "name": "Chinese (Simplified)",
      "proficiency": "PROFESSIONAL_WORKING"
    }
  ],
  "publications": [
    {
      "title": "Guide to Success",
      "publisher": "McGraw-Hill",
      "date": {
        "year": 2000
      },
      "url": null,
      "summary": "A brief description to my publication \"guide to success\""
    }
  ],
  "certifications": [
    {
      "name": "Certified Java Programmer",
      "authority": "Coursera",
      "number": "1233211234-4",
      "startDate": {
        "month": 1,
        "year": 2000
      },
      "endDate": {
        "month": 1,
        "year": 2000
      }
    }
  ],
  "honors": [
    {
      "title": "Honored First class student",
      "description": "dest",
      "issuer": "Myself",
      "issueDate": {
        "month": 1,
        "year": 2012
      }
    }
  ],
  "recommendationsReceived": [
    {
      "recommendationText": "test",
      "recommender": {
        "firstName": "ibfizkMatrixFirst",
        "lastName": "ibfizkMatrixLast"
      }
    },
    {
      "recommendationText": "Test",
      "recommender": {
        "firstName": "mgyuhfMatrixFirst",
        "lastName": "mgyuhfMatrixLast"
      }
    }
  ],
  "emailAddress": "testuser@linkedin.com",
  "phoneNumber": "123-321-1234"
}

Error Codes

The following error codes can be returned:

Error Code Description
error.origin.not.in.api.domains Domain is not configured on the API key settings.
error.finding.application.with.api.key Invalid API key used.
error.invalid.integration.context Invalid integration context value (organization URN) used. Will only appear if passing data-integration-context parameter.
error.cannot.match.job LinkedIn cannot map the inputted job ID to a LinkedIn Job ID.
error.cannot.find.user.consent The user has not agreed to share their profile information. The user must click the Apply with LinkedIn button before DATA or CONVERSION modes can be used.
error.unknown.mode Incorrect mode value used.