TankBud species cards · HTML embed

Live species cards for any site.

Writing about a fish or plant you stock or keep? Paste a snippet from its catalog page and your site shows a card with the name, a short blurb and quick care facts, linked to the full care guide. Nothing to install or sign up for, and the content stays current from the catalog.

Browse the catalog On WordPress? Use the plugin

Free · No account · One small script

What your visitors see

This card is live, rendered by the same script you would paste. It inherits your site's font, brings its own colors, and adapts its layout to wherever you put it.

Neon tetra care guide on TankBud

Get the snippet

Every species and plant page in the catalog has a copy-ready snippet in its "Add to your site" section. It looks like this:

<div data-tankbud="species/neon-tetra">
  <a href="https://tankbud.com/species/neon-tetra">Neon tetra care guide on TankBud</a>
</div>
<script async src="https://tankbud.com/tankbud-card-embed-v1.js"></script>

The link inside the div is what shows until the card loads, and what search engines index. The slug is the last part of a care guide's URL: tankbud.com/species/neon-tetra becomes species/neon-tetra. Find any fish or plant in the catalog and its page has the finished snippet ready to copy. The script line is needed once per page, extra copies do nothing.

Options

Add data attributes to the div to tune the card. Anything you leave off uses the default; anything invalid falls back to it.

Attribute	Values	Default	What it does
data-show-common-name	yes · no	yes	Common name line. If both name lines are off, the common name shows anyway.
data-show-scientific-name	yes · no	yes	Scientific name line.
data-show-alt-names	yes · no	no	An also-called line with other trade names.
data-show-blurb	yes · no	yes	The short description.
data-facts	none · inline · list	inline	Care facts as one dotted line, a stacked list, or nothing. Turning the blurb and facts both off gives the one-line compact card.
data-link-style	link · button	link	How the care guide link renders. The compact card always uses the plain link.
data-background	#rrggbb · none	#f2f6f6	Card background. none removes the box so the card sits directly on your page.
data-accent	#rrggbb	TankBud teal	Link and button color.
data-text-tone	auto · ink · light	auto	Text color. auto picks light text on dark backgrounds.

For example, a borderless plant card with stacked facts, a button, and light text so it reads on this page's dark background:

<div
  data-tankbud="plants/java-fern"
  data-facts="list"
  data-link-style="button"
  data-background="none"
  data-text-tone="light"
>
  <a href="https://tankbud.com/plants/java-fern">Java fern care guide on TankBud</a>
</div>

Java fern care guide on TankBud

Where it works

Shopify
In your Shopify admin, open Online Store, then Themes, then Customize. Add a Custom Liquid section (or block) where you want the card, paste the snippet, and save. Works on any Online Store 2.0 theme, which includes every current free theme. The fallback link ships in your page HTML, so search engines see it too.
Squarespace
Add a code block and paste the snippet. Squarespace runs custom code on the Business plan and up.
Wix
Add an Embed HTML element and paste the snippet. Wix renders embeds inside a frame, so size the element to fit the card.
Webflow
Add an Embed element and paste the snippet.
Anywhere else
Paste the snippet wherever your site accepts HTML. The script tag is needed once per page, extra copies do nothing.

Adding cards from an import script

If your product pages are built by a script (a weekly CSV import, a feed, a template), you do not have to look up slugs one at a time. Fetch the catalog index and you get every species and plant as JSON: kind, slug, common name, scientific name, other names, and the care guide URL. Match your product names against the name fields to find the slug, then write the snippet (or the WordPress shortcode) into your template.

https://tankbud.com/catalog-index.json

It is one request, cached for a day at the edge, fine to pull on every build. A product that matches nothing in the index just skips the card, and a slug the catalog no longer has renders nothing on your page rather than a broken box.

Caching and privacy

The script is small, one request served through the same Cloudflare edge network as the rest of tankbud.com. Each card makes one more request for its data, and nothing else loads. The script sets no cookies, runs no analytics on your pages, and talks to no third parties.

If the card cannot load for a moment (a network hiccup on either end), your page just shows the plain link from the snippet. A slug that does not exist in the catalog renders nothing at all. If the card never appears, check the slug against the care guide's URL and make sure the script line made it into the page. Running WordPress? The plugin does the same job with server-side rendering and a picker in the editor.