Embedding 3B Components on Client Site: Difference between revisions

From 3B Knowledge
Jump to navigation Jump to search
(Created page with "This page provides some examples on how to embed 3B client facing components on a customer's website. == Prerequisites == # Ensure that you have access to the Salesforce guest site URL, which in this example is: <code>https://your-company<nowiki/>.my.salesforce-sites.com/onboarding</code>. # Ensure that your client's website supports the embedding of third-party components. == Job Board == <syntaxhighlight lang="html"> <!DOCTYPE html> <html lang="en"> <head> <met...")
 
No edit summary
 
(One intermediate revision by the same user not shown)
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
=== 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">
<syntaxhighlight lang="html">
<!DOCTYPE html>
<!DOCTYPE html>
Line 67: Line 225:
     <script src="https://my-company.my.salesforce-sites.com/onboarding/resource/b3o__GeneralUtils/index.js" defer="true" type="module" crossorigin="anonymous"></script>
     <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 -->
     <!-- Load Login Component -->
     <script src="https://my-company.my.salesforce-sites.com/onboarding/resource/PortalLoginComponent/index.js" type="module"></script>
     <script src="https://my-company.my.salesforce-sites.com/onboarding/resource/b3o__PortalLoginComponent/index.js" type="module"></script>
     <!-- Load Job Post Component -->
     <!-- 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>
     <script src="https://my-company.my.salesforce-sites.com/onboarding/resource/b3o__JobPostResources/index.js" defer="true" type="module" crossorigin="anonymous"></script>
Line 98: Line 256:
             //Get the job ID from the URL param "id"
             //Get the job ID from the URL param "id"
             jobPost.setAttribute('job-id', searchParams.get('id'));
             jobPost.setAttribute('job-id', searchParams.get('id'));
             jobPost.setAttribute('app-documents-link', 'https://localhost:5501/OnboardingLatest/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);

Latest revision as of 04:46, 5 October 2023

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’