TimberCloudDocs

Embeddable Storefront

Transform your website into a powerful e-commerce platform with TimberCloud's Embeddable Storefront — a fully-featured, white-label solution that integrates seamlessly with any website.

What is the Embeddable Storefront?

The TimberCloud Embeddable Storefront lets you add a complete product catalog, shopping cart, checkout, and customer portal to any existing website. Your customers can browse products, configure options, place orders, and manage their accounts without leaving your site.

It's white-label and driven by your TimberCloud company settings, so the storefront matches your brand and uses the same product catalog you manage in the dashboard.

Availability: The full commerce storefront — cart, Stripe checkout, customer accounts, live carrier rates, the Visual Configurator, and paying online — is Commerce and up (paid plans). On the Free plan the storefront runs as a Request-a-Quote inquiry form (no cart, accounts, or payments). See The Free Inquiry Storefront.

Embeddable storefront vs. hosted website

TimberCloud gives every merchant two front-ends built from the same catalog — pick whichever fits how you want customers to find you:

Embeddable Storefront (this page)Hosted Website (Site Builder)
What it isA catalog/cart/checkout/portal widget you drop onto a site you already haveA complete multi-page marketing website that TimberCloud hosts for you
Where it livesInside your existing WordPress, Shopify, Wix, Squarespace, or custom siteServed by TimberCloud at embed.timbercloud.com/site/your-slug (or your custom domain)
Best forYou already have a website and just need ordering on itYou don't have a website (or want a fresh one) and want TimberCloud to host everything
SetupPaste a script or iframe snippetBuilt in the dashboard under Website; AI can generate a starter site for you

Tip: You don't have to choose one forever — both pull from the same catalog. Many shops run the hosted website and embed the storefront on other pages. See Your Website for the hosted option.

Integration Methods

The embeddable storefront supports two integration methods to fit your needs:

MethodBest ForSetup Complexity
Script EmbedMost websites, WordPress, SPAs⭐ Easiest
Iframe EmbedFull control over container styling⭐⭐ Easy

The simplest way to add the storefront — just add a container div and include the script:

<div id="timbercloud-embed"></div>
<script
  src="https://embed.timbercloud.com/embed.js"
  data-company="your-company-slug"
  data-theme="light"
  data-width="100%"
  data-height="800px"
  defer
></script>

That's it! The script automatically:

  • ✅ Creates and configures the iframe
  • ✅ Handles password reset email returns
  • ✅ Manages SPA routing
  • ✅ Cleans URL parameters after actions
  • ✅ Supports dynamic resizing

Script Options

AttributeRequiredDefaultDescription
data-company✅ Yes—Your company slug
data-themeNolightPassed through to the iframe element only — see the note below
data-widthNo100%Width of the embed
data-heightNo800pxHeight of the embed

Important: data-theme does not control whether the storefront renders in light or dark mode. The script simply sets it as an attribute on the iframe; the storefront UI doesn't read it. The storefront's light/dark chrome is controlled by your theme mode in TimberCloud settings, not by the embed code. To switch your storefront to dark mode, change the theme setting in the dashboard rather than editing data-theme. See Customization for branding and theme details.

Method 2: Iframe Embed

For full control over container styling, use a direct iframe:

<div style="
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
  padding-left: 16px;
  padding-right: 16px;
">
  <iframe
    id="timbercloud-embed"
    src="https://embed.timbercloud.com/your-company-slug"
    width="100%"
    height="800"
    style="border: none; border-radius: 8px; display: block;"
    title="Product Catalog"
    allow="payment"
  ></iframe>
</div>

Add the integration script for full functionality:

<iframe
  id="timbercloud-embed"
  src="https://embed.timbercloud.com/your-company-slug"
  width="100%"
  height="800"
  style="border: none; border-radius: 8px;"
  allow="payment"
></iframe>

<script src="https://embed.timbercloud.com/timbercloud-integration.js"></script>

Quick Comparison

FeatureScript EmbedIframe OnlyIframe + Integration Script
Auto iframe creation✅❌❌
Password reset handling✅❌✅
SPA support✅❌✅
Dynamic resizing✅❌❌
URL cleanup✅❌❌
Custom container stylingLimited✅ Full✅ Full
Lines of code51-102-12

Recommendation: Use Script Embed for most use cases. Use Iframe Embed only when you need complete control over container styling.

Key Features

Product Catalog

  • Full Product Browsing: Display your entire product line with images and descriptions
  • Search & Filter: Text search and filtering to help customers find products
  • Pagination & Page-Size Selector: Navigate large catalogs with a page-size selector (12 / 24 default / 48 / 96 / All)
  • Responsive Grid: Products display beautifully on all screen sizes

