Events Embed
The Events Embed displays current, published events as a responsive set of cards on your website.
Each card can include an image, organisation name, event type, start date, end date and a link to the event page.
Events are sorted by start date, earliest first. Events without a valid start date appear last.
Embed URL
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/events"
title="Current DABBBLE events"
width="100%"
height="900"
style="display: block; border: 0;"
loading="lazy"
></iframe>
This displays all current, published events.
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 events from one organisation.
| Parameter | Type | Required | Description |
|---|---|---|---|
org | string | No | Organisation name used to filter events. |
Omit the parameter, or leave it empty, to show all current events.
Use the full organisation name stored in DABBBLE. Matching ignores differences in capitalisation, but does not perform a partial-name search.
Example Organisation
This example shows events from DABBBLE.
Filtered Embed
<iframe
src="https://api.dabbble.app/embeds/events?org=DABBBLE"
title="Events from DABBBLE"
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:
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/events?org=DABBBLE"
title="Events from DABBBLE"
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/events?org=DABBBLE"
title="Events from DABBBLE"
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>
.events-embed {
display: block;
width: 100%;
height: 950px;
border: 0;
}
@media (max-width: 991px) {
.events-embed {
height: 1300px;
}
}
@media (max-width: 575px) {
.events-embed {
height: 1700px;
}
}
</style>
<iframe
class="events-embed"
src="https://api.dabbble.app/embeds/events?org=DABBBLE"
title="Events from DABBBLE"
loading="lazy"
></iframe>
These are example heights. Adjust them to suit your page and the number of events.
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 event title, or Event when no title is available. |
| Image | Displays when an image URL is available. The Events API uses the event banner, falling back to the provider image. |
| Organisation | Displays as Hosted by, followed by the organisation name. |
| Event type | Displays the API’s eventType value when available. |
| Additional type | Displays the API’s type value when available and different from eventType, ignoring capitalisation. |
| Start date | Displays when available. |
| End date | Displays when available. |
| Event link | Opens the event page in a new tab. |
The embed does not display event descriptions, location details or coordinates.
Single-Day Events
When the returned start and end date values are identical, the embed displays one line:
When the values differ, it displays separate lines:
Missing dates are hidden. If the API returns date-time values, those values also appear in the date lines.
Sorting
The embed sorts events by start date.
- Earlier start dates appear first.
- Missing or unrecognised start dates appear last.
- Equal start dates retain their original API order.
- The embed relies on the Events API to decide which events are current and published.
- It does not independently remove events that have already started or ended.
There is no query parameter for changing the sort order.
Empty and Error States
No Current Events
If no events match, the embed displays:
This also applies when a selected organisation has no matching events.
Loading Failure
If the embed cannot retrieve a valid API response, it displays:
Generate a Filtered Embed in PHP
Use http_build_query() to encode the organisation name.
<?php
$organisation = 'DABBBLE';
$embedUrl = 'https://api.dabbble.app/embeds/events?' .
http_build_query(
['org' => $organisation],
'',
'&',
PHP_QUERY_RFC3986
);
?>
<iframe
src="<?php
echo htmlspecialchars(
$embedUrl,
ENT_QUOTES | ENT_SUBSTITUTE,
'UTF-8'
);
?>"
title="Current events"
width="100%"
height="1000"
style="display: block; border: 0;"
loading="lazy"
></iframe>
Change $organisation to show another organisation’s events.
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.
Authentication
Visitors do not need an API key or account to view the embed.
Do not include access tokens or other credentials in your iframe URL or website HTML.