Embed Widget
Add size charts to any website with a simple script tag.
Code Generator
<!-- Size Chart Widget -->
<div data-chart="mens-tops"></div>
<script src="https://your-domain.com/embed/size-charts.js"
data-api="https://your-domain.com"></script>Configuration Options
| Attribute | Type | Default | Description |
|---|---|---|---|
data-chart | string | - | Chart slug (required) |
data-theme | "light" | "dark" | light | Color theme |
data-unit | "in" | "cm" | in | Initial unit |
data-compact | "true" | false | Smaller padding |
data-api-key | string | - | API key (if required) |
JavaScript API
The widget exposes a global SizeCharts object for programmatic control:
// Re-initialize all widgets
SizeCharts.init();
// Initialize a specific container
SizeCharts.render(document.getElementById("my-chart"));
// Set API URL at runtime
SizeCharts.setApiUrl("https://api.example.com");Live Demos
Troubleshooting
Widget shows "Chart not found"
Ensure the chart is published and the slug is correct. Use the API to verify: GET /api/v1/size-charts?slug=your-slug
Widget shows "Failed to load chart"
Check that the data-api attribute on the script tag points to your API server. If authentication is required, include a data-api-key attribute.
CORS errors in console
Add the embedding domain to CORS_ALLOWED_ORIGINS in your environment variables.