01
Install the packages
pnpm add @pact/react @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 Gatsby
tsx
import React from 'react'
import { PACT_BOOTSTRAP } from '@pact/web'
export const onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([
<script key="pact" id="pact-bootstrap" data-tenant="site_live_your_key"
data-src="/pact.js" data-api="/v1"
dangerouslySetInnerHTML={{ __html: PACT_BOOTSTRAP }} />
])
}04
gatsby-browser.tsx
tsx
import React from 'react'
import { PactProvider } from '@pact/react'
export const wrapRootElement = ({ element }) => (
<PactProvider>{element}</PactProvider>
)