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 allows you to add a complete product catalog, shopping cart, checkout, and customer portal to any website. Your customers can browse products, configure options, place orders, and manage their accounts without leaving your site.

Integration Methods

TimberCloud supports two integration methods to fit your needs:

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

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

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: Category filtering and text search to help customers find products
• Pagination: Navigate through large product catalogs efficiently
• 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
• Quote Requests: Allow customers to request custom quotes

Checkout & Payments

• Secure Checkout: PCI-compliant payment processing via Stripe
• Guest Checkout: Allow orders without registration
• Multiple Payment Methods: Credit cards and saved payment methods
• Order Confirmation: Immediate order confirmation and receipts

Customer Accounts

• User Registration: Customer account creation
• Login/Logout: Secure authentication
• Password Reset: Self-service password recovery
• Profile Management: Update account details
• Payment Methods: Save and manage payment methods
• Order History: View past orders and order details
• Order Tracking: Track order status

Technical Features

• Real-time Updates: Live data synchronization via Socket.io
• Responsive Design: Mobile-first design that works on all devices
• Multi-tenant: Company-based routing with slug-based URLs
• Branding: Uses your company's primary color from settings

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 process completes
• User authentication functions properly

That's it! Your storefront is now live.

Requirements

• An active TimberCloud subscription
• Products configured in your TimberCloud catalog
• Stripe payment settings configured (for checkout)
• 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 and configuration options
• API Reference - PostMessage communication and URL parameters