Trait Rater Widget

The Trait Rater is a self-contained JavaScript widget. Drop one script tag into any page and it renders a trait rating interface. No build step, no framework dependency.

CDN URL: https://api.multiplenatures.com/widgets/trait-rater.js

Basic embed

<div id="mn-trait-rater"></div>
<script src="https://api.multiplenatures.com/widgets/trait-rater.js"></script>

The widget mounts into #mn-trait-rater automatically on load.

Configuration

Pass a configuration object before the script tag:

<div id="mn-trait-rater"></div>
<script>
  window.MNTraitRaterConfig = {
    target: "#mn-trait-rater",
    traits: ["Creating", "Adapting", "Organizing"],
    onComplete: function(ratings) {
      console.log(ratings);
    }
  };
</script>
<script src="https://api.multiplenatures.com/widgets/trait-rater.js"></script>

Configuration options

Option	Type	Default	Description
target	string	"#mn-trait-rater"	CSS selector for the mount element
traits	array	All 9 Natures	Subset of traits to display
language	string	"en"	"en" or "fr"
onComplete	function	—	Callback called with the ratings object when the user finishes

Callback payload

The onComplete callback receives an object mapping trait names to ratings (1–5):

{
  "Creating": 4,
  "Adapting": 3,
  "Organizing": 5
}

Styling

The widget respects the page’s CSS custom properties. Override these to match your brand:

:root {
  --mn-widget-accent: #2d4baf;
  --mn-widget-bg: #ffffff;
  --mn-widget-text: #1e2540;
  --mn-widget-radius: 8px;
}

Notes

• The widget is served directly from the MN API Worker. No separate CDN configuration required.
• The script tag is safe to load asynchronously (defer or async attributes are supported).
• No session or authentication is required to embed the widget. Ratings are passed via the onComplete callback — storage is your responsibility.