Virtusize Web Component

Web components for integrating Virtusize sizing and fit guidance into any site or framework.

Components

<vs-widget>

Main Virtusize widget container. Renders the inpage widget (or modal variant) and drives the integration with your Virtusize config and product.

| Property | Type | Required | Description | | ----------- | ------ | -------- | ---------------------------------------------------------------------------------------- | | apiKey | string | Yes | Virtusize API key. | | config | object | No | Virtusize integration config (see below). | | productId | string | Yes | External product ID for the current product. | | widget | string | Yes | Container ID for this instance (e.g. vs-inpage, vs-inpage-mini, vs-inpage-luxury). |

Config shape:

• region – e.g. 'jp'
• env – 'production' or 'staging'
• language – e.g. 'en'
• allowedLanguages – { label, value }[]
• productVersion (optional) – product data version

If config is not provided, a sensible default is used internally. When productId or config change, the widget re-runs the integration for the new product.

Example (HTML):

<vs-widget id="my-widget" api-key="YOUR_VIRTUSIZE_API_KEY" config='{"region":"jp","env":"production","language":"en"}' product-id="YOUR_PRODUCT_ID" widget="vs-inpage"></vs-widget>

Example (Vue):

<script setup lang="ts">
  import 'virtusize-web-component';
</script>

<template>
  <vs-widget product-id="YOUR_PRODUCT_ID" api-key="YOUR_VIRTUSIZE_API_KEY" widget="vs-inpage"></vs-widget>
</template>

<style scoped></style>

<vs-inpage-mini>

Placeholder for the Virtusize inpage mini widget. The actual content is injected by the Virtusize integration when vs-widget is used on the page. No props.

<vs-inpage-mini />

<vs-inpage-luxury>

Placeholder for the Virtusize inpage luxury widget. Content is injected by the Virtusize integration when vs-widget is used on the page. No props.

<vs-inpage-luxury />

<vs-smart-table>

Placeholder for the Virtusize smart table (size/fit table) widget. Content is injected by the Virtusize integration when vs-widget is used. No props.

<vs-smart-table />

Usage

1. Load the script (after build):

   <script type="module" src="/build/virtusize-web-component.esm.js"></script>
   <script nomodule src="/build/virtusize-web-component.js"></script>

2. Use at least one <vs-widget> with valid config and productId so the Virtusize integration runs. Add <vs-inpage-mini>, <vs-inpage-luxury>, and/or <vs-smart-table> where you want those widgets to appear.

3. Framework usage
   In Vue (and similar), register the tags as custom elements so they aren’t treated as unknown:

   app.config.compilerOptions.isCustomElement = tag => tag.startsWith('vs-');

   Then use the components in your templates as in the examples above.

Development

npm install
npm start

Runs the Stencil dev server with watch and serve (e.g. src/index.html for the demo).

Build

npm run build

Output is in dist/ (and loader/ if configured).

Tests

npm test

License

MIT