Embedding 3B Components on Client Site: Difference between revisions

Revision as of 12:15, 2 October 2023

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: https://your-company.my.salesforce-sites.com/onboarding.
Ensure that your client's website supports the embedding of third-party components.

Job Board

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

<!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');
            //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>