Embedding 3B Components on Client Site

From 3B Knowledge
Revision as of 04:46, 5 October 2023 by Admin (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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

  1. Ensure that you have access to the Salesforce guest site URL, which in this example is: https://your-company.my.salesforce-sites.com/onboarding.
  2. Ensure that your client's website supports the embedding of third-party components.

Job Board

With an ATS Integration

<!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>

3B Native

<!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-board>
</body>
</html>

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

With an ATS Integration

<!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>

3B Native

<!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');
            
            //Append the job component to the page
            document.querySelector('body').appendChild(jobPost);
        })();  
    </script>
</body>
</html>

My Documents

<!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 Document Packs</title>
    <meta name="description" content="Sample document pack">
    <meta name="keywords" content="3B Onboarding, Documents">
    <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 Documents Component -->
    <script src="https://my-company.my.salesforce-sites.com/onboarding/resource/b3o__MyDocuments/index.js" defer="true" type="module" crossorigin="anonymous"></script>
</head>

<body>
    <user-documents></user-documents>

    <script>
        const globals = {
            siteUrl: 'https://my-company.my.salesforce-sites.com/onboarding',
            useXHR: true
        };
        window['globals'] = globals;  
    </script>
</body>
</html>

My Invitations

<!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 Invitations</title>
    <meta name="description" content="Sample self booking console">
    <meta name="keywords" content="3B Onboarding, Invitations">
    <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 Selfbooking Component -->
    <script src="https://my-company.my.salesforce-sites.com/onboarding/resource/b3o__SelfBooking/index.js" defer="true" type="module" crossorigin="anonymous"></script>
</head>

<body>
    <self-booking variant="calendar"></self-booking>

    <script>
        const globals = {
            siteUrl: 'https://my-company.my.salesforce-sites.com/onboarding',
            useXHR: true
        };
        window['globals'] = globals;  
    </script>
</body>
</html>
Retrieved from ‘https://3bknowhow.com/index.php?title=Embedding_3B_Components_on_Client_Site&oldid=306’