Paywalls

​

Paywall Builder - Simplifying Pricing Form Management for Businesses

Are you tired of the complexities and delays involved in updating pricing information on your website? Do you wish there was a more efficient and hassle-free way to manage your product offerings and feature sets? We are thrilled to announce the launch of Paywall Builder, a solution that will help you to handle pricing forms.

Say goodbye to the days of manual coding and developer dependencies! With Paywall builder, businesses gain access to a powerful pricing form creation platform that empowers them to take control of their pricing strategies like never before. Our user-friendly dashboard puts the power in your hands, allowing you to effortlessly create and customize pricing forms with sets of features tailored to your unique offerings.

The core problem we solve is the time-consuming process of managing and updating pricing information on your website. In the past, businesses had to rely on developers to manually modify product details, feature sets, and prices, leading to delays and potential errors. Our solution streamlines this entire process, enabling you to make real-time updates directly through the dashboard.

The benefits of Paywall Builder are clear:

Real-Time Updates: Say goodbye to waiting for developers to make changes. With Paywall Builder, any updates you make through the dashboard are immediately reflected on your live website, ensuring that your customers always have access to the most current pricing information.

Agility and Responsiveness: Stay ahead of the competition by quickly adapting your pricing strategies, creating promotional offers, or introducing new features with just a few clicks on the dashboard. Paywall Builder empowers you to be agile and responsive to market demands.

Effortless Integration: Our SDK seamlessly integrates with your website, making the integration process a breeze for businesses of all sizes.

Customer-Centric Approach: With Paywall Builder, you can focus on delivering the best customer experience by effortlessly managing pricing forms, allowing you to dedicate more time to understanding your customers’ needs and preferences.

Integration with experimentation engine: now you can conduct experiments over different countries and audiences for your products without exhausting code integration. Everthing that you need exists in our dashbord. You can describe your products, set experiments and Paywall Builder will manage experiments for you.

With Paywall Builder and Corrily’s powerful experimentation platform, you can unlock the true potential of your global pricing strategies. From entering new markets to optimizing revenue streams, our solution empowers you to fine-tune pricing decisions for maximum impact and profitability.

​

How to start using Paywall Builder

(Currently Paywall Builder is in alpha-version and not available for all our customers)

To create a Paywall, you need to open: Product Catalog > Paywall Builder. There you can create a new Paywall. During the creation you can add or skip a package. In case when package is chosen, this package will always be used to show products.

​

Integration a Paywall into your website

Integration options:

1. React SDK
2. Javascript SDK (coming soon)

Integration via React SDK

1. Add corrily react sdk into your dependencies:

npm i --save @corriy/react-sdk

2. Nest a Paywall into your code

import * as ReactDOM from 'react-dom/client';
import { CorrilyProvider, Paywall } from '@corrily/react-sdk';
import '@corrily/react-sdk/dist/styles.css';
import './styles.scss';

const App = () => {
  return <Paywall
    onProductSelected={(product) => console.log(product)}
    highlightedProductApiId="professional"
  />
};

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <CorrilyProvider apiKey={"<API_ID>"}>
    <App />
  </CorrilyProvider>
);

3. Copy API ID from Publish tab of your Paywall and put it into apiKey prop.

Additiional information about appearence and texts customization will here apear soon!

​

Customization

​

Applying custom styles to Paywall elements

You can customize appearence of your Paywall by attaching styles to Paywall elements’ classes. All elements inside a Paywall has a prefix corrily-- to isolate Paywall classes from classes on your pricing page. Therefore, you can safely override css styles for every element inside a Paywall.

​

Custom Card component

If you want not just to change appearence of your Paywall, but also a layout, then you can use CardComponent property of the Paywall component. Here is and example how to use a custom Card component:

import { Product, CardProps } from '@corrily/react-sdk';

const CustomCard = ({product, onChoose}: CardProps) => {
  return (
    <div>
      <h1>{product.name}</h1>
      <div>{product.price}</div>
      <h3>Features:</h3>
      <ul>
        {product.features.map(feature => (
          <li key={feature.id}>{feature.name}</li>
        ))}
      </ul>
      <button onClick={onChoose}>Choose</button>
    </div>
  );
};

const App = () => {
  return <Paywall
    onProductSelected={(product: Product) => console.log(product)}
    highlightedProductApiId="professional"
    CustomCard={CustomCard}
  />
};

In this case you fully control how a Card component rendered and what should be shown.

​

Paywall parameters

You can pass additional parameters to the backend when you on receiving product list. For it you can use params property of the Paywall component. Example:

const App = () => {
  const user = useUser();
  const experiment = useExperiment();

  return <Paywall
    onProductSelected={(product: Product) => console.log(product)}
    highlightedProductApiId="professional"
    CustomCard={CustomCard}
    params={{
      dev: true,
      user_id: user.id,
      country: user.country,
      experiment_id: experiment.id,
    }}
  />
};

Full list of available parameters you can see on the page in body params section.

​

Feature Table

If you want to display a comparison table of products (where user can see a list of available features for each product to compare them), then you should use a component FeatureTable. This component should be located inside of CorrilyProvider component in your ReactDom structure.