`<bio-mood>`

A daily mood observation widget that lets users select their mood from a configurable emoji scale. Records the selection as an AnyBio observation with trend tracking across days.

<bio-mood></bio-mood>

How It Works

When <bio-mood> receives context from a parent <bio-provider>:

Resolves configuration — in profile-driven mode, reads the mood scale, labels, biosignal, and status from the SDK config's mood section; in static mode, uses attribute defaults
Shows current state — if mood has already been logged for the current day, displays "Mood logged" with a timestamp and the selected emoji highlighted
Presents emoji scale — renders buttons for each label in the scale (e.g., 😔 😐 🙂 😊 😄)
Records observation — on selection, posts an observation with metadata: { widget: "bio-mood", day: N }
Supports updates — clicking a different emoji after initial selection re-submits with the new value

Modes

Profile-Driven Mode

Omit all attributes. The widget reads its configuration from the episode profile's spec.sdk.mood section:

<bio-mood></bio-mood>

The profile defines:

scale — number of options (e.g., 5)
labels — emoji array (e.g., ["😔", "😐", "🙂", "😊", "😄"])
biosignal — the biosignal ID to record (e.g., "mood")

Static Mode

Pass configuration directly:

<bio-mood
  scale="5"
  labels='["😔","😐","🙂","😊","😄"]'
  biosignal="mood"
  episode-id="ep_abc123">
</bio-mood>

Attributes

Attribute	Type	Required	Description
`scale`	`number`	No	Number of mood options. Defaults to `5`.
`labels`	`string`	No	JSON array of emoji labels. Defaults to `["😔","😐","🙂","😊","😄"]`.
`biosignal`	`string`	No	Biosignal ID for the observation. Defaults to `"mood"`.
`episode-id`	`string`	No	Episode ID. Falls back to the episode resolved by `<bio-provider>`.

Events

Event	Detail	Description
`anybio:mood:submit`	`{ value, biosignal, episodeId, day }`	Fired on initial mood selection.
`anybio:mood:update`	`{ value, biosignal, episodeId, day }`	Fired when mood is changed after initial selection.
`bio-mood-complete`	(same as anybio:mood:submit)	Backward-compatible alias.

CSS Classes

Class	Element
`.bio-mood-buttons`	Button container (flex row)
`.bio-mood-btn`	Individual mood button
`.bio-mood-selected`	Applied to the selected button
`.bio-mood-emoji`	Emoji text
`.bio-mood-status`	"Mood logged 10:30 AM" status text

Each mood button sets a --mood-color CSS variable based on the mood index, using the --bio-mood-* palette:

Variable	Default	Mood
`--bio-mood-great`	`#22c55e`	Best / happiest
`--bio-mood-good`	`#84cc16`	Good
`--bio-mood-okay`	`#eab308`	Okay
`--bio-mood-bitoff`	`#f97316`	A bit off
`--bio-mood-notbest`	`#ef4444`	Not my best

Code Examples

Profile-Driven

<bio-provider
  api-key="org_your_key"
  project-key="proj_your_key"
  xuser-id="user-123">

  <h3>How Do You Feel Today?</h3>
  <bio-mood></bio-mood>

</bio-provider>

With Event Handling

<bio-mood id="mood"></bio-mood>

<script>
  document.addEventListener('anybio:mood:submit', (e) => {
    const { value, biosignal } = e.detail;
    console.log(`Mood recorded: ${value} for ${biosignal}`);
    showToast('Mood logged!');
  });

  document.addEventListener('anybio:mood:update', (e) => {
    console.log(`Mood updated to: ${e.detail.value}`);
    showToast('Mood updated!');
  });
</script>

Custom Styling

/* Larger emoji buttons */
.bio-mood-btn {
  padding: 12px 20px;
}

.bio-mood-emoji {
  font-size: 2.5rem;
}

/* Custom mood palette */
bio-mood {
  --bio-mood-great: #34a853;
  --bio-mood-notbest: #ea4335;
}

bio-mood

On this page