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 Astro
astro
---
import { renderPactBootstrap } from '@pact/web'
const bootstrap = renderPactBootstrap({ siteKey: 'site_live_your_key' })
---
<html lang="en">
<head><Fragment set:html={bootstrap} /></head>
<body>
<slot />
<pact-preferences-button>Privacy choices</pact-preferences-button>
<script>
import { definePactElements } from '@pact/web'
definePactElements()
</script>
</body>
</html>