freemius / pricing-page

Freemius pricing page v2.0

Freemius pricing page v2.0

A modern, API-driven, ReactJS-based pricing app for Freemius sellers.

Note: This pricing app is currently in Beta. Once out of Beta, its compiled version will be shipped as part of the Freemius' WordPress SDK.

Why?

Faster Development | Modern Technology - ReactJS

Freemius current in-dashboard pricing page was initially developed back in 2015. Obviously, the page has undergone extensive development as we’ve added many features throughout the years. But the front-end technologies it uses are already outdated, making the maintenance, bug fixing, and new features development, much slower.

Flexibility | Coverage of More Use-Cases

After seeing so many pricing structures, we have a much better understanding of the limitations of the legacy pricing page. For example, if you have a single paid plan with several site-level prices (e.g., single-site, 3-sites, and 5-sites prices), the current pricing page will only show a single package with multiple price options. The new pricing page is much "smarter" and facilitates many pricing use-cases we haven't supported before. For the particular example mentioned above, the new pricing page will expand that single plan into multiple packages according to the number of site-level prices you offer.

Responsiveness | Mobile-Friendly

While most of the traffic in the WP Admin is still happening via desktop devices, we do see a growing trend of in-dashboard purchases through mobile devices. The current pricing page is responsive but not very mobile-friendly, as one of the main challenges is figuring out how to present multiple packages in a user-friendly way. After reviewing dozens of mobile-friendly pricing pages, we believe that we cracked it!

Freedom | Open-Source

One of the main lessons learned over the years with regards to pricing pages is that it's impossible to cover all use-cases. While there are many benefits to offering the pricing page as a service, we decided to open-source it and give you complete flexibility to modify it as you wish, something that is currently impossible since it's running remotely from our end.

How can I use or test it in my own plugin or theme?

1. Check out the pricing-page repo.
2. Make sure you have the latest LTS of node (v16 at the time of writing) installed.
3. Switch to the develop branch if you want the most up-to-date version. Keep using the master branch if you want the stable version.
4. Run npm install.
5. Run npm run build (it will create a dist directory).
6. Replace the WordPress SDK version integrated with your plugin/theme with at-least the 2.4.3 version.
7. Copy the the dist folder into the SDK's /includes folder and rename it to freemius-pricing.
8. That’s it! If you navigate to the pricing page you'll see the new pricing app in action.

How to create my own pricing app version?

Once the pricing app is out from Beta mode, its compiled version will be shipped by default as part of the WordPress SDK, and that would be the version that is loaded by default. If you want to load a custom pricing app version for your product, make sure to follow these steps.

A more detailed and developer oriented guide with watch tasks can be found in our Contributors Guide.

1. Fork the develop branch of the pricing-page repo.
2. Run npm install to download all the necessary dependencies.
3. Edit the app as you wish.
4. Once ready, run npm run build (it will create a dist directory).
5. Copy the dist folder into your plugin/theme's main folder and rename it to freemius-pricing.
6. Kindly follow the instruction below for your plugin or theme.

IMPORTANT: Do not add it to the SDK because it will be overridden the next time you upgrade the SDK).

Adding custom pricing page in your Plugin

Set the custom pricing app path using the freemius_pricing_js_path filter:

<?php
    function my_custom_pricing_js_path( $default_pricing_js_path ) {
        return plugin_dir_path( __FILE__ ) .
            '/path/to/your/freemius-pricing.js';
    }

    my_fs()->add_filter( 'freemius_pricing_js_path', 'my_custom_pricing_js_path' );

Please note the filter freemius_pricing_js_path expects the absolute path to the main JavaScript file.

Adding custom pricing page in your Theme

Set the custom pricing app path using the same freemius_pricing_js_path filter. But please note the difference in the code to get the active theme directory.

<?php
    function my_custom_pricing_js_path( $default_pricing_js_path ) {
        return get_stylesheet_directory() .
            '/path/to/your/freemius-pricing.js';
    }

    my_fs()->add_filter( 'freemius_pricing_js_path', 'my_custom_pricing_js_path' );

If for some reasons, you are using a child theme and would like to refer to the parent theme for the SDK and the pricing app, please use get_template_directory instead.

<?php
    function my_custom_pricing_js_path( $default_pricing_js_path ) {
        return get_template_directory() .
            '/path/to/your/freemius-pricing.js';
    }

    my_fs()->add_filter( 'freemius_pricing_js_path', 'my_custom_pricing_js_path' );

If for some reasons, the output of the get_stylesheet_directory is filtered in an unexpected way, you can use this:

