Demo

Star & Smiley Rating

Collect numeric ratings with classic stars or emoji faces. Both styles use the same widget script -- just change data-style.

Star Ratings

Configurable 1-10 star scale with hover labels.

3 or 5 emoji faces for quick sentiment capture.

Arrow keys, Enter/Space, and ARIA labels.

Adapts to light and dark system themes.

Hover over the stars to preview your rating, then click to submit. Use arrow keys for keyboard navigation.

The default smiley mode with 3 faces: Bad, Okay, and Great. Click a face to submit.

Extended smiley mode with 5 faces for more nuanced sentiment: Terrible, Bad, Okay, Good, and Great.

<script

  src="https://seggwat.com/static/widgets/v1/seggwat-rating.js"

  data-project-key="YOUR-PROJECT-KEY"

  data-max-stars="5"

></script>

<script

  src="https://seggwat.com/static/widgets/v1/seggwat-rating.js"

  data-project-key="YOUR-PROJECT-KEY"

  data-style="smiley"

></script>

<script

  src="https://seggwat.com/static/widgets/v1/seggwat-rating.js"

  data-project-key="YOUR-PROJECT-KEY"

  data-style="smiley"

  data-faces="5"

></script>

Attribute	Description	Default
`data-project-key`	Your SeggWat project key (required)	-
`data-style`	Rendering style: "stars" or "smiley"	"stars"
`data-max-stars`	Number of stars to display (1-10, star mode only)	5
`data-faces`	Number of smiley faces: 3 or 5 (smiley mode only)	3
`data-label`	Custom label/question text	"Rate your experience" / "How was your experience?"
`data-show-count`	Show rating count e.g. "3/5" (star mode only)	true
`data-show-powered-by`	Show "Powered by SeggWat" footer	true
`data-button-color`	Star fill / smiley highlight color (hex)	#f59e0b
`data-language`	UI language (en, de, sv)	Browser language
`data-container`	CSS selector for target container	Script location
`data-version`	App version to track in analytics	-
`data-inline`	Remove top border (for inline placement)	false
`data-api-url`	Override API endpoint URL	Auto-detected

// Set the user ID (for analytics)

SeggwatRating.setUser("user-123");

// Reset the widget to initial state

SeggwatRating.reset();

// Get the current rating value

SeggwatRating.getRating();

// Get the widget style ("stars" or "smiley")

SeggwatRating.getStyle();

// Access the widget container element

SeggwatRating.container;