Dartabase

Embeddable search widget

Add a Dartabase artwork search bar to any webpage in two lines of HTML. Works in LibGuides, university research portals, departmental sites, and any HTML page. No framework, no build step, no API key required.

API docs

Installation

Place a container element with the data-dartabase attribute, then include the widget script. The script auto-initialises on page load.

<div data-dartabase></div>
<script src="https://dartabase.art/widget.js"></script>

The script tag can be placed anywhere in <head> or <body>. Multiple widgets on the same page are supported.

Configuration

Attributes are set directly on the container element.

AttributeTypeDescription

data-dartabasebooleanMount point. Add this attribute to the container element.

data-placeholder?stringPlaceholder text for the input. Default: "Search artworks..."

data-max-results?integerNumber of results shown in the dropdown. 1-10, default 5.

Full example with all options:

<div
  data-dartabase
  data-placeholder="Search 15,000+ artworks..."
  data-max-results="5"
></div>
<script src="https://dartabase.art/widget.js"></script>

How it works

Script loads

The IIFE scans for all elements with data-dartabase and attaches a search UI to each.

User types

Input is debounced 300ms, then sent to the Dartabase public API.

Results render

Up to max-results artworks appear as a dropdown with thumbnail, title, artist, and date.

User clicks

Each result opens the full artwork record on dartabase.art in a new tab. A footer link opens the full search page.

Technical notes

The widget script is served at https://dartabase.art/widget.js with a 1-hour cache. It is a self-contained IIFE with no external dependencies and no globals. CSS is scoped under the .db-widget class prefix to avoid conflicts with your site styles.

The widget calls GET /api/v1/artworks?q=...&page=1 on the Dartabase public API. No authentication required. The script works in any browser environment including older LibGuide iframe contexts. It uses XMLHttpRequest rather than fetch for maximum compatibility.

Questions

Widget support or custom integrations: hello@dartabase.com