---
title: React Turnstile - Manual script injection
---

# Manual script injection

Sometimes you may want to manually inject the Turnstile script into your application. You need to set the `injectScript` property to `false` to do it.

The following example shows how to manually inject the Turnstile script into a Next.js project:

```tsx
import {
  DEFAULT_ONLOAD_NAME,
  DEFAULT_SCRIPT_ID,
  SCRIPT_URL,
  Turnstile,
} from "@marsidev/react-turnstile";
import Script from "next/script";

export default function Widget() {
  return (
    <>
      <Script
        id={DEFAULT_SCRIPT_ID}
        src={SCRIPT_URL}
        strategy="beforeInteractive"
      />

      <Turnstile
        injectScript={false}
        siteKey="{{ siteKey }}"
      />
    </>
  );
}
```

If you want to use a custom script ID:

```tsx
import { SCRIPT_URL, Turnstile } from "@marsidev/react-turnstile";
import Script from "next/script";

export default function Widget() {
  return (
    <>
      <Script
        id="turnstile-script"
        src={SCRIPT_URL}
        strategy="beforeInteractive"
      />

      <Turnstile
        injectScript={false}
        scriptOptions={{ id: "turnstile-script" }}
        siteKey="{{ siteKey }}"
      />
    </>
  );
}
```

<Info>
	When manually injecting the script, the only valid property for `scriptOptions` is the `id`, and it needs to match the ID of the script tag.
</Info>