Add Testimonials

Learn how to add Twitter/X testimonials to your homepage to build trust and social proof.

Goal

By the end of this recipe, you'll have added customer testimonials from Twitter/X to your homepage testimonials section.

Prerequisites

A working Plainform installation
Twitter/X post URLs from satisfied customers
Basic knowledge of JSON editing

How it works: Plainform uses the react-tweet library to embed Twitter/X posts as testimonials. The posts are displayed in an animated marquee on your homepage.

Steps

Find Tweet IDs

First, get the Tweet IDs from the testimonials you want to display:

Get the tweet URL from your customer (e.g., https://twitter.com/username/status/1234567890123456789)

Extract the Tweet ID - it's the long number at the end of the URL:

https://twitter.com/username/status/1234567890123456789
                                    ^^^^^^^^^^^^^^^^^^^
                                    This is the Tweet ID

Pro tip: Ask customers to share their positive feedback on Twitter/X and tag your product. This creates authentic social proof and makes it easy to collect testimonials.

Update the Locale File

Open locales/en.json and find the testimonialsSection:

locales/en.json

{
  "homePage": {
    "testimonialsSection": {
      "title": {
        "firstLine": "Customer testimonials",
        "secondLine": "and social proof"
      },
      "description": "Share feedback from satisfied customers\nto build trust and credibility.",
      "testimonials": [
        {
          "tweetId": "1938617767948951952"
        },
        {
          "tweetId": "1947845810533945433"
        }
      ],
      "cta": {
        "text": "Share your feedback",
        "href": "https://twitter.com/intent/tweet?text=@YourHandle"
      }
    }
  }
}

Add Your Testimonials

Add new testimonial objects to the testimonials array:

locales/en.json

"testimonials": [
  {
    "tweetId": "1938617767948951952"
  },
  {
    "tweetId": "1947845810533945433"
  },
  {
    "tweetId": "YOUR_NEW_TWEET_ID_HERE"
  }
]

Add as many as you want - the marquee will automatically scroll through them all.

Important: Make sure each Tweet ID is wrapped in quotes and is a valid Twitter/X post ID. Invalid IDs will cause the component to fail.

Customize the Section (Optional)

You can customize the section title, description, and CTA button:

locales/en.json

{
  "testimonialsSection": {
    "title": {
      "firstLine": "What our customers",
      "secondLine": "are saying"
    },
    "description": "Real feedback from real users building with Plainform.",
    "cta": {
      "text": "Leave a review",
      "href": "https://twitter.com/intent/tweet?text=Just%20launched%20with%20@YourHandle"
    }
  }
}

Customizable fields:

title.firstLine - First line of the heading
title.secondLine - Second line of the heading (styled differently)
description - Subtitle text (use \n for line breaks)
cta.text - Button text
cta.href - Button link (opens in new tab)

Preview Your Changes

Start your development server:

npm run dev

Navigate to http://localhost:3000 and scroll to the testimonials section to see your changes.

Hot reload: Changes to locales/en.json require a page refresh to see updates.

Deploy Your Changes

Once you're satisfied:

git add locales/en.json
git commit -m "Add customer testimonials"
git push origin main

Your changes will be automatically deployed if you're using Vercel.

Verification

After deployment, verify your testimonials:

Visit your homepage
Scroll to the testimonials section
Confirm all tweets load correctly
Check that the marquee animation works smoothly
Test the CTA button link

Customization Options

Change Marquee Speed

Edit components/Testimonials.tsx to adjust the scroll speed:

components/Testimonials.tsx

<Marquee
  pauseOnHover
  className="[--duration:35s] [--gap:3rem]"
>

Decrease --duration for faster scrolling (e.g., 20s)
Increase --duration for slower scrolling (e.g., 50s)
Adjust --gap to change spacing between tweets (e.g., 2rem or 4rem)

Change Number of Repeats

components/Testimonials.tsx

<Marquee
  repeat={4}
  pauseOnHover
>

Change repeat={4} to show more or fewer copies of the testimonials.

Remove Gradient Fade

If you don't want the fade effect on the edges, remove these lines from components/Testimonials.tsx:

<div className="pointer-events-none absolute inset-y-0 left-0 w-[15%] bg-gradient-to-r from-surface" />
<div className="pointer-events-none absolute inset-y-0 right-0 w-[15%] bg-gradient-to-l from-surface" />

Common Issues

Tweets Not Loading

Check that:

Tweet IDs are correct and the tweets are public
You have an internet connection (tweets load from Twitter/X)
The tweets haven't been deleted
Your Twitter/X API access isn't blocked

Marquee Not Scrolling

Check browser console for JavaScript errors
Verify the Marquee component is properly imported
Ensure you have at least 2-3 testimonials for smooth scrolling

Layout Issues

Clear your browser cache
Check that Tailwind CSS is properly configured
Verify no custom CSS is conflicting with the component

Next Steps

Customize Hero Section - Update your homepage hero
Add FAQ Items - Answer common questions
Add a Blog Post - Share your story

Testimonials Component - Component documentation
Marquee Component - Learn about the marquee animation
Localization - Understanding the locale system

Add Testimonials

On this page