NudgeDocs

Other platforms

Install the Nudge snippet on a hand-coded site, a Next.js or React app, Shopify, Wix, Squarespace or any other platform that lets you add code.

The rule for every platform

Whatever runs your site, the installation is the same: the snippet must be on every page, once, and the site must be published. Look for the place your platform offers for code that runs on all pages: often called "custom code", "code injection", "footer code" or "tracking code". Paste the snippet there.

<script src="https://app.asknudge.ai/widget/loader.js"
  data-org="your-workspace"
  data-form="your-form" async></script>

Copy your own snippet in Nudge from Agents › Website Agent › On your site › Copy the snippet, or from Settings › Integrations › Website › Code snippet.

Dedicated guides: Framer, Webflow, WordPress, Google Tag Manager.

Hand-coded HTML site

Paste the snippet just before the closing </body> tag of every page. If your pages share a layout, footer include or template, paste it there once.

index.html
    …
    <script src="https://app.asknudge.ai/widget/loader.js"
      data-org="your-workspace"
      data-form="your-form" async></script>
  </body>
</html>

Next.js, React and other JavaScript apps

Add the script once, in the root layout, with the Script component:

app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.asknudge.ai/widget/loader.js"
          data-org="your-workspace"
          data-form="your-form"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Things to know with JavaScript apps:

  • Load the snippet once per page load. The widget stays on the page while visitors navigate inside your app.
  • Page rules apply at load time. Excluded URL patterns and device targeting are checked when the page first loads. In a single-page app, moving to another route without a full reload does not show or hide the widget again.
  • The install check may not see the tag. When the script is added by JavaScript (as next/script does), Nudge does not find it in the page's HTML. That is expected: the status turns Live as soon as a real page view loads the widget.
  • Nonce-based CSP. If your app sends a Content Security Policy with a nonce and 'strict-dynamic', pass the nonce to the script (with next/script, the nonce prop). See Content Security Policy.

Shopify

  1. In your Shopify admin, go to Online Store › Themes.
  2. On your current theme, open the ⋯ menu › Edit code.
  3. Open layout/theme.liquid.
  4. Paste the snippet just before </body>, then Save.

If you switch or update your theme later, check that the snippet is still in theme.liquid.

Wix

  1. In your site's dashboard, go to Settings › Custom code (in the advanced settings).
  2. Click Add Custom Code and paste the snippet.
  3. Apply it to All pages, load the code once, and place it in Body - end.
  4. Apply, then publish the site.

Wix only allows custom code on sites with a premium plan and a connected domain.

Squarespace

  1. Go to Settings › Advanced › Code Injection.
  2. Paste the snippet in the Footer field.
  3. Save.

Code injection is only available on Squarespace plans that include it.

Any other platform

If your platform has no place for site-wide code, check whether it supports Google Tag Manager: you can then install through GTM. As a last resort, paste the snippet in the shared footer or template of your pages.

After installing

Open a page of your published site, then in Nudge click Re-check installation. See Verify the installation. If your site sends a Content Security Policy, read Content Security Policy.

On this page