@nexum-reviews/svelte

Svelte 5 review widgets for the MyNexum review API. Drop-in components for merchants to display and collect reviews on their own sites.

Install

npm install @nexum-reviews/svelte

Svelte 5 is a peer dependency.

Widgets

Every widget takes a merchantSlug. That's the slug the organisation created via the admin API. theme is optional. All widgets always hit https://api.mynexum.ai.

<script>
  import {
    RatingBadge,
    SummaryCard,
    ReviewCard,
    ReviewForm,
    ReviewFeed,
  } from '@nexum-reviews/svelte';
</script>

<!-- Inline rating badge — under a product title -->
<RatingBadge merchantSlug="field-jacket-olive" variant="pill" />

<!-- Summary card — avg rating + total reviews -->
<SummaryCard merchantSlug="field-jacket-olive" />

<!-- A single review — by id or pass a Review object -->
<ReviewCard merchantSlug="field-jacket-olive" reviewId="r_8J1N" />

<!-- Write-a-review form (2-step) — posts to the API -->
<ReviewForm
  merchantSlug="field-jacket-olive"
  productLabel="Field Jacket · Olive"
  onsubmitted={(r) => console.log('submitted', r.id)}
/>

<!-- Paginated feed with filter + sort -->
<ReviewFeed merchantSlug="field-jacket-olive" />

Props

All widgets share:

| prop | type | default | notes | | -------------- | -------------------------------- | ---------------------------- | ----- | | merchantSlug | string | required | The merchant to scope to. | | theme | 'light' \| 'dark' \| Theme | 'light' | Theme is the token object — override any colour. |

Widget-specific props:

• RatingBadge — variant: 'minimal' | 'pill', compact: boolean
• ReviewCard — reviewId: string or review: Review
• ReviewForm — productLabel, reviewerIdentifier, labels, onsubmitted(review)
• ReviewFeed — pageSize, initialFilter, initialSort

Pre-fill the reviewer

When the host site already knows who the user is (logged-in shopper, fulfilment email, order ID), pass reviewerIdentifier and the form skips the identifier input entirely:

<ReviewForm
  merchantSlug="field-jacket-olive"
  reviewerIdentifier={user.email}
/>

Customise every string

Every user-facing string on ReviewForm lives behind the labels prop. Pass any subset — anything you don't override keeps its English default. Static strings are plain strings; dynamic ones (with a runtime value to inject) are short functions.

<script>
  import { ReviewForm, type ReviewFormLabels } from '@nexum-reviews/svelte';

  const labels: ReviewFormLabels = {
    step1Title: 'Comment a-t-il été ?',
    step2Title: 'Dites-nous-en plus',
    ratingLabels: ['Pas bon', 'Médiocre', 'Correct', 'Bien', 'Excellent'],
    nameLabel: 'Votre nom',
    bodyLabel: 'Votre avis (facultatif)',
    submitButton: 'Envoyer',
    submittingButton: 'Envoi…',
    backButton: 'Retour',
    doneTitle: (name) => `Merci, ${name}.`,
    doneBody: 'Signé, horodaté et en attente de vérification.',
    starAriaLabel: (n) => `Noter ${n}`,
    bodyCounter: (n) => (n > 0 ? `${n} caractères` : 'facultatif'),
  };
</script>

<ReviewForm merchantSlug="field-jacket-olive" {labels} />

See ReviewFormLabels in dist/ReviewForm.svelte.d.ts (or your editor's autocomplete) for the full list.

Theming

The light/dark palettes match the MyNexum design system (Inter, indigo accent). To customise, import the token object and spread:

<script>
  import { SummaryCard, lightTheme } from '@nexum-reviews/svelte';
  const theme = { ...lightTheme, accent: '#0ea5e9' };
</script>

<SummaryCard merchantSlug="my-merchant" {theme} />

What the widgets hit

Only the public parts of the API — no API key needed:

• GET /api/v1/merchants/{slug}/reviews — list with summary (Badge, Summary, Feed)
• GET /api/v1/merchants/{slug}/reviews/{id} — single review (ReviewCard)
• POST /api/v1/merchants/{slug}/reviews — submit review (ReviewForm)

Rate-limited per-IP upstream.

Build

npm install
npm run build    # outputs to dist/
npm run check    # svelte-check