Embedding

The embed lets you put your full HotCrate catalog directly on your own website. Visitors browse, add items to the Crate, and submit inquiries - all without leaving your site.

Getting the embed code

1. Go to Settings in the sidebar.
2. Find the Embed section.
3. Copy the snippet.

Two embed options are available:

• iFrame - a simple iFrame tag. Easiest to add to most website builders (Squarespace, Wix, Webflow, etc.).
• Script - a JavaScript embed that can be placed in a <div>. Renders inline without a fixed-height frame.

Which embed should I use?

Both options show the same live catalog. The difference is how they load.

• iFrame puts your catalog in a fixed-height frame. It works on virtually every website builder, including ones that restrict custom code. Pick this if you are not sure, or if your host only offers a simple embed block.
• Script loads your catalog inline, sizes itself to the page automatically (no fixed height), and adds a search-friendly copy of your gear list behind the scenes so search engines can index what you rent. Pick this on hosts that allow custom code, such as Webflow, WordPress, Shopify, and Squarespace (Business plan).

Either way, the embed degrades gracefully. If a visitor has JavaScript turned off, they still see a link to your full catalog instead of an empty space.

Where the embed works

The embed works on any website that allows custom HTML or JavaScript snippets. This includes Squarespace, Wix, Webflow, WordPress (with an HTML block), custom-built sites, and most landing-page tools.

Catalog and embed parity

The embed shows exactly the same inventory, categories, and Crate as your public catalog. Item visibility, availability, and pricing are identical in both views. When you update your catalog, the embed reflects the changes automatically.

Embed theme

In Settings you can choose a light or dark theme for the embed independently of the catalog. You can also set a separate accent color for the embed.

Checking the script embed

The script embed adds a hidden, search-friendly copy of your catalog and structured data (schema.org markup) to your page, on top of the live catalog visitors see. Because that copy is hidden from view, it is worth confirming it loaded. This only applies to the Script embed - the iFrame embed has nothing to check.

1. Publish the page with the embed so it has a public URL. Online validators need a live page to read.
2. Confirm the catalog appears on the page and resizes to fit.
3. Run the page URL through a structured-data validator:
   • Schema Markup Validator - paste your page URL and confirm an ItemList containing your Product items is detected.
   • Google Rich Results Test - paste the same URL to see how Google reads the markup.
4. If you prefer to check by hand, open your browser's developer tools and look in the page for a <script type="application/ld+json"> block and a hidden hc-seo-content section listing your items.

If the validator finds your items, search engines can read your catalog. If it finds nothing, make sure your catalog is set to Public (a private catalog returns an empty list) and that your host runs custom scripts directly in the page rather than inside its own frame. See Embed not working for more.

Related

• Sharing your catalog - catalog link and visibility
• Rate Card - a separate dense gear-list extension