@souldi/try-on 0.1.89 → 0.1.90
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -4
- package/dist/widget.mjs +1 -1
- package/dist/widget.umd.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -39,7 +39,6 @@ Or load directly via CDN:
|
|
|
39
39
|
VirtualTryOn.createButton({
|
|
40
40
|
containerId: 'try-on-jacket',
|
|
41
41
|
garmentUrl: 'https://your-cdn.com/images/jacket.png',
|
|
42
|
-
targetImageId: 'product-image', // optional: auto-swaps this <img> with the result
|
|
43
42
|
});
|
|
44
43
|
</script>
|
|
45
44
|
```
|
|
@@ -54,10 +53,18 @@ That's it. Your customers can now try on clothes with AI.
|
|
|
54
53
|
2. First-time users verify their email (magic link OTP — no passwords)
|
|
55
54
|
3. They upload a photo of themselves
|
|
56
55
|
4. AI generates a realistic try-on image in seconds
|
|
57
|
-
5. The result
|
|
56
|
+
5. The result opens in the widget's own dialog, over your page
|
|
58
57
|
|
|
59
58
|
Returning users skip straight to step 4 — their session and photo are remembered.
|
|
60
59
|
|
|
60
|
+
The result surface is the widget's and only the widget's: an accessible
|
|
61
|
+
`<dialog>` inside an isolated Shadow DOM, appended to `<body>`. It reads none of
|
|
62
|
+
your CSS selectors and never touches your product images, so a theme change
|
|
63
|
+
cannot break it — and there is nothing to point it at. From inside it a customer
|
|
64
|
+
can refine the result, switch to the garment's back view when there is one, and
|
|
65
|
+
reopen it after closing; the try-on button becomes **View try-on** once a result
|
|
66
|
+
exists.
|
|
67
|
+
|
|
61
68
|
---
|
|
62
69
|
|
|
63
70
|
## Configuration
|
|
@@ -116,7 +123,11 @@ Add a try-on button for a specific garment. Call once per product on the page.
|
|
|
116
123
|
| `containerId` | `string` | Yes | ID of the DOM element where the button will render |
|
|
117
124
|
| `garmentUrl` | `string` | Yes | Public URL of the garment image |
|
|
118
125
|
| `internalId` | `string` | No | Your internal/vendor id for this garment; correlated server-side |
|
|
119
|
-
|
|
126
|
+
|
|
127
|
+
> **Removed in 0.2.0:** `targetImageId`. It named an `<img>` on your page for the
|
|
128
|
+
> widget to overwrite with the result, and it is gone — the widget shows every
|
|
129
|
+
> result in its own dialog instead (see [How It Works](#how-it-works)). Passing
|
|
130
|
+
> it is harmless and ignored, and logs one console warning. Do not re-add it.
|
|
120
131
|
|
|
121
132
|
---
|
|
122
133
|
|
|
@@ -204,7 +215,6 @@ All UI is rendered inside a **Shadow DOM**, so your site's CSS will never leak i
|
|
|
204
215
|
VirtualTryOn.createButton({
|
|
205
216
|
containerId: 'try-on-btn',
|
|
206
217
|
garmentUrl: 'https://your-cdn.com/images/jacket-flat.png',
|
|
207
|
-
targetImageId: 'product-image',
|
|
208
218
|
});
|
|
209
219
|
</script>
|
|
210
220
|
</body>
|