Integrate TruConsentModal

With your .env fully populated, you can now mount TruConsentModal. The component fetches its config on mount and auto-hides if the user has already consented.

Step 1 — Add CSS imports

Import styles once in your root entry file (App.tsx or main.tsx).

import "@truconsent/consent-notice/variables.css";
import "@truconsent/consent-notice/consent-modal.css";
import "@truconsent/consent-notice/banner-styles.css";
import "@truconsent/consent-notice/tailwind.css";

Step 2 — Mount the component

import { TruConsentModal } from "@truconsent/consent-notice";

export default function App() {
  return (
    <>
      <TruConsentModal
        apiUrl={import.meta.env.VITE_TRU_CONSENT_API_URL}
        apiKey={import.meta.env.VITE_TRU_CONSENT_API_KEY}
        organizationId={import.meta.env.VITE_TRU_CONSENT_ORGANIZATION_ID}
        assetId={import.meta.env.VITE_TRU_CONSENT_ASSET_ID}
        bannerId={import.meta.env.VITE_TRU_CONSENT_BANNER_ID}
        userId="<YOUR_SESSION_USER_ID>"
        onClose={(type) => console.log("Banner closed:", type)}
      />
    </>
  );
}

Props

* Required — assetId is always required. Either apiKey or token must be provided.

Prop	Type	Description
apiUrl *	string	SDK runtime base URL (VITE_TRU_CONSENT_API_URL).
organizationId *	string	Your org ID — sent as X-Org-Id on every request.
bannerId *	string	Collection point display_id (e.g. CP010).
assetId *	string	Your asset UUID (VITE_TRU_CONSENT_ASSET_ID).
apiKey *	string	Consent-scope API key (VITE_TRU_CONSENT_API_KEY). Required when not using token.
token *	string	Session token. Replaces apiKey.
userId	string	Current user’s session ID. Omit for anonymous users.
logoUrl	string	Logo URL shown in the banner header. Falls back to org logo.
companyName	string	Fallback company name. Defaults to "".
theme	string	’light’ or ‘dark’. Defaults to ‘light’.
onClose	function	Called on close with approved, declined, partial_consent, revoked, or no_action.
onSubmit	function	Called after consent is written to the API.

JWT usage

Pass a session token instead of apiKey. assetId is still required.

import { TruConsentModal } from "@truconsent/consent-notice";

export default function ConsentPage({ sessionToken, userId }) {
  return (
    <TruConsentModal
      token={sessionToken}
      apiUrl={import.meta.env.VITE_TRU_CONSENT_API_URL}
      organizationId={import.meta.env.VITE_TRU_CONSENT_ORGANIZATION_ID}
      assetId={import.meta.env.VITE_TRU_CONSENT_ASSET_ID}
      bannerId={import.meta.env.VITE_TRU_CONSENT_BANNER_ID}
      userId={userId}
      onClose={(type) => console.log("Consent action:", type)}
    />
  );
}

Gating a form on consent

import { useState } from "react";
import { TruConsentModal } from "@truconsent/consent-notice";

export default function SignupForm() {
  const [showBanner, setShowBanner] = useState(false);

  const handleConsentClose = (type) => {
    if (type === "approved" || type === "partial_consent") {
      setShowBanner(false);
      proceedWithSubmission();
    } else {
      alert("Consent is required to continue.");
    }
  };

  return (
    <form onSubmit={() => setShowBanner(true)}>
      {showBanner && (
        <TruConsentModal
          apiUrl={import.meta.env.VITE_TRU_CONSENT_API_URL}
          apiKey={import.meta.env.VITE_TRU_CONSENT_API_KEY}
          organizationId={import.meta.env.VITE_TRU_CONSENT_ORGANIZATION_ID}
          assetId={import.meta.env.VITE_TRU_CONSENT_ASSET_ID}
          bannerId={import.meta.env.VITE_TRU_CONSENT_BANNER_ID}
          userId="<YOUR_SESSION_USER_ID>"
          onClose={handleConsentClose}
        />
      )}
    </form>
  );
}

Integration checklist

1. Install @truconsent/consent-notice
2. Add all seven env vars to .env
3. Add the four CSS imports to your root entry file
4. Mount TruConsentModal in your app root

Troubleshooting

Banner does not appear

• Verify bannerId, assetId, and organizationId are correct.
• If the user has already consented to all purposes, the component auto-hides (onClose fires with no_action).
• Check the browser console for [TruConsent] log lines.

401 Unauthorized

• Confirm you are using a consent-scope key for apiKey (not admin).
• Check that organizationId matches the key’s organization.

403 Forbidden

• Your domain is not allowlisted. Add it under Settings → Allowed Domains.

Styles look wrong or missing

• Ensure all four CSS imports are present in your root entry file.
• Missing consent-modal.css is the most common cause of unstyled banners.

---

← Fetch collection point details