A chat widget that provides a conversational interface for users to interact with an AI assistant. It displays as a floating button in the bottom right corner of the screen that expands into a chat window when clicked.
This widget doesn't require any attributes to function. It automatically positions itself in the bottom right corner of the screen.
<!-- Basic chat widget -->
<wg-chat></wg-chat>
A cart indicator widget that displays the number of items in a shopping cart. It shows a shopping cart icon with a badge indicating the item count, and provides buttons to increment and decrement the count.
| Prop/Attribute | Type | Default | Description |
|---|---|---|---|
| initial-value | number | 0 | The starting value for the cart item count |
<!-- Basic cart indicator starting at 0 -->
<wg-cart-indicator></wg-cart-indicator>
<!-- Cart indicator with custom initial value -->
<wg-cart-indicator initial-value="3"></wg-cart-indicator>
A simple counter widget that allows users to increment and decrement a numeric value. It displays the current count in a card with plus and minus buttons to adjust the value.
| Prop/Attribute | Type | Default | Description |
|---|---|---|---|
| initial-value | number | 0 | The starting value for the counter |
<!-- Basic counter starting at 0 -->
<wg-counter></wg-counter>
<!-- Counter with custom initial value -->
<wg-counter initial-value="10"></wg-counter>
A product card widget that displays product information in an attractive card format. It shows the product image, title, rating, price, and an "Add to cart" button.
| Prop/Attribute | Type | Description |
|---|---|---|
| image | string | URL of the product image: although relative paths are supported, use absolute paths as much as possible. |
| title | string | Title/name of the product |
| price | number | Price of the product (without $) |
<!-- Basic product card -->
<wg-product-card
image="https://example.com/images/products/apple-watch.png"
price="599"
title="Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport"
></wg-product-card>