DABBBLE Website Embeds
Display current worktaster opportunities and events on your website using DABBBLE’s ready-made embeds.
Each embed provides a responsive card layout through an iframe. You do not need to fetch JSON or build your own display.
Available Embeds
| Embed | URL | Description |
|---|---|---|
| Worktaster Embed | /embeds/opportunities | Current worktaster opportunities, sorted by application deadline. |
| Events Embed | /embeds/events | Current events, sorted by start date. |
Both embeds support optional filtering by organisation. Visitors do not need an account or API key.
Worktaster Embed
Display current, published worktaster opportunities.
Cards can include:
- Opportunity images and titles.
- Organisation names.
- Worktaster type labels.
- Application deadlines.
- Start dates.
- Links to opportunity pages.
Opportunities with the earliest application deadlines appear first. Opportunities without a valid deadline appear last.
<iframe
src="https://api.dabbble.app/embeds/opportunities"
title="Current worktaster opportunities"
width="100%"
height="1000"
style="display: block; border: 0;"
loading="lazy"
></iframe>
The guide includes organisation filtering, iframe sizing, responsive layouts and details of displayed information.
View the Worktaster Embed documentation
Events Embed
Display current, published events using the same card style.
Cards can include:
- Event images and titles.
- Organisation names.
- Event type information.
- Start and end dates.
- Links to event pages.
Events with the earliest start dates appear first. Events without a valid start date appear last.
<iframe
src="https://api.dabbble.app/embeds/events"
title="Current events"
width="100%"
height="1000"
style="display: block; border: 0;"
loading="lazy"
></iframe>
The guide includes organisation filtering, date display behaviour, sizing examples and empty states.
View the Events Embed documentation
Get Started
- Choose the Worktaster Embed or Events Embed.
- Copy its iframe code into your page or website builder’s custom HTML block.
- Add an organisation filter if you only want content from one organisation.
- Adjust the iframe height to suit your page.
- Check the display on desktop and mobile.
Filter by Organisation
Add the optional org query parameter to show content from one organisation.
Worktasters
Events
Omit org, or leave it empty, to display all matching current content.
Use the full organisation name and URL-encode spaces and special characters. A literal plus sign must be encoded as %2B.
Filtered Iframe Example
<iframe
src="https://api.dabbble.app/embeds/events?org=DABBBLE"
title="Events from DABBBLE"
width="100%"
height="1000"
style="display: block; border: 0;"
loading="lazy"
></iframe>
Width and Height
Use width="100%" to fill the available space. Change the height attribute to control how much content is visible.
<iframe
src="https://api.dabbble.app/embeds/events"
title="Current events"
width="100%"
height="1200"
style="display: block; border: 0;"
loading="lazy"
></iframe>
If the content exceeds the iframe’s height, visitors can scroll inside it.
The iframe does not currently resize automatically to match its contents. Each embed guide includes examples for setting different heights on mobile and desktop.
Responsive Layout
Both embeds adapt their card layout to the iframe’s viewport width.
| Iframe viewport width | Layout |
|---|---|
| Above 991px | Three columns |
| Above 575px and up to 991px | Two columns |
| 575px or below | One column |
A narrow embed can use a single-column layout even when the visitor is using a desktop screen.
Empty and Error States
When no current content matches, the embed displays a message instead of an empty card grid.
| Embed | Empty-state message |
|---|---|
| Worktasters | No current live opportunities. |
| Events | No current live events. |
If the underlying API cannot be loaded, the embed displays a loading-failure message.
Customization
You can control the iframe’s width, height, border and placement from your website.
The cards, fonts and buttons use the embed page’s own styles. Your website’s CSS does not directly restyle content inside a cross-origin iframe.
The current embeds support organisation filtering through org. They do not include query parameters for colours, fonts, column counts or hiding the heading.
Prefer a Custom Display?
Use the JSON APIs if you need control over your layout, styling or how records are processed.
- Worktaster API: opportunity data, including attendance information, deadlines, payment details and page links.
- Events API: event data, including dates, event types, images and page links.
More Embeds
Additional website embeds will appear here as they become available.