Embed Widget
Add size charts to any website with a simple script tag. Configure options below and see a live preview.
Live Builder
Configuration
Try: mens-tops, womens-tops, mens-gloves
Reduces padding for smaller spaces
Embed Code
<div data-chart="mens-tops"></div>
<script src="https://www.sizecharts.dev/embed/size-charts.js" data-api="https://www.sizecharts.dev"></script>Preview
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://www.sizecharts.dev");More Examples
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.