v1.0.0

RecordSeek Developer Kit

Add a RecordSeek button to any web page with one script tag. Visitors click it and the RecordSeek share app opens with the source (and optionally a person) ready to save to FamilySearch, Ancestry or as a citation.

Quick start

<script src="https://recordseek.com/sdk/v1/recordseek.js" defer></script>

<div class="recordseek"></div>

That is all: with no attributes the button captures the current page like the RecordSeek browser extension does. Pass what you know with data-* attributes:

<div class="recordseek"
     data-first-name="Dovy" data-last-name="Paukstys" data-birth-date="1980"
     data-bg-color="#1f6f43" data-font-color="white" data-url="./"></div>

Versioned URLs

`https://recordseek.com/sdk/v1/recordseek.js`	Moving: always the latest 1.x release (bug fixes, no breaking changes).
`https://recordseek.com/sdk/1.0.0/recordseek.js`	Pinned: never changes, so you can add a Subresource Integrity hash.

<script src="https://recordseek.com/sdk/1.0.0/recordseek.js"
        integrity="sha384-…" crossorigin="anonymous" defer></script>

Content-Security-Policy: allow script-src https://recordseek.com. The button is created with the DOM API (no inline scripts or styles from strings are executed), and the stylesheet is a plain <style> element; if your CSP forbids inline styles, set data-style="none" and style the button yourself.

Attributes

Attribute names are case- and dash-insensitive: data-first-name, data-firstName and data-first_name are the same. Unknown data-* attributes are ignored and never sent. Precedence for each field: explicit data-* > genscrape result > generic page scrape.

Attribute	Type	Aliases	Description
`data-url`	Source	—	Page to cite. Relative values resolve against the current page. Default: scraped, else the current URL.
`data-title`	Source	—	Source title. Default: scraped, else the page title.
`data-citation`	Source	—	Ready-made citation text. Default: scraped.
`data-notes`	Source	—	Notes to attach. Default: selected text, else the page description.
`data-tags`	Source	—	Comma-separated tags.
`data-given-name`	Person	`firstname` `first` `given` `forename`	Given (first) name of the person.
`data-surname`	Person	`lastname` `last` `familyname`	Surname (family name).
`data-gender`	Person	`sex`	Male or Female.
`data-birth-date`	Person	`dob`	Birth date, any format (for example 1980 or 12 Mar 1980).
`data-birth-place`	Person	—	Birth place.
`data-death-date`	Person	`dod`	Death date.
`data-death-place`	Person	—	Death place.
`data-father-given-name`	Person	—	Father's given name.
`data-father-surname`	Person	—	Father's surname.
`data-mother-given-name`	Person	—	Mother's given name.
`data-mother-surname`	Person	—	Mother's surname.
`data-spouse-given-name`	Person	—	Spouse's given name.
`data-spouse-surname`	Person	—	Spouse's surname.
`data-bg-color`	Button	`bg` `background`	Button background (any CSS color); sets --recordseek-bg. Default #1f6f43.
`data-font-color`	Button	`color`	Button text color (any CSS color); sets --recordseek-fg. Default #ffffff.
`data-label`	Button	`text` `buttontext`	Button text. Default "RecordSeek".
`data-size`	Button	—	sm, md (default) or lg.
`data-shape`	Button	—	rounded (default), pill or square.
`data-icon-type`	Button	`icon`	color (default, full-color mark), white (single-color white mark) or none (text only).
`data-icon-position`	Button	—	start (default) or end.
`data-class`	Button	—	Replaces the default button classes entirely (space-separated). Default styles then do not apply.
`data-style`	Button	—	none: do not inject the default stylesheet (you style .recordseek-button yourself).
`data-partner`	Other	—	Your short partner id (letters, digits, . _ -), used for attribution.
`data-scrape`	Other	—	Set to false to disable automatic page scraping for this button.

Automatic scraping

By default the kit reads the current page the way the RecordSeek extension does: url, a title (the first <h1> when it is longer than the document title), a citation (first paragraph of an element with class citation), and notes (the visitor’s selected text, else the meta/Open Graph description). On genealogy sites it recognizes, a separate genscrape.js (loaded lazily from the same folder as recordseek.js) also extracts the person, relatives and facts:

Ancestry (records and trees)
BillionGraves
FamilySearch (records and tree persons)
Find a Grave
Findmypast (records and trees)
Genealogie Online
MyHeritage (records and persons)
Open Archives (openarch.nl)
WeRelate
WikiTree

On other sites only the generic scrape applies, so for best results pass person data with data-* attributes. Set data-scrape="false" to turn all scraping off for a button. If the scrape is slower than 2.5 seconds the popup opens anyway with what is available.

Styling

The button is a normal <button type="button"> inside your element, with these classes:

recordseek-button plus recordseek-button--sm|md|lg and recordseek-button--rounded|pill|square
recordseek-button__icon (the inline SVG mark) and recordseek-button__label (the text)

The default stylesheet (<style id="recordseek-sdk-style">, injected once) wraps every selector in :where(), so it has zero specificity: any rule of yours wins, no !important needed. It reads two CSS variables, --recordseek-bg and --recordseek-fg, which data-bg-color and data-font-color set on the button.

.recordseek-button { background: navy; border-radius: 2px; font-family: Georgia, serif; }

Other options: data-class="my-btn other" replaces the default classes entirely (the default styles then do not apply); data-style="none" or window.RecordSeekConfig = { injectStyles: false } skips injecting the stylesheet. Icons: data-icon-type color (default), white or none; data-icon-position start or end. All icons are inline SVG, with no network requests; the logo files are also published as recordseek-mark.svg and recordseek-mark-white.svg.

JavaScript API

RecordSeek.version            // "1.0.0"
RecordSeek.scan(root?)        // render buttons under root (idempotent); runs automatically on load and for added elements
RecordSeek.button(el, data?)  // render a button in one element
RecordSeek.open({ givenName: 'Jane', surname: 'Doe', url: location.href })  // open RecordSeek programmatically

// optional, before the script loads:
window.RecordSeekConfig = { base: 'http://localhost:9000/', partner: 'my-site', injectStyles: true };

The script never throws into your page.

Playground

Privacy

The script sets no cookies, uses no storage and loads no trackers on your page. Nothing is sent to RecordSeek until a visitor clicks the button; then the share app opens with the captured source, any person details you provided, and a small attribution (the SDK version, your site’s hostname and optional partner id) so we can see which integrations are used.