Mandatory Widget Library

A plug-and-play consent banner + floating button widget for Next.js applications.

Features

✅ fetchMandatoryWidgetData() - Abstracts Contentful API call
✅ MandatoryWidgetWrapper - Renders the rich text + toggle button
✅ Zustand store to handle visibility state

Installation

npm install mandatory-widget

Or local dev:

npm install ./mandatory-widget.zip

Usage

In your page.tsx:

import { fetchMandatoryWidgetData, MandatoryWidgetWrapper } from 'mandatory-widget';

const { showWidget, richTextContent } = await fetchCookieWidgetData(
  entryId,
  process.env.NEXT_PUBLIC_BASE_URL
);

return (
  <>
    <MandatoryWidgetWrapper showWidget={showWidget} richContent={richTextContent} />
    {pageData}
  </>
);

Build

npm run build

Publish to JFrog / npm

npm publish --registry=https://your-org.jfrog.io/artifactory/api/npm/npm-repo/

MandatoryWidgetClient Component

In your country repo:

• Create a components folder inside the src directory if it does not exist.
• Inside that components folder, create the MandatoryWidgetClient component as shown below.

'use client';

import { MandatoryWidgetWrapper } from 'mandatory-widget';

type Props = {
  showWidget: boolean;
  richContent: any;
  buttonText?: string; // Optional, defaults to "Pflichtangaben"
};

export default function MandatoryWidgetClient({ showWidget, richContent, buttonText = "Pflichtangaben" }: Props) {
  return (
    <MandatoryWidgetWrapper
      showWidget={showWidget}
      richContent={richContent}
      buttonText={buttonText}
    />
  );
}

where showWidget and richContent are linked to Contentful settings, and buttonText allows you to customize the button label.

Contentful Field Mapping Example

Below is a screenshot from Contentful showing how the fields are mapped:

• showWidget in code is linked to the Show Widget field in the screenshot above.
• richContent in code is linked to the Rich Text Content field from Contentful.

This ensures your widget configuration is managed directly from Contentful.