3B Knowledge

Embedding 3B Components on Client Site: Difference between revisions

Embedding 3B Components on Client Site (view source)

Revision as of 04:46, 5 October 2023

7,652 bytes added ,  04:46, 5 October 2023
no edit summary
No edit summary
No edit summary
 
Line 1: Line 1:
This page provides some examples on how to embed 3B client facing components on a customer's website.
This page provides some examples on how to embed 3B client facing components on a customer's website. Depending on whether you need the Job Board and Job Post to link to a Salesforce ATS like Bullhorn, TargetRecruit, Seven20, Asymbl or even a custom Job - Application - Placement object model, you'd need to follow the relevant example provided in this article.


== Prerequisites ==
== Prerequisites ==
Line 7: Line 7:


== Job Board ==
== Job Board ==
=== With an ATS Integration ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Demo Job Board</title>
    <meta name="description" content="Sample job">
    <meta name="keywords" content="3B Onboarding, Job">
    <meta name="author" content="3B Soft">
    <meta name=”robots” content="index, follow">
   
    <!-- Load Supporting Library -->
    <script src="https://my-company.my.salesforce-sites.com/onboarding/resource/b3o__GeneralUtils/index.js" defer="true" type="module" crossorigin="anonymous"></script>
    <!-- Load Job Board Component -->
    <script src="https://my-company.my.salesforce-sites.com/onboarding/resource/b3o__JobBoardResources/index.js" defer="true" type="module" crossorigin="anonymous"></script>
    <!-- Load Job Post Component -->
    <script src="https://my-company.my.salesforce-sites.com/onboarding/resource/b3o__JobPostResources/index.js" defer="true" type="module" crossorigin="anonymous"></script>
</head>
<body>
    <script>
        const globals = {
            siteUrl: 'https://my-company.my.salesforce-sites.com/onboarding',
            useXHR: true
        };
        window['globals'] = globals;   
    </script>
    <job-board
        job-board-name="Default"
        places-api-key=""
        job-relationship-field="b3o__External_Job__c"
        candidate-relationship-field="b3o__Contact__c"
        job-object-name = 'b3o__External_Job__c';
        job-app-schema = 'b3o__External_Application__c:b3o__External_Job__c:b3o__Contact__c'
        site-coordinates-path = 'b3o__Site__r.b3o__Coordinates__c'
        job-title-path = 'b3o__Job_Advert_Title__c'
        job-short-path = 'b3o__Job_Post_Short_Description__c'
        job-body-path = 'b3o__Job_Post_Body__c'
        job-foot-path = 'b3o__Job_Post_Footer__c'
        job-featured-path = 'b3o__Featured_Job__c'
        job-posted-path = 'b3o__Date_Posted__c'
        job-board-path = 'b3o__Job_Boards__c'
        site-field-path = 'b3o__Site__c'
        site-name-path = 'b3o__Site__r.b3o__Public_Name__c'
        job-type-path = 'b3o__Job_Type__r.Name'
        job-type-field-path = 'b3o__Job_Type__c'
        emp-type-path = 'b3o__Employment_Type__c'
        pay-info-path = 'b3o__Pay_Information__c'
        job-ref-path = 'b3o__Job_ID__c'
        job-expiry-path = 'b3o__Available_Until__c'
        job-app-form-path = 'b3o__Application_Form__c'
        job-app-btn-label-path = 'b3o__Apply_Button_Text__c'
        job-doc-pack-path = 'b3o__Document_Pack__c'
    ></job-board>
</body>
</html>
</syntaxhighlight>
=== 3B Native ===
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<!DOCTYPE html>
<!DOCTYPE html>
Line 48: Line 114:


== Job Post ==
== Job Post ==
This example demonstrates the ability to embed a Job Post in conjunction with the Portal Login Component which would login/register a candidate<syntaxhighlight lang="html">
 
This example demonstrates the ability to embed a Job Post in conjunction with the Portal Login Component which would login/register a candidate
 
=== With an ATS Integration ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
<title>Demo Job Post</title>
    <meta name="description" content="Sample job post">
    <meta name="keywords" content="3B Onboarding, Job Post">
    <meta name="author" content="3B Soft">
    <meta name=”robots” content="index, follow">
   
 
    <!-- Load Supporting Library -->
    <script src="https://my-company.my.salesforce-sites.com/onboarding/resource/b3o__GeneralUtils/index.js" defer="true" type="module" crossorigin="anonymous"></script>
    <!-- Load Login Component -->
    <script src="https://my-company.my.salesforce-sites.com/onboarding/resource/b3o__PortalLoginComponent/index.js" type="module"></script>
    <!-- Load Job Post Component -->
    <script src="https://my-company.my.salesforce-sites.com/onboarding/resource/b3o__JobPostResources/index.js" defer="true" type="module" crossorigin="anonymous"></script>
