When evaluating a SaaS, I often just skip the landing page and all of its marketing fancy words and go straight to Pricing page.

Usually, I will find what I need there: what features does the SaaS has, and how much do I have to pay to get what features.

For that reason, I added GIFs to every single feature of my SaaS pricing page:

Demo

On mobile:

That's 27 GIFs and took me a whole morning! You can see it here: https://blackmagic.so/membership/

I like my pricing page a lot. It even works on mobile! And people seem to like it too!

If you have a SaaS, I encourage you to do the same.

How I built the tooltips

Here are the tools I used to do it:

LICEcap (free): this app record a GIF very fast and the output size is very small!

ReactTooltip (free): the React library for the tooltips. It allows you to customize the tooltip content to add other React components and images to the tooltip content. Works very well on mobile too.

The pricing page is built from a Tailwind UI template page (paid template, but you can use any other templates out there).

The code

javascript
// These are the components inside the tooltip
import WebPortalTour from 'components/tour/WebPortalTour.js';
import MobileAppsTour from 'components/tour/MobileAppsTour.js';
import BrowserExtensionsTour from 'components/tour/BrowserExtensionsTour.js';
import ScheduleTweetsThreadsTour from 'components/tour/ScheduleTweetsThreadsTour.js';
//... more

// Define the list of your "tour" like this
const TOUR = {
  TweetRealTimeMetricTour,
  PastInteractionsTour,
  BrowserExtensionsTour,
  WebPortalTour,
  MobileAppsTour,
  ScheduleRetweetsTour,
  ScheduleTweetsThreadsTour,
  // ... more
}

// In your React

The feature lines:

javascript
const renderFeature = (feature) => {
    return (
      <span
        className={classNames(
          feature.tour
            ? 'border-b border-dashed border-gray-500 cursor-default'
            : ''
        )}
        data-tip={feature.tour} // Example value "ScheduleRetweetsTour"
        data-for="tour"
        data-place="right"
      >
        {feature.name}
      </span>
    );
  };

In your React code:

javascript
<ReactTooltip
  className="tooltip-override-2"
  id="tour"
  getContent={(tourComponent) => {
    const Component = TOUR[tourComponent];
    if (Component) {
      return (
        <div className="tour-container details-popup">
          <Component />
        </div>
      );
    }
  }}
/>

Some CSS style to show the loading icons when the GIF is loading:

javascript
.details-popup img, img.loading-placeholder, video.loading-placeholder {
  min-height: 50px;
  outline: 1px solid #ccc;
  background-image: url("data:image/svg+xml,%0A%3Csvg version='1.1' id='L9' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 0 0' xml:space='preserve'%3E%3Cpath fill='%23ccc' d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  position: relative;
}

.tooltip-override-2 {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.8) !important;
}

.tour-container {
  max-width: 300px;
}

Go make your pricing page better! Good luck!

👋 Like what you read here?

Hello there, I'm Tony Dinh. I am an independent developer.

Recently, I quit my high paying job to work on my side projects with a mission to make a living from my apps and live an independent life. 🌴

🏖️ Read my story → https://newsletter.tonydinh.com/

💻 Everything about me → https://tonydinh.com

❤️ Thanks for reading!

Every pricing page should have GIFs (and how to make them)

Demo

How I built the tooltips

The code

👋 Like what you read here?