01
Install the packages
pnpm add @pact/web @pact/runtime02
Install the bootstrap
This is the enforcement boundary. Keep it server-rendered and before optional code.
typescript
import { renderPactBootstrap } from '@pact/web'
const pactBootstrap = renderPactBootstrap({
siteKey: 'site_live_your_key',
src: '/pact.js',
apiBase: '/v1',
})
// Render pactBootstrap as trusted HTML at the start of <head>.
// It must appear before analytics, advertising, or other optional code.03
Wire Qwik
tsx
import { component$, useVisibleTask$ } from '@builder.io/qwik'
import { definePactElements } from '@pact/web'
export default component$(() => {
useVisibleTask$(() => definePactElements())
return <pact-preferences-button>Privacy choices</pact-preferences-button>
})