</head>
 
<body>
    <script>
        const globals = {
            siteUrl: 'https://my-company.my.salesforce-sites.com/onboarding',
            useXHR: true
        };
        window['globals'] = globals; 
 
        (function() {
            window.addEventListener('sessionUpdate', function(){
                //Session was updated, refresh page
                window.location.reload();
            });
 
            window.addEventListener('requestLogin', function(){
                console.log('Here!');
                //User wants to apply, but they are not signed in
                let loginComponent = document.createElement('login-component');
                //Append the component to the page
                document.querySelector('body').appendChild(loginComponent);
            });
 
            const searchParams = new URLSearchParams(window.location.search);
            let jobPost = document.createElement('job-post');
            //Get the job ID from the URL param "id"
            jobPost.setAttribute('job-id', searchParams.get('id'));
            jobPost.setAttribute('app-documents-link', 'https://my-company.my.salesforce-sites.com/MyDocuments.html');
            jobPost.setAttribute('job-board-name','Default');
            jobPost.setAttribute('places-api-key','');
            jobPost.setAttribute('job-object-name','b3o__External_Job__c');
            jobPost.setAttribute('job-relationship-field','b3o__External_Job__c');
            jobPost.setAttribute('candidate-relationship-field','b3o__Contact__c');
            jobPost.setAttribute('app-documents-params', '?id={0}&dpId={1}');
 
            jobPost.setAttribute('job-app-schema','b3o__External_Application__c:b3o__External_Job__c:b3o__Contact__c');
            jobPost.setAttribute('site-coordinates-path', 'b3o__Site__r.b3o__Coordinates__c');
            jobPost.setAttribute('job-title-path', 'b3o__Job_Advert_Title__c');
            jobPost.setAttribute('job-short-path', 'b3o__Job_Post_Short_Description__c');
            jobPost.setAttribute('job-body-path', 'b3o__Job_Post_Body__c');
            jobPost.setAttribute('job-foot-path', 'b3o__Job_Post_Footer__c');
            jobPost.setAttribute('job-featured-path', 'b3o__Featured_Job__c');
            jobPost.setAttribute('job-posted-path', 'b3o__Date_Posted__c');
            jobPost.setAttribute('job-board-path', 'b3o__Job_Boards__c');
            jobPost.setAttribute('site-field-path', 'b3o__Site__c');
            jobPost.setAttribute('site-name-path', 'b3o__Site__r.b3o__Public_Name__c');
            jobPost.setAttribute('job-type-path', 'b3o__Job_Type__r.Name');
            jobPost.setAttribute('job-type-field-path', 'b3o__Job_Type__c');
            jobPost.setAttribute('emp-type-path', 'b3o__Employment_Type__c');
            jobPost.setAttribute('pay-info-path', 'b3o__Pay_Information__c');
            jobPost.setAttribute('job-ref-path', 'b3o__Job_ID__c');
            jobPost.setAttribute('job-expiry-path', 'b3o__Available_Until__c');
            jobPost.setAttribute('job-app-form-path', 'b3o__Application_Form__c');
            jobPost.setAttribute('job-app-btn-label-path', 'b3o__Apply_Button_Text__c');
            jobPost.setAttribute('job-doc-pack-path', 'b3o__Document_Pack__c');
           
            //Append the job component to the page
            document.querySelector('body').appendChild(jobPost);
        })(); 
    </script>
</body>
</html>
</syntaxhighlight>
 
=== 3B Native ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
Line 99: Line 257:
             jobPost.setAttribute('job-id', searchParams.get('id'));
             jobPost.setAttribute('job-id', searchParams.get('id'));
             jobPost.setAttribute('app-documents-link', 'https://my-company.my.salesforce-sites.com/MyDocuments.html');
             jobPost.setAttribute('app-documents-link', 'https://my-company.my.salesforce-sites.com/MyDocuments.html');
            jobPost.setAttribute('job-board-name','Default');
           
             //Append the job component to the page
             //Append the job component to the page
             document.querySelector('body').appendChild(jobPost);
             document.querySelector('body').appendChild(jobPost);
Retrieved from ‘https://3bknowhow.com/wiki/Special:MobileDiff/306’