Shopping Experience

  • Persistent Shopping Cart: Cart contents saved across sessions
  • Product Configuration: Attributes with option photos, hover image previews, and fractional/decimal measurement fields with live range validation
  • Visual Configurator (2D/3D preview): For cabinet, panel, and frame products, shoppers see and adjust the piece layout as they configure it — the same drawing appears read-only on the order page
  • Real-time Pricing: Dynamic pricing based on configurations
  • Add-ons: Optional extras both per product (on the product page) and order-wide (a dedicated step for crating, rush, delivery surcharges, and more)
  • Product Image Gallery: Multi-image galleries with thumbnails and a full-screen lightbox
  • Reviews: Star ratings and written reviews on product pages, plus review prompts on delivered orders
  • Collection / Category Lock: Optionally keep an order to one compatible product line once the cart has items
  • Customer-Exclusive Products: Show negotiated or wholesale items only to the signed-in customers they're assigned to
  • Quote Requests: Allow customers to request custom quotes (Quote-Based selling mode)

Checkout & Payments

  • Secure Checkout: PCI-compliant payment processing via Stripe
  • Live Carrier Shipping Rates: At checkout, customers can pick carriers and fetch live small-parcel and LTL freight rates, then choose a rate that's applied to the order total
  • Guest Checkout: Allow orders without registration
  • Saved Payment Methods: Credit cards and saved cards for returning customers
  • Pay Online Anytime: Customers can pay an outstanding balance, an accepted quote, or a remaining balance right from their order page — and download the invoice PDF
  • Order Confirmation: Immediate order confirmation and receipts
  • Test Mode: Trial the full checkout with a Stripe test card before you go live — an amber banner makes it obvious no real money is moving

Note: Checkout and card payments are available on paid plans only. On the Free plan payments are turned off and pricing is hidden, so the storefront is inquiry/quote-only — customers browse and submit a "Request Quote" / inquiry instead of paying. To accept payments, upgrade to a paid plan.

Customer Accounts

  • Flexible Sign-In: Email and password, a passwordless magic-link email, or Continue with Google — see Sign-in Options
  • Customer-Profile Onboarding: Logged-in shoppers complete a short profile before they can place an order, so every order has complete customer details
  • Password Reset: Self-service password recovery
  • Profile & Payment Methods: Update account details and manage saved cards
  • Order History: View past orders and order details
  • Real-time Order Tracking: Order pages show live tracking status, a carrier event timeline, and carrier links, auto-refreshing about every 60 seconds

Technical Features

  • Real-time Updates: Live data synchronization via Socket.io
  • Mobile-Responsive Design: Mobile-first layout with comfortable touch targets that works on phones, tablets, and desktops
  • Dark-Mode Chrome: The storefront supports a dark theme, set from your TimberCloud theme setting (not from embed code)
  • Multi-tenant: Company-based routing with slug-based URLs
  • White-Label Branding: Uses your company's brand colors and theme from settings

For a deeper look at the customer-facing experience — the Visual Configurator, option photos, reviews, paying online, pagination, carrier rates, tracking, and add-ons — see Storefront Features.

Use Cases

1. Add E-commerce to an Existing Website

Embed a complete storefront on your WordPress, Squarespace, Wix, or custom website without rebuilding anything.

2. B2B Customer Portal

Give your wholesale customers a dedicated ordering portal on your website where they can browse products, place orders, and track their order history.

3. Product Catalog Widget

Add a browsable product catalog to specific pages on your site, allowing customers to explore and purchase directly.

4. Dealer/Distributor Portals

Create branded ordering portals for your distribution network with company-specific routing.

Quick Start

Step 1: Get Your Company Slug

Find your company slug in your TimberCloud account under Settings → Company.

Step 2: Choose Your Method

Option A: Script Embed (Recommended)

<div id="timbercloud-embed"></div>
<script
  src="https://embed.timbercloud.com/embed.js"
  data-company="your-company-slug"
  data-theme="light"
  data-width="100%"
  data-height="800px"
  defer
></script>

Option B: Iframe Embed

<iframe
  id="timbercloud-embed"
  src="https://embed.timbercloud.com/your-company-slug"
  width="100%"
  height="800"
  style="border: none; border-radius: 8px;"
  allow="payment"
></iframe>

<script src="https://embed.timbercloud.com/timbercloud-integration.js"></script>

Step 3: Test Your Integration

Visit your page and verify:

  • Products load and display correctly
  • Cart functionality works
  • Checkout (or Request Quote) completes
  • User authentication functions properly

That's it! Your storefront is now live.

Requirements

  • A TimberCloud account with products configured in your catalog
  • A paid plan with Stripe connected if you want to accept payments at checkout (the Free plan runs the storefront in inquiry/quote-only mode)
  • HTTPS on your website (required for payment processing)

Browser Support

The Embeddable Storefront works on all modern browsers:

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+
  • Mobile browsers (iOS 14+, Android 10+)

Next Steps

PreviousThemes & Legacy SiteNextInstallation & Setup