Senja
Add testimonials to your code base

How to add testimonials to React or NextJS

Adding testimonials to your React or NextJS app is extremely simple and requires no external dependencies. Here's how to do it in just a few steps:

Create your widget

First, you'll need to create a widget in Senja. Learn how to turn your testimonials into a widget

Add the embed code to your React app

Open the React component you'd like to add your Senja widget to

Paste the Senja embed code:

<div>
  <div
    class="senja-embed"
    data-id="4ac65b64-922c-4daf-af40-5cf71ade893f"
    data-lazyload="false"
  ></div>
  <script
    async
    type="text/javascript"
    src="https://static.senja.io/dist/platform.js"
  ></script>
</div>

Alternatively, add the <script> portion of the Senja embed code just before the end of your <head> or <body> tag of your React website:

<head> 
  ... 
  <script
    async
    type="text/javascript"
    src="https://static.senja.io/dist/platform.js"
  ></script>
</head>

And embed the <div> portion in any React component

Add the embed code to your NextJS app

Open the +page.tsx file, or page.jsx file you'd like to add your Senja widget to

Paste the Senja embed code:

// import this:
import Script from "next/script";

export default function SenjaPage() {
  return (
    <main>
      <div
        className="senja-embed"
        data-id="4ac65b64-922c-4daf-af40-5cf71ade893f"
        data-lazyload="false"
        data-mode="shadow"
      ></div>
      {/* This changed from <script> to <Script> */}
      <Script
        async
        type="text/javascript"
        src="https://static.senja.io/dist/platform.js"
      ></Script>
    </main>
  );
}

If you're using NextJS, don't use the default <script> tag. To prevent hydration errors, replace the script tag with the next/script component

Once you do this, your Senja widget will be rendered on the page, like this:

That's it, your testimonial widget is now embedded in your React app 🥳 Not working? Contact support and we'll assist you

Was this helpful?