Embedding Components

Learn how to embed Patchwork components on any website.

Basic Embedding

Step 1: Add the Loader Script

<script src="https://api.patchwork.run/tapestry/loader.js"></script>

Step 2: Add Your Component

<tapestry-component component-id="your-component-uuid"></tapestry-component>

That’s it! Your component will load automatically.

Version Control

Use Published Version (Recommended)

For production, always use the published version:

<tapestry-component component-id="your-component-id" version="published">
</tapestry-component>

This ensures your users see the stable, published version.

Use Latest Draft (Development Only)

Without a version attribute, the latest draft loads:

<tapestry-component component-id="your-component-id"></tapestry-component>

Note: Only use this for testing! In production, always specify version="published".

Passing Data via Attributes

You can pass dynamic data to your components using HTML attributes. Any attribute you add (except component-id, version, and api-url) becomes a template variable.

Example: Personalized Greeting

If your component uses Handlebars template variables:

<!-- In your component HTML -->
<div class="greeting">
  <h1>Welcome back, {{userName}}!</h1>
  <p>Last login: {{lastLogin}}</p>
</div>

Pass values via attributes when embedding:

<tapestry-component
  component-id="greeting-abc123"
  version="published"
  user-name="Alice"
  last-login="November 14, 2024"
>
</tapestry-component>

Note: Attribute names are automatically converted from kebab-case to camelCase (e.g., user-name → userName).

Example: Dynamic Pricing Card

<tapestry-component
  component-id="pricing-xyz789"
  version="published"
  plan-name="Professional"
  price="49"
  billing-period="month"
  features='["Unlimited projects", "24/7 support", "API access"]'
>
</tapestry-component>

You can even pass JSON strings for complex data structures!

Configuration

Configure the loader globally using window.TAPESTRY_CONFIG:

<script>
  window.TAPESTRY_CONFIG = {
    apiBaseUrl: "https://api.patchwork.run",
    debug: true, // Enable for development
  };
</script>
<script src="https://api.patchwork.run/tapestry/loader.js"></script>

Configuration Options

apiBaseUrl - API endpoint URL (default: auto-detected)
debug - Enable debug logging (default: false)
retryAttempts - Number of retry attempts (default: 3)
timeout - Request timeout in milliseconds (default: 10000)

Multiple Components

You can embed multiple components on one page:

<script src="https://api.patchwork.run/tapestry/loader.js"></script>
 
<tapestry-component
  component-id="header-123"
  version="published"
></tapestry-component>
<tapestry-component
  component-id="pricing-456"
  version="published"
></tapestry-component>
<tapestry-component
  component-id="footer-789"
  version="published"
></tapestry-component>

Each component is isolated with its own:

Shadow DOM (no style conflicts)
Analytics tracking
Error handling

Per-Component API URL

Override the API URL for a specific component:

<tapestry-component
  component-id="abc-123"
  api-url="https://custom-api.example.com"
>
</tapestry-component>

Browser Support

✅ Chrome 53+ (July 2016)
✅ Firefox 63+ (October 2018)
✅ Safari 10.1+ (March 2017)
✅ Edge 79+ (January 2020)

Coverage: ~98% of global users

Next Steps

Component Builder Template Variables