PactDOCS
/

INTEGRATE / WEB STANDARD

Web Components

Purpose gates and privacy controls that work in raw HTML and modern frameworks without a framework runtime.
01

Register once

pnpm add @pact/web @pact/runtime
main.ts
typescript
import { definePactElements } from '@pact/web'

definePactElements()
02

Gate purpose-bound content

page.html
html
<pact-gate purpose="analytics">
  <analytics-dashboard></analytics-dashboard>
</pact-gate>

<pact-preferences-button>
  Privacy choices
</pact-preferences-button>
03

Style the privacy control

The preference button exposes a button part, so your CSS can own its complete presentation.

privacy.css
css
pact-preferences-button::part(button) {
  min-height: 44px;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0 1rem;
  font: inherit;
}
04

Handle initialization failures

main.ts
typescript
document.addEventListener('pact-error', (event) => {
  const error = (event as CustomEvent<Error>).detail
  reportIntegrationFailure(error)
})
REFERENCERead the vanilla client API