Put your inventory on your own website

What your visitors get

• Every available piece, with its photo, size, material and thickness, and the same search and filters your storefront has.
• Your own font. The widget reads the font your website uses and wears it, and the background is transparent, so it sits inside your page rather than on top of it.
• Your accent colour, the one you set for your storefront.
• Sold pieces disappear on their own. Nothing to update by hand, ever.

What it deliberately does not do: it shows inventory only. There is no request form, no contact footer and no detail page inside the widget. A visitor who wants to ask about a piece uses the contact details already on your website, and each piece links to your storefront for the full view.

Set it up

1. 1

   Step 1. Open Settings and find Your website.

   • Owners and managers see it. If your plan does not include the widget, the section says so.
2. 2

   Step 2. Add the address of your website, exactly as people visit it.

   • If your site answers at both yourshop.com and www.yourshop.com, add both. A browser treats them as two different addresses.
   • Result: The address appears in the list. Pages on these addresses can show your inventory; a request from an address you have not listed is turned away.
3. 3

   Step 3. Create your key.

   • The full key is shown once, at that moment, and Settings keeps only a shortened form afterwards. Copy the snippet right then. You can always create a new key later; you cannot recover this one.
   • Result: Settings shows the snippet with your key and shop already filled in.
4. 4

   Step 4. Copy the snippet and paste it into your website where the inventory should appear.

   • Anywhere your website builder lets you paste HTML. The next section says where that is for the common builders.
   • Result: Your inventory appears on that page within a minute, sized to fit, in your site's font.

The snippet

It is a handful of lines. The first is where the inventory goes, the second is a small credit line under it that you can delete if you would rather not show it (nothing else changes when you do), and the script that follows loads the inventory.

<div id="rf-inventory"></div>
<p class="rf-credit" style="margin:8px 0 0;font-size:13px;opacity:.75"><a href="https://remnantflow.com/?utm_source=widget&amp;utm_medium=powered-by">Powered by RemnantFlow</a></p>
<script src="https://widget.remnantflow.com/v1/rf.js"
  data-rf-key="YOUR_KEY" data-rf-shop="your-shop"
  data-rf-target="#rf-inventory" defer></script>

Where to paste it

• WordPress: add a Custom HTML block where you want the inventory to appear and paste the snippet in.
• Squarespace: add a Code Block (needs a Business plan or above) and paste the snippet in.
• Webflow: drag in an Embed element and paste the snippet in.
• Wix: paste the snippet into an Embed HTML element (any plan). On free plans that element has a fixed height, so pick one tall enough for your inventory; with the Custom Code panel on paid plans, the section sizes itself.
• Any other builder: look for a block or element called HTML, Embed or Code. If yours has none, whoever built the site can paste it into the page for you.

Make it fit your site

• Width and placement are yours: the widget fills the space you put it in, and its height follows the inventory.
• Dark website? Add data-rf-theme="dark" to the script line and the inventory switches to light text on your dark page.
• Want the inventory in a specific element rather than where the snippet sits? Add data-rf-target="#some-id" to the script line, pointing at that element.
• Font and accent colour come from your site and your storefront settings on their own; there is nothing to set.

The layout inside the frame, the search bar, the filters and the cards, is the same on every site. Your site's own styling cannot reach inside it, and that is also what keeps the widget safe on your page.

If nothing shows up

5. 5

   Step 5. Check the address list in Settings against the address in the browser bar.

   • This is the usual cause. www.yourshop.com and yourshop.com are two addresses; a staging or preview address is a third. Settings also lists the addresses it turned away recently, which tells you exactly which one to add.
6. 6

   Step 6. Check the key.

   • A key that was revoked, or pasted with a character missing, shows nothing at all on purpose rather than an error on your page. Create a new key and paste the new snippet.
7. 7

   Step 7. Check your plan.

   • The widget is part of the Yard plan. On Shop the snippet stays quiet.