Guides

AllergenKit

AllergenKit is currently in closed beta. Some features described here may not yet be available, and the featureset may change with little or no warning. Interested in AllergenKit? Learn more and register here.

AllergenKit is Pollen Sense's toolkit for displaying Pollen Sense Allergen Data on the web, social media, and more.

For the web, think along the lines of Weather Company's Max javascript.

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

AllergenKit components are built through the PollenSense Portal. After configuring a component, a component-id will be provided alongside the code snippets to embed. This component-id represents the unique configuration for that component and serves as the authorization key to access what that component has been granted access to.

During beta, Today forecast components require an add-on to be added to the component owners' organization, which can be added by your Pollen Sense Account Manager. If the organization does not have access, the component API returns 403 Forbidden with Problem Details explaining that the Site Forecast Product is required.

For each type, multiple components can exist; for example, you could have a Today forecast component with Tree, Weed, Grass, and Mold shown on your websites' homepage; another with tree-specific categories for a section on your website about tree allergies; and one designed for exporting as an image to be used on social media posts. Each component will have its own component-id

Most components will have customization options that are done inside the component builder; for example, the Today Forecast component allows for customization of:

  • Site to bind component to
  • Choosing between 30+ allergens/groupings
  • Number of Columns
  • Line vs Arc display style
  • Sort ordering
  • Background Color
  • Header image inclusion/exclusion

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.

<!-- Put inside the <head> tag or include in your tag manager -->
<script src="https://cdn.pollensense.com/allergenkit/v0/allergenkit.iife.js"></script>

<!-- Put in-line in the content where you want your component to go -->
<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.

<!-- Put inside the <head> tag or include in your tag manager -->
<script type="module" src="https://cdn.pollensense.com/allergenkit/v0/allergenkit.js"></script>

<!-- Put in-line in the content where you want your component to go -->
<allergenkit-today-forecast component-id="YOUR-COMPONENT-ID"></allergenkit-today-forecast>

For production embeds, prefer a versioned release - such asv0 - unless you are deliberately testing the newest changes. The latest release could have breaking changes at any time.

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

Modern Single Page Apps (SPAs, or client-side apps)

If you have a frontend app (React, Vue, Angular, etc.), 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. During beta, AllergenKit is not compatible with React 18 or earlier. Those React versions can use web components only with additional wrapper packages and manual event/property integration, and Pollen Sense does not currently publish the React-specific package needed for AllergenKit.

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.

Available Components

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.

For more information on building this component, see Start in the portal

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

Embed-time customization

Currently, customizing AllergenKit in-code is not supported. We hope to do an open-source release of the client-side code library with the v1 release of AllergenKit, at which point we'll open up client-side customizations using either the officially hosted bundle or a forked bundle

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 data; for example, to make sure that the gradient bar colors work with the background color selected. 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.

FAQ (Common Issues)

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.

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

Include the <script> tag only once per page; the actual components, e.g. <allergenkit-today-forecast> can then be included multiple times per page

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.

Expecting SSR output

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

Previous
Misery Index