Available Components

Chat Widget

Description

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.

Props/Attributes

This widget doesn't require any attributes to function. It automatically positions itself in the bottom right corner of the screen.

Usage Example

<!-- Basic chat widget -->
<wg-chat></wg-chat>

Customization

The chat widget can be customized using CSS variables. Here's a list of supported customization options:

CSS Variable	Description	Default Value
--sc-chat-variant	Controls the visual style of the chat widget. Options: 'flat' or 'default'	'default'
--sc-chat-z	Sets the z-index of the chat widget to control its stacking order	50
--sc-chat-chat-icon	URL to a custom icon for the chat button	Default chat icon
--sc-chat-send-icon	URL to a custom icon for the send button	Default send icon
--sc-chat-logo	URL to a custom logo displayed in the chat header	No logo
--sc-chat-message-placeholder	Custom placeholder text for the message input field	"Type your message..."

Example

You can customize the chat widget by adding these CSS variables to your stylesheet:

:root {
    /* Change to flat design with borders */
    --sc-chat-variant: "flat";

    /* Ensure chat appears above other elements */
    --sc-chat-z: 9999;

    /* Custom icons and logo */
    --sc-chat-chat-icon: "https://example.com/images/chat-icon.svg";
    --sc-chat-send-icon: "https://example.com/images/send-icon.svg";
    --sc-chat-logo: "https://example.com/images/logo.png";

    /* Custom placeholder text */
    --sc-chat-message-placeholder: "Write a message...";
}

Cart Indicator Widget

Description

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.

Props/Attributes

Prop/Attribute	Type	Default	Description
initial-value	number	0	The starting value for the cart item count

Usage Example

<!-- 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>

SimpleCounter Widget

Description

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.

Props/Attributes

Prop/Attribute	Type	Default	Description
initial-value	number	0	The starting value for the counter

Usage Example

<!-- Basic counter starting at 0 -->
<wg-counter></wg-counter>

<!-- Counter with custom initial value -->
<wg-counter initial-value="10"></wg-counter>

Product Card Widget

Description

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.

Props/Attributes

Prop/Attribute	Type	Description
id	number	Id of the product
image	string	URL of the product image
title	string	Title/name of the product
price	number	Price of the product (without currency)
currency	string	Use ISO code like USD or EUR

Usage Example

<!-- Basic product card -->
<wg-product-card
    id="1234"
    image="/images/products/apple-watch.png"
    title="Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport"
    price="599"
    currency="EUR"
></wg-product-card>