Embedding the Widget

The vviinn Widget (documentation) is a set of front-end web components you drop directly into your shop’s HTML — no backend integration needed. It authenticates with the read-only token from your site’s API credentials, so it can only read and search your catalog, never modify it.

1. Get your read-only token

Under Site → API Credentials in Panel, copy the Token value. If you don’t have one yet, or need to rotate it, use Reset API credentials → Generate new Read Only Token.

Tip

Because this token is read-only, it’s safe to expose in your shop’s public front-end code — it can’t be used to modify your catalog or configuration.

2. Load the widget script

Add the widget library to your page, once, before you use any of its components:

<script type="module" src="https://cdn.jsdelivr.net/npm/vviinn-widgets@latest/www/build/vviinn-widgets.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/vviinn-widgets@latest/www/build/vviinn-widgets.js"></script>

3. Add a widget component

Place the component where you want it to render, passing your token:

<vviinn-vpr-button
  token="YOUR_READ_ONLY_TOKEN"
  api-path="https://api.vviinn.com"
  product-id="YOUR_PRODUCT_ID"
  locale="en-US">
</vviinn-vpr-button>

• token — your site’s read-only token from step 1.
• api-path — https://api.vviinn.com in production.
• product-id — the product the component should act on (e.g. for recommendations on a product page).
• locale — e.g. en-US, de-DE.

Two components are confirmed available:

Component	Renders
<vviinn-vpr-button>	Similar Products recommendations
<vviinn-vps-button>	Visual Search

This page covers the confirmed basics — for the full component and attribute reference (including any components beyond these two), check the Widgets documentation or the vviinn-widgets package on npm, or ask support@vviinn.com.