With ClayHR, you can have your own candidate portal, as well as embed your open positions into your website, so it is always up to date.

Embed Formats

You can use three formats for position embed List.

1. Brief

• Position name (hyperlink)

2. Normal

• Position name (hyperlink)
• Location

3. Expanded

• Position Name (hyperlink)
• Location
• Description

How to Embed Open Position List

‍

Step 1: Add Styling for Job Listings

   The following CSS ensures that job postings are neatly displayed on your website.

<style>
    /* The container for job listings */
    .cards {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 20px;
    }


    /* Each job listing card */
    .card {
        width: 250px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        background: #fff;
    }


    .card img {
        width: 100%;
        height: auto;
    }


    .card .text {
        padding: 15px;
    }


    .card .text h3 {
        margin: 0 0 10px;
        font-size: 18px;
    }


    .card .text p {
        margin: 5px 0;
        font-size: 14px;
        color: #555;
    }


    .card .text a {
        display: inline-block;
        margin-top: 10px;
        padding: 8px 12px;
        background: #007bff;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        font-size: 14px;
    }


    .card .text a:hover {
        background: #0056b3;
    }
</style>

‍
Step 2: Add the Job Listing Container

This is where job positions will be displayed.

<!-- Job listings will appear here -->
<div class="cards" id="job-list"></div>

‍

Step 3: Add the Script to Fetch and Display Job Listings

This JavaScript code automatically fetches open positions from your ClayHR account and displays them dynamically.

<script>
    document.addEventListener("DOMContentLoaded", async function () {
        const jobListContainer = document.getElementById("job-list"); // The section where jobs will be displayed
        const domain = "yourcompany.clayhr.com"; // Replace with your ClayHR domain


        try {
            // Fetch job positions from ClayHR
            const response = await fetch(`https://${domain}/job-board/position/api/getpositions?status=OPEN`, {
                method: 'GET',
                mode: 'cors', // Enables cross-origin requests
                headers: {
                    'Content-Type': 'application/json'
                }
            });


            if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);


            const data = await response.json();
            const positions = data.positionModelList || [];


            // Loop through each position and create a job card
            positions.forEach(position => {
                const jobCard = document.createElement("div");
                jobCard.classList.add("card");


                jobCard.innerHTML = `
                    <img src="https://media.licdn.com/dms/image/C4D0BAQF9x72-FVkj2A/company-logo_200_200/0/1676738923273/bizmerlin_logo?e=2147483647&v=beta&t=V-GR4Qe0QMRh6Y_CVqyQcBlXkhsdQ9PJ1iIhopDood8" alt="Company Logo">
                    <div class="text">
                        <h3>${position.name}</h3>
                        <p>Openings: ${position.count}</p>
                        <p>Due Date: ${position.applicationDueDate || "N/A"}</p>
                        <p>${position.description || ""}</p>
                        <a href="https://${domain}/jobboard/#/position/view/${position.seoUrl}" target="_blank">View More</a>
                        <a href="https://${domain}/jobboard/#/position/apply/${position.seoUrl}" target="_blank">Apply</a>
                    </div>
                `;


                jobListContainer.appendChild(jobCard);
            });
        } catch (error) {
            console.error("Error fetching job positions:", error);
            jobListContainer.innerHTML = "<p>Failed to load job listings.</p>";
        }
    });
</script>

‍

Step 4: Final Instructions

1. Replace "yourcompany.clayhr.com" with your actual ClayHR domain.
2. Copy & paste this code into your website.
3. The job list updates automatically whenever you add or remove positions in ClayHR.

‍