How does it work?
Creating and deploying a pricing plan table for your users can be done in one day, in just a few simple steps:
Determining your pricing strategy is arguably one of the most important decisions for your business. If you've already decided on a strategy, please jump to step 2 to set it up in the Plan Builder. If not, our Billing model & Subscription Period will give you the basics, but we encourage you to check out our blog for lots of valuable resources to help guide your decision (we've been doing this a while).
Plan Builder is a tool that anyone on your team can use to click, drag, and toggle their way to a standard pricing table that showcases your product plans and corresponding features.
Plans
Define your plans with their associated feature sets. We start you with 3 plans to show what’s possible but please add or remove as many plans as you need with the plus button on the right.
Features
Configure your product's features such as rate limits, maximum storage, etc. To add a feature, click the feature row on the left to open the feature editor. Name your new feature, and specify the type of feature you want it to be. There are currently six types to choose from.
Text
Checkbox
Pay-as-you-go (Metered)
Multiple Choice
Toggle
Numeric Range
Customize your call to action buttons to call out to your own HTTP endpoint or handle the event on the client in Javascript. From there, you can call out to Stripe, Chargebee, or other payments platform and provision any related services. Because the Manifold Web Component talks to your own action or handler, there are no restrictions on what you can do or the payments platform you can use.
Preview your plans before they get published. Grab the URL in the browser to share with your team.
Once you are satisfied with your product's pricing plans, publish them to make them live.
Save and publish plans
Simply Log in to save and publish your plans. All changes will be saved and automatically published to everywhere you have your embed code deployed, as well as the GraphQL API.
Update plan tables
When logging back into the Manifold Console, you will see all of your Products. Simply click the Edit button to go back into edit mode for each one. Publishing them again will update your pricing table and the GraphQL API.
Copy and paste the two HTML snippets into your website. When you save and publish changes to a plan, it's updated anywhere you've deployed the snippet.
The modern Web Component architecture lets you simply copy and paste an embed code to display your pricing plan table wherever you want.
Web components are compatible with most popular Javascript frameworks:
Framework | Supported? |
Vanilla JS (no framework) | ✅ |
Angular | ✅ |
React | ✅ |
Vue | ✅ |
Ember | ✅ |
Embed your newly created and ready-to-use pricing plan table into your frontend with two small HTML snippets. The pricing plan table is a Stencil web component. Stencil builds web components that run natively or near-natively in all widely used desktop and mobile browsers.
When a user clicks on your plan’s call-to-action button, the Manifold web component passes key:value pairs which contain information about the plan and any plan settings that have been selected. Depending on whether you selected "URL" or "Javascript action" for the CTA event above, you will either need to create a corresponding HTTP endpoint or a Javascript handler to handle the CTAClick event emitted when a user hits the call-to-action button for a given plan. What you do after that is dependent on your specific subscription, provisioning and/or billing workflows. Either way, you will need to query our GraphQL API to retrieve the features associated with the given plan.
GraphQL API
Access Manifold as the single source of truth for your plans and pricing, during signup flows identify what entitlements should be enabled for that user.
Customize your Call-to-Action (CTA) buttons to send users to a Stripe checkout flow or any billing or contact journey you want.
