WebsiteStart A Free TrialRequest A Feature

How to Display an Advertisement Banner on the Job Details Page

An advertisement banner is simply an image ad that you can showcase on your Job Board’s pages.

On every Job Details page, there’s a dedicated space where you can place this banner. By adding a small JavaScript snippet from the admin panel, you can easily display and manage your banner ads.

Steps to Add an Advertisement Banner

  1. Log in to Admin Panel

    1. Go to your admin side of the Job Board. Example: https://abx.arthajobboard.com/admin

  2. Open Portal Settings

    1. From the menu, click Manage Portal.

  3. Embed Your Script

    1. Click on Embed Script.

    2. Copy and paste the JavaScript code below into the Header Script section.

    3. Make the necessary changes (like your image link, target URL, or alt text).

    4. Here's the JavaScript code:

// JavaScript code
<script>
function addBanner() {
    const marketingBanner = document.getElementById("marketing-banner");

    // IMPORTANT: Replace 'linkedin' with your own ad link domain
    if (marketingBanner && !marketingBanner.querySelector('a[href*="linkedin"]')) {
        const link = document.createElement("a");
        link.href = "https://www.linkedin.com/groups/10129029/"; // Change to your redirect URL
        link.target = "_blank"; 
        const image = document.createElement("img");
        image.src = "https://artha-s3-public-bucket-production.s3.ap-south-1.amazonaws.com/image/ChatGPTImageMay27,2025,10_55_03PM_37.png"; // Replace with your banner image URL
        image.alt = "CareHire USA LinkedIn Group";  // Update alt text for accessibility
        link.appendChild(image);
        marketingBanner.appendChild(link);
        console.log("Banner added successfully!");
    }
}

function startObserver() {
    if (document.body) {
        const observer = new MutationObserver(function(mutations) {
            setTimeout(addBanner, 100);
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }
}

// Wait for DOM to be ready
document.addEventListener("DOMContentLoaded", function() {
    setTimeout(addBanner, 1000);
    startObserver();
});

// Fallback if DOMContentLoaded already fired
if (document.readyState === 'loading') {
    // Still loading, event will fire
} else {
    // Already loaded
    setTimeout(addBanner, 1000);
    startObserver();
}
</script>

Key Note

  • The part querySelector('a[href*="linkedin"]') is used to check if a banner with that domain already exists.

  • Always replace "linkedin" with the domain of your own ad link (for example: "facebook", "carehireusa", or your sponsor’s domain).

This ensures multiple banners don’t stack up on the same page.

Expected Output Image

PreviousHow to Create a Location-Based Programmatic Job Page

Last updated

Was this helpful?