ProofyBubble

React Router

Step-by-step guide to add ProofyBubble to your React Router site

Follow these steps to integrate ProofyBubble into your React Router application.

The recommended way to add scripts to all pages in a React Router application is by adding it to your root component.

  1. Open your project's root component (usually App.jsx or main.jsx).
  2. Add the ProofyBubble script to the <head> section using a React effect:
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Add ProofyBubble script
    const script = document.createElement('script');
    script.id = 'credibility-client-<your-id>';
    script.type = 'module';
    script.crossOrigin = 'anonymous';
    script.setAttribute('data-app-id', '<your-app-id>');
    script.src = 'https://client.proofybubble.com/assets/embed.js';
    document.head.appendChild(script);

    // Cleanup on unmount
    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return (
    // Your app content
  );
}
  • Replace <your-id> with your actual Website ID from ProofyBubble.
  • Replace <your-app-id> with your actual App ID from ProofyBubble.

You can also add the script directly to your public/index.html file:

<script
  id="credibility-client-<your-id>"
  type="module"
  crossorigin="anonymous"
  data-app-id="<your-app-id>"
  src="https://client.proofybubble.com/assets/embed.js"
></script>
  • Replace <your-id> with your actual Website ID from ProofyBubble.
  • Replace <your-app-id> with your actual App ID from ProofyBubble.

After implementing either method:

  • Visit your live website.
  • Check your ProofyBubble dashboard for incoming data. It might take a few minutes for the first pageviews or events to appear.