Hover cards for gear links
Add one script and every link to a gear item on your page grows a preview card on hover — photo, brand, type and weight. Links added later by your site's own code are picked up automatically, and keyboard focus opens the card too.
<script src="https://trekkingarmory.com/embed.js" defer></script>Links must be absolute. A root-relative href points at your own domain, so it is left alone:
<a href="https://trekkingarmory.com/equipment/flash-air-2">Flash Air 2</a>Embed a single gear card
Drop one item straight into your page as a compact card. Useful in a review or a packing list where a hover card is not enough.
<iframe
src="https://trekkingarmory.com/embed/equipment/flash-air-2"
style="border:none;width:280px;height:104px"
title="Gear"
loading="lazy"></iframe>Embed a whole backpack
Show a full gear list with weights and totals. Pack owners also get this snippet from the Embed action in the pack menu.
<iframe
src="https://trekkingarmory.com/embed/backpacks/{backpackId}"
style="border:none;width:100%;min-width:600px;min-height:400px"
title="Backpack"
loading="lazy"></iframe>Good to know
- Only absolute links to this site are upgraded. Everything else on your page is untouched.
- Links rendered after page load work too, so React, Vue and other single-page sites need no extra wiring.
- A /uk/ link renders a Ukrainian card. Otherwise the language of your page is used, falling back to English. Gear names and brands are catalog data and stay as written.
- If your site sends a Content-Security-Policy, allow this origin for both the script and the frame:
script-src https://trekkingarmory.com;
frame-src https://trekkingarmory.com;