# 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.

<figure><img src="/files/A95X78F2TL6iXXlDJe2R" alt=""><figcaption></figcaption></figure>

### Steps to Add an Advertisement Banner

1. **Log in to Admin Panel**
   1. Go to your admin side of the Job Board.\
      Example: <mark style="color:$success;"><https://abx.arthajobboard.com/admin></mark>
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).<br>

      <figure><img src="/files/KSws6AyctDtUvrfwkWbb" alt=""><figcaption></figcaption></figure>
   4. Here's the JavaScript code:

```javascript
// 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 <mark style="color:$success;">querySelector('a\[href\*="linkedin"]')</mark> is used to check if a banner with that domain already exists.
* Always replace <mark style="color:$success;">**"linkedin"**</mark> with the domain of your own ad link (for example: <mark style="color:$success;">**"facebook"**</mark>**,** <mark style="color:$success;">"carehireusa"</mark>, or your sponsor’s domain).

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

### Expected Output Image

<figure><img src="/files/SA8UhivhTYW1pxZbLg16" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.arthajobboard.com/guides/display-an-advertisement-banner-on-the-job-details-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.