<?php
    function my_custom_pricing_js_path( $default_pricing_js_path ) {
        return get_theme_root( get_stylesheet() ) .
            '/path/to/your/freemius-pricing.js';
    }

    my_fs()->add_filter( 'freemius_pricing_js_path', 'my_custom_pricing_js_path' );

How to setup the development environment for contributions

Please our Contributors Guide.

pricing-page's Issues

Wrong prices displayed: missing values after "."

In the div "fs-selected-pricing-amount" the values after the "." are missing, see screenshoot above

Right prices are 3.99 and 7.99, as you can see in this second screenshoot

Too big size of production build

The result size of production build's file (freemius-pricing.js) is 2.5Mb.

Why it is so big? This is a size of the average website, but there is only 1 page with several pricing blocks and slider.

I think you should find out why the file is so heavy and try to reduce its' size.

(I am a React-developer, so I know that a lot of React-code can weigh a little in the production build)

Able to check out with hidden prices

It looks like if plans have different prices, the default price is always 1 site, even if this price is hidden. Here's the pricing page:

When checking out, even if the 3 sites license is selected, it defaults to single site license on checkout:

I believe this is because:

1. selectedLicenseQuantity state is only updated on change, and not on load.
2. selectedLicenseQuantity is a single value and not scoped to plans specifically. I think each plan component should keep track of this value, rather than a global state value. Or if stored in global state, should be an array or object to keep track of which plan has which quantity selected.

This would allow for more flexibility.

Update the readme to include development workflow

Add information on developing the pricing page (rather than just testing it).

e.g. Show how to use symlinks to dynamically add the dist folder to the freemius folder on your local WP site. I think it's important we get as many Freemius partners as possible testing/contributing to the pricing page, so it makes sense to make this as easy as possible.

Checkout scrolling issue

When in the checkout page, the bottom clips when you scrolll the page

Problems with blocks at mobile devices

Everything is quite OK at the desktops (all visible) and tablets (horizontal slider):

But nothing works on mobile phones: Only one block is visible and "PRO" titles are not clickable:

Better handling for single plans (but offers multiple site tiers)

Here's my current pricing. I only have 1 product plan but available in different number of sites. My plans are annual only.

When I try out the new pricing page, I'm getting this:

A few things:

1. Both tiers say "Professional", is there a way to change this?
2. For annual plans, is there a way to display an annual price instead of the monthly price? (per year instead of per month)
3. Maybe it's better to add some default colors to the heading and button
4. Is there a way to note a "Most popular" plan?

For 1 and 2, the pricing can end up like this:

Option to select products / bundles to view in the pricing page

It would be great to integrate the option for defining products. In my case i have only one product without different plans and based on more source code security i will be using add-ons. Therefore it would be great to define up to four products for the pricing page. In my case these would be bundles with the main plugin and different add-ons.

Title and Logo aren't styled consistently

I know the project is in development, but I've been testing it out and I noticed the title and logo styling aren't consistent with the rest of the page:

I've already got a fix and will request permission to create a branch, then a pull request. Thanks!

Add readme to master branch so docs are visible on repo landing page

At the moment there is no comprehensive readme on the master branch so nothing displays for visitors to the repo landing page. Until develop is merged into master we should probably update the readme in the mean-time.

Add a new build script for development

At the moment there's only a production build step which means every time the code is edited you have to manually npm run build.

To make the workflow more effiecient it would be better to also have a development script that watches files and builds a development version of the pricing page (i.e. code not minified etc. to keep compile time to a minimum).

Filter `freemius_pricing_js_path` expects absolute path, not relative

🐞 bug report

Behavior:

• In the documentation, it says the filter freemius_pricing_js_path expects a relative path to the freemius-pricing.js.
• But in reality, it expects the absolute path.

So given, I have the js file in assets/freemius-pricing/freemius-pricing.js the following code will not work:

// BAD CODE, WILL NOT WORK
my_fs()->add_filter(
	'freemius_pricing_js_path',
	function( $default_path ) {
		return '/assets/freemius-pricing/freemius-pricing.js';
	}
);

But this will

// GOOD CODE
my_fs()->add_filter(
	'freemius_pricing_js_path',
	function( $default_path ) {
		return \plugin_dir_path( __FILE__ )
			. 'assets/freemius-pricing/freemius-pricing.js';
	}
);

Versions: (*)

• Freemius Pricing Page Version: develop
• Freemius SDK Version: develop (2.4.2.2)
• WordPress Version: 5.6
• PHP Version: 7.4