Embeddable Web Component

Bring Wine Education to Your Website

Embed beautiful, interactive wine cards anywhere. One script tag, zero dependencies, fully customizable.

Get Started

See It in Action

Live examples running right on this page. Every card pulls real data from Wine Companion.

Random · Flip

Random · Crossfade

Dark Theme · Scale+Blur

Quick Start

Two lines of HTML. That's all it takes.

<script type="module"
  src="https://companion.weinkinder.de/widget/wine-companion-widget.js">
</script>

<wine-card type="grape" random rotate-interval="10"></wine-card>

Configuration

Fine-tune every aspect via HTML attributes or a global config object.

Attribute	Type	Default	Description
`type`	string	`"grape"`	Content type
`slug`	string	`—`	Specific grape by slug
`random`	boolean	`false`	Show random grape
`difficulty`	string	`—`	Filter: beginner, intermediate, advanced
`locale`	string	`"en"`	Language: en or de
`theme`	string	`"light"`	Theme: light or dark
`rotate-interval`	number	`—`	Auto-rotate every N seconds
`transition`	string	`"flip"`	flip, crossfade, slide, scale-blur
`transition-duration`	number	`varies`	Animation duration in ms
`base-url`	string	`companion.weinkinder.de`	Data source URL

Global Configuration

Set defaults for all widgets on the page:

JavaScript

<script>
  window.WineCompanionConfig = {
    locale: 'de',
    theme: 'dark',
    transition: 'flip',
    transitionDuration: 600
  };
</script>

Smooth Transitions

Four built-in rotation animations. Pick the one that fits your site.

flip

3D Flip

Real card flip — new content on the back. Default.

crossfade

Crossfade

Clean opacity fade. Minimal and elegant.

slide

Slide

Cards slide in from below. Stack feel.

scale-blur

Scale + Blur

Shrink with blur, then expand. Premium.

Perfect For

Wine Blogs

Enrich articles with interactive grape profiles that keep readers engaged.

Wine Shops

Help customers learn about grape varieties right on your product pages.

Education

Add flashcards and rotating grape cards to your wine courses.

Restaurants

Display a rotating wine-of-the-day card on your digital menu.