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.

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 is	A catalog/cart/checkout/portal widget you drop onto a site you already have	A complete multi-page marketing website that TimberCloud hosts for you
Where it lives	Inside your existing WordPress, Shopify, Wix, Squarespace, or custom site	Served by TimberCloud at `embed.timbercloud.com/site/your-slug` (or your custom domain)
Best for	You already have a website and just need ordering on it	You don't have a website (or want a fresh one) and want TimberCloud to host everything
Setup	Paste a script or iframe snippet	Built 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:

Method	Best For	Setup Complexity
Script Embed	Most websites, WordPress, SPAs	⭐ Easiest
Iframe Embed	Full control over container styling	⭐⭐ Easy

Method 1: Script Embed (Recommended)

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

Attribute	Required	Default	Description
`data-company`	✅ Yes	—	Your company slug
`data-theme`	No	`light`	Passed through to the iframe element only — see the note below
`data-width`	No	`100%`	Width of the embed
`data-height`	No	`800px`	Height 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>

With Integration Script (Recommended for Iframe)

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

Feature	Script Embed	Iframe Only	Iframe + Integration Script
Auto iframe creation	✅	❌	❌
Password reset handling	✅	❌	✅
SPA support	✅	❌	✅
Dynamic resizing	✅	❌	❌
URL cleanup	✅	❌	❌
Custom container styling	Limited	✅ Full	✅ Full
Lines of code	5	1-10	2-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: Support for product attributes and add-ons
Real-time Pricing: Dynamic pricing based on configurations
Order Add-ons: A dedicated step lets customers add upsell items (e.g. crating, rush fees) to their order
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
Order Confirmation: Immediate order confirmation and receipts

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

User Registration & Login: Secure customer account creation and authentication
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 — pagination, carrier rates, tracking, add-ons, and the profile gate — 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

Installation & Setup — Complete installation instructions for both methods
Customization — Styling, branding, and theme configuration
Storefront Features — The customer-facing experience in depth
API Reference — PostMessage communication and URL parameters
Your Website — Prefer a fully hosted site instead of embedding? Use the Site Builder.

Domain, Theme & SEO Installation & Setup