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 Solid / SolidStart
tsx
import { onMount } from 'solid-js'
import { definePactElements } from '@pact/web'
export function Privacy() {
onMount(() => definePactElements())
return (
<>
<pact-gate purpose="analytics"><Analytics /></pact-gate>
<pact-preferences-button>Privacy choices</pact-preferences-button>
</>
)
}04
src/pact-elements.d.ts
ts
declare module 'solid-js' {
namespace JSX {
interface IntrinsicElements {
'pact-gate': { purpose: string; children?: JSX.Element }
'pact-preferences-button': { children?: JSX.Element }
}
}
}