Worktaster Embed

The Worktaster Embed displays current, published opportunities as a responsive set of cards on your website.

Each card can include an image, organisation name, worktaster type, application deadline, start date and a link to the opportunity page. Location appears when the underlying API supplies it.

Opportunities are sorted by application deadline, earliest first. Opportunities without a valid deadline appear last.

Embed URL

https://api.dabbble.app/embeds/opportunities

Live Demo

Add the Embed to Your Website

Paste this HTML into your page or your website builder’s custom HTML block.

<iframe
    src="https://api.dabbble.app/embeds/opportunities"
    title="Current worktaster opportunities"
    width="100%"
    height="900"
    style="display: block; border: 0;"
    loading="lazy"
></iframe>

This displays all current opportunities.

The iframe fills its container’s width and uses a height of 900 pixels.

Filter by Organisation

Add the optional org query parameter to show opportunities from one organisation.

Parameter	Type	Required	Description
`org`	string	No	Organisation name used to filter opportunities.

Omit the parameter, or leave it empty, to show all current opportunities.

Use the full organisation name stored in DABBBLE. The filter does not perform a partial-name search.

Example Organisation

This example uses Adventures + Wisdom Institute.

https://api.dabbble.app/embeds/opportunities?org=Adventures%20%2B%20Wisdom%20Institute

Filtered Embed

<iframe
    src="https://api.dabbble.app/embeds/opportunities?org=Adventures%20%2B%20Wisdom%20Institute"
    title="Worktaster opportunities from Adventures + Wisdom Institute"
    width="100%"
    height="900"
    style="display: block; border: 0;"
    loading="lazy"
></iframe>

Encoding Organisation Names

URL-encode the organisation name when adding it to the embed URL.

Character	Encoded value
Space	`%20`
Literal plus sign	`%2B`
Ampersand	`%26`

For Adventures + Wisdom Institute, use:

Adventures%20%2B%20Wisdom%20Institute

Do not leave the plus sign unencoded. A raw + in a query parameter is interpreted as a space.

Resize the Embed

Change the Height

Update the height attribute to control the visible area.

<iframe
    src="https://api.dabbble.app/embeds/opportunities"
    title="Current worktaster opportunities"
    width="100%"
    height="1200"
    style="display: block; border: 0;"
    loading="lazy"
></iframe>

A taller iframe shows more cards before visitors need to scroll inside it.

If the content exceeds the available height, the iframe can scroll.

Change the Width

Use width="100%" to fill the available space.

To limit its width, place it inside a wrapper:

<div style="width: 100%; max-width: 1200px; margin: 0 auto;">
    <iframe
        src="https://api.dabbble.app/embeds/opportunities"
        title="Current worktaster opportunities"
        width="100%"
        height="1000"
        style="display: block; border: 0;"
        loading="lazy"
    ></iframe>
</div>

Use Different Heights on Mobile and Desktop

The cards adapt to the iframe’s width. Set a taller iframe on smaller screens if you want more vertically stacked cards visible.

<style>
    .worktaster-embed {
        display: block;
        width: 100%;
        height: 950px;
        border: 0;
    }

    @media (max-width: 991px) {
        .worktaster-embed {
            height: 1300px;
        }
    }

    @media (max-width: 575px) {
        .worktaster-embed {
            height: 1700px;
        }
    }
</style>

<iframe
    class="worktaster-embed"
    src="https://api.dabbble.app/embeds/opportunities?org=Adventures%20%2B%20Wisdom%20Institute"
    title="Worktaster opportunities from Adventures + Wisdom Institute"
    loading="lazy"
></iframe>

These are example heights. Adjust them to suit your page and the number of opportunities.

Responsive Layout

The card layout responds to the iframe’s viewport width, not necessarily the full browser window.

Iframe viewport width	Layout
Above 991px	Three columns
Above 575px and up to 991px	Two columns
575px or below	One column

An embed placed in a narrow sidebar can therefore use a single-column layout, even on a desktop screen.

Automatic Height

The current embed does not include automatic height messaging.

Setting height: auto on the iframe does not make it expand to match its contents.

For a website on a different origin, automatic resizing would require:

The embed page measuring its content height.
The embed sending that height to the parent page using window.postMessage().
The parent page validating the message origin and updating the iframe height.

Until that functionality is added, use a fixed height or responsive CSS heights.

Displayed Information

Item	Behaviour
Title	Displays the worktaster title.
Image	Displays when an image URL is available.
Organisation	Displays the organisation offering the opportunity.
Worktaster type	Uses the API’s `type` value if supplied. Otherwise, derives a label from attendance information.
Application deadline	Displays when available.
Start date	Displays when available.
Location	Displays only when the API supplies a `location` value.
Opportunity link	Opens the opportunity page in a new tab.

The current JSON API does not return type or location. The embed therefore uses attendance-based type labels and hides the location line.

Sorting

The embed sorts opportunities by application deadline.

Earlier deadlines appear first.
Missing or unrecognised deadlines appear last.
Equal deadlines retain their original API order.
The embed relies on the API to decide which opportunities are current. It does not independently remove expired opportunities.

There is no query parameter for changing the sort order.

Empty and Error States

No Current Opportunities

If no opportunities match, the embed displays:

No current live opportunities.

This also applies when a selected organisation has no matching opportunities.

Loading Failure

If the embed cannot retrieve a valid API response, it displays:

We could not load opportunities right now. Please try again shortly.

Generate a Filtered Embed in PHP

Use http_build_query() to encode the organisation name.

<?php

$organisation = 'Adventures + Wisdom Institute';

$embedUrl = 'https://api.dabbble.app/embeds/opportunities?' .
    http_build_query(
        ['org' => $organisation],
        '',
        '&',
        PHP_QUERY_RFC3986
    );
?>

<iframe
    src="<?php
        echo htmlspecialchars(
            $embedUrl,
            ENT_QUOTES | ENT_SUBSTITUTE,
            'UTF-8'
        );
    ?>"
    title="Current worktaster opportunities"
    width="100%"
    height="1000"
    style="display: block; border: 0;"
    loading="lazy"
></iframe>

Customization

You can control the iframe’s width, height, border and placement from your website.

Your website’s CSS does not directly change the cards, fonts or buttons inside a cross-origin iframe. Those styles belong to the embed page.

The current embed supports organisation filtering through org. It does not include query parameters for colours, fonts, column counts or hiding the heading.