ProofyBubble

Next.js

Step-by-step guide to add ProofyBubble to your Next.js (App Router) application

Follow these steps to integrate ProofyBubble social proof notifications into your Next.js application using the App Router (v13+).

The recommended way to add scripts to all pages in a Next.js App Router application is by using the root layout file.

  1. Open your project's root layout file, typically located at app/layout.tsx or app/layout.jsx.
  2. Import the Script component from next/script (if not already imported).
  3. Add the ProofyBubble script to the <body> or <head> section of your layout component.

Here's an example for app/layout.tsx:

import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>{/* ...other head elements... */}</head>
      <body>
        {/* ...your app content... */}
        <Script
          id="credibility-client-<your-id>"
          type="module"
          crossOrigin="anonymous"
          data-app-id="YOUR_APP_ID"
          src="https://client.proofybubble.com/assets/embed.js"
        />
        {children}
      </body>
    </html>
  );
}
  • Replace YOUR_APP_ID with your actual App ID from the ProofyBubble dashboard.
  • Optionally, update the id attribute to a unique value for your site.

Note: The script can be placed in either the <head> or <body> section, but placing it just before the closing </body> tag is common for analytics and widgets.

  • Save your changes to the layout file.
  • Commit and deploy your application.

After deploying your changes:

  1. Visit your live website.
  2. Check your ProofyBubble dashboard for incoming data and notifications. It may take a few minutes for the first events to appear.

If you don't see notifications:

  • Double-check that your App ID is correct.
  • Make sure the script is present in your site's HTML (inspect with browser dev tools).
  • Ensure you are not blocking scripts with ad blockers or strict browser settings.

Need help? Contact support or check the full installation guide.