How can we help? 👋

How to add testimonials to React or NextJS

How to add your testimonials to your React app.

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 and get the embed code snippet

In Senja:

Create a testimonial widget. To create a widget, go to the Studio

Notion image
 

On the studio page, navigate to the Widgets section and select Start from scratch

Notion image

Name your widget and click Create widget

Notion image

Click the + button

Notion image

You can choose between Approved testimonials and Curate Testimonials. In this example, we selected the Approved Testimonials option so testimonials matching the filters will be added automatically:

Notion image

Select a widget style and customize the design until you’re happy. Then click Share on the top right:

Notion image

Copy your widget’s code by clicking on the copy icon

 
Notion image
 

Want a faster way to grab your widget code? Use Senja’s Chrome Extension

Senja’s free Chrome Extension allows you to copy your widget code and form URLs, and see all your latest testimonials, all without leaving the page you’re on. Download it free here.

Add the embed code to your React/NextJS app

Open the React component, +page.tsx file, or page.jsx file 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>
⚠️
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, like this:
// 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"
      ></div>
			{/* This changed from <script> to <Script> */}
      <Script
        async
        type="text/javascript"
        src="https://static.senja.io/dist/platform.js"
      ></Script>
    </main>
  );
}

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

Notion image
🥳
That’s it, your testimonial widget is now embedded in your React app! Not working? Just click Contact Us below and we’ll assist you.
Did this answer your question?
😞
😐
🤩