AllergenKit

AllergenKit is Pollen Sense's embeddable web-component library for publishing allergen experiences outside the portal.

This page is embedding the Today Forecast component directly in demo mode using the CDN-hosted IIFE bundle.

The first public component is the Today Forecast component:

<allergenkit-today-forecast component-id="YOUR-COMPONENT-ID"></allergenkit-today-forecast>

Use it when you want a customer-facing allergen view on a website, landing page, newsroom page, partner portal, or another application that should not have to rebuild the visualization logic itself.

Start in the portal

Before embedding anything, create the component configuration in the Pollen Sense portal. The saved portal config is what determines the site, the category set, and several display defaults.

The current portal flow is oriented around customer-owned outdoor allergen sites. In the implementation today, the component builder only offers active sites that match the portal's outdoor allergen usage filter.

Once the component exists, the portal gives you a component-id and an embed snippet. That component-id is what the web component uses to load its live configuration and data.

Choose an embed method

AllergenKit currently publishes two browser delivery formats.

Script tag

Use the script-tag build when embedding into systems like WordPress, Squarespace, Webflow, a CMS, or a plain HTML page. This is the safest default when you do not control a frontend build pipeline.

<script src="https://cdn.pollensense.com/allergenkit/v0/allergenkit.iife.js"></script>

<allergenkit-today-forecast
  component-id="YOUR-COMPONENT-ID"
></allergenkit-today-forecast>

ES module

Use the module build when embedding into a modern application that already understands <script type="module"> or where you want to stay aligned with the ESM bundle.

<script
  type="module"
  src="https://cdn.pollensense.com/allergenkit/v0/allergenkit.js"
></script>

<allergenkit-today-forecast
  component-id="YOUR-COMPONENT-ID"
></allergenkit-today-forecast>

For production embeds, prefer v0 unless you are deliberately testing the newest changes. The portal currently labels latest as potentially breaking.

Where this embeds cleanly

CMS and static sites

This is the easiest integration path. Add the bundle script once on the page, then paste the custom element wherever the Today Forecast experience should appear.

This pattern fits:

• WordPress pages and posts
• Squarespace code blocks
• Webflow embeds
• hand-authored HTML pages
• campaign or partner microsites

The demo site in the AllergenKit repo follows exactly this model: open the HTML file directly in a browser, paste the snippet into the placeholder region, and the component renders without a build step.

Modern client-side apps

If you have a frontend app, you can still treat AllergenKit as a standard custom element. Load the bundle once on the client, then render <allergenkit-today-forecast> wherever you need it.

The main requirement is that the browser must execute the bundle before the element is expected to upgrade. If your app code splits routes aggressively, keep the script loading story explicit.

Server-rendered apps

The component is still browser-side UI. In SSR frameworks, load it only on the client side and avoid expecting it to render during the server pass.

Today Forecast component

The Today Forecast component renders a multi-card view of today's allergen forecast for the saved site and configured categories. The component fetches its own data from the Pollen Sense API based on the provided component-id.

There are two layers of configuration:

1. portal-managed settings that live with the saved component
2. embed-time overrides that can be set on the custom element

Portal-managed settings

These options are configured in the portal when the component is created or edited:

• SiteId: which customer site the component is tied to
• ComponentName: internal name for the saved component
• CategorySortCode: how categories are ordered
• CategoryCodes: which categories are included
• GridColumns: the default column layout
• BackgroundColor: the default gauge background color
• ShowHeaderImage: whether category artwork appears in the header area
• DisplayCode: the chart style, currently LINE or ARC

This distinction matters because not every one of those settings is exposed as an HTML attribute today. If you need to change category selection, ordering, chart style, or header artwork, do it in the portal config rather than expecting to override it from markup.

Embed-time customization

The Today Forecast component currently exposes a smaller override surface in HTML:

Example with overrides:

<script src="https://cdn.pollensense.com/allergenkit/v0/allergenkit.iife.js"></script>

<allergenkit-today-forecast
  component-id="YOUR-COMPONENT-ID"
  grid-columns="2"
  background-color="#2f4f3a"
  dark-mode
></allergenkit-today-forecast>

Notes on each option

component-id

This is the key input. Without it, the live component cannot resolve which saved configuration to fetch and will render an error state.

demo

Use this when you want to preview the component without showing live customer data. If demo is present and there is no component-id, the component renders fully synthetic demo data. If both demo and component-id are present, the component attempts to load the live config and then overlays demo forecast data on top of that configuration.

grid-columns

This changes the card layout density without editing the saved component. It is useful when the same saved component needs different layout behavior in a narrow content rail versus a wider landing page.

background-color

This overrides the saved card background color. Use it when the host page has a strong local brand treatment and you want the cards to harmonize without cloning the whole component in the portal.

dark-mode

This changes the outer wrapper and legend styling to a dark presentation. It is appropriate when the host page is already in a dark visual context.

Common gotchas

Missing component-id

For live mode, component-id is required. If it is missing, the component does not have enough information to fetch configuration and returns an explicit error state.

Using the wrong bundle type

If you use allergenkit.js, the script tag must be type="module". If you want the most copy-paste-friendly embed, use the IIFE bundle instead.

Assuming every portal option is an HTML attribute

That is not the current model. grid-columns, background-color, and dark-mode are public overrides today. Category ordering, category membership, ShowHeaderImage, and DisplayCode remain portal-managed.

Using latest as if it were pinned

latest is useful for evaluation, but it is not the safest production target. The current portal copy explicitly warns that it may include breaking changes. Use v0 when you want a stable public embed target.

Loading the bundle multiple times

Load the AllergenKit bundle once per page. After that, you can place multiple <allergenkit-today-forecast> instances on the same page if needed.

Expecting a separate stylesheet

The library injects its CSS at runtime. There is no additional stylesheet to host or import for the current bundle outputs.

Treating it like a Shadow DOM widget

The component currently renders into the light DOM, not a shadow root. That makes it easier to inspect and integrate, but it also means host-page CSS can affect it more than a fully isolated widget would.

Expecting SSR output

This is still a browser component. If you embed it in a server-rendered app, defer loading to the client.

Recommended integration pattern

For most customer-facing pages:

1. create and validate the component in the portal
2. start with the v0 script-tag embed
3. add only the embed-time overrides you actually need
4. keep category selection, ordering, and display style in the portal config

That keeps the host integration simple and leaves the more business-specific configuration in the place where customer admins already manage it.