Job Listings Widget

Embed job listings from at://work into any website with a simple JavaScript widget

Overview

The Job Listings Widget allows you to embed live job listings from at://work into any website. The widget uses Shadow DOM for complete style isolation and can be customized with various options.

Features

Perfect For

Quick Start

Add the following code to your HTML page:

<!-- Include the widget script -->
<script src="https://atwork.place/static/widget_v1.js"></script>

<!-- Add a container element -->
<div data-job-listings-widget
     data-tag="engineering"
     data-max-results="5">
</div>

That's it! The widget will automatically initialize and display job listings.

Configuration Options

HTML Data Attributes

Attribute Type Default Description
data-identity string - Filter listings by creator DID (e.g., did:plc:abc123)
data-tag string - Filter listings by tag (e.g., engineering)
data-title string "Recent Jobs" Widget header title
data-empty string "There are no jobs to display." Message shown when no jobs are found
data-theme string "light" Theme: "light" or "dark"
data-max-results number 5 Maximum number of jobs to display
data-api-url string "https://atwork.place" API base URL (advanced)
data-refresh-interval number 0 Auto-refresh interval in milliseconds (0 = disabled)

How It Works

The widget:

  1. Fetches job listings from the at://work XRPC API
  2. Filters to currently active listings (between notBefore and notAfter dates)
  3. Extracts tags from listing facets
  4. Renders the listings in an isolated Shadow DOM
  5. Provides links to view full job details or apply directly

API Endpoint

The widget uses the place.atwork.getListings XRPC endpoint:

GET /xrpc/place.atwork.getListings?tag={tag}&identity={identity}

See the XRPC API Documentation for details.

Usage Examples

Company Career Page

Display only job listings posted by your organization using your DID:

<!DOCTYPE html>
<html>
<head>
    <title>Careers - ACME Corp</title>
</head>
<body>
    <h1>Join ACME Corp</h1>

    <div data-job-listings-widget
         data-identity="did:plc:acme-corp-did"
         data-title="Open Positions"
         data-empty="We're not hiring right now, but check back soon!"
         data-max-results="20">
    </div>

    <script src="https://atwork.place/static/widget_v1.js"></script>
</body>
</html>

Tech Blog Sidebar

Show jobs with a specific tag in your blog sidebar:

<aside>
    <div data-job-listings-widget
         data-tag="rust"
         data-title="Rust Jobs"
         data-max-results="3">
    </div>
</aside>

<script src="https://atwork.place/static/widget_v1.js"></script>

Show Your Company's Jobs

Display only job listings from your organization:

<div data-job-listings-widget
     data-identity="did:plc:your-company-did"
     data-title="Join Our Team"
     data-max-results="10">
</div>

Live Example:

Filter by Tag

Show remote opportunities:

<div data-job-listings-widget
     data-tag="remote"
     data-title="Remote Opportunities"
     data-max-results="5">
</div>

Live Example:

Combine Filters

Filter by both identity and tag for very specific listings:

<div data-job-listings-widget
     data-identity="did:plc:your-company-did"
     data-tag="engineering"
     data-title="Our Engineering Roles"
     data-max-results="5">
</div>

Dark Theme

Use the dark theme for websites with dark backgrounds:

<div data-job-listings-widget
     data-theme="dark"
     data-max-results="5">
</div>

Live Example:

Auto-Refresh

Automatically refresh the widget every 5 minutes (300000ms):

<div data-job-listings-widget
     data-refresh-interval="300000"
     data-max-results="5">
</div>

Live Example:

Multiple Widgets on One Page

Display different categories side by side:

<div class="jobs-grid">
    <div data-job-listings-widget
         data-tag="engineering"
         data-title="Engineering"
         data-max-results="3">
    </div>

    <div data-job-listings-widget
         data-tag="design"
         data-title="Design"
         data-max-results="3">
    </div>

    <div data-job-listings-widget
         data-tag="marketing"
         data-title="Marketing"
         data-max-results="3">
    </div>
</div>

<script src="https://atwork.place/static/widget_v1.js"></script>

Live Example:

Programmatic Usage

For advanced use cases, you can initialize the widget programmatically using JavaScript:

<!-- Create a container -->
<div id="my-jobs"></div>

<!-- Include the widget script -->
<script src="https://atwork.place/static/widget_v1.js"></script>

<!-- Initialize programmatically -->
<script>
new JobListingsWidget({
    container: '#my-jobs',           // CSS selector or DOM element
    identity: 'did:plc:abc123',      // Optional: filter by DID
    tag: 'engineering',               // Optional: filter by tag
    title: 'Engineering Jobs',        // Widget title
    empty: 'No positions available.', // Empty state message
    theme: 'light',                   // 'light' or 'dark'
    maxResults: 10,                   // Max jobs to show
    refreshInterval: 60000,           // Refresh every 60 seconds
    apiUrl: 'https://atwork.place'          // API base URL
});
</script>

Styling and Customization

The widget uses Shadow DOM for complete style isolation, which means it won't be affected by your website's CSS and won't affect your website's styles. The widget provides two built-in themes (light and dark) that work well on most websites.

The widget is fully responsive and will adapt to mobile devices automatically.

Browser Compatibility

The widget uses modern web standards and is compatible with:

Requires Shadow DOM support.

Getting Your DID

To filter jobs by your organization's identity, you'll need your DID (Decentralized Identifier). You can find your DID in the following ways:

DIDs look like: did:plc:abc123xyz456