Integrating with Plan Builder is easy. Manifold provides easy-to-use Web Components, and a GraphQL API for interacting with products and plans.
In this section, we will explore what Plan Builder is from a technical perspective, and talk about the set-up required to start using Plan Builder today for pricing pages.
There are some minimal requirements to getting started:
A new or existing page in your service for the pricing plans
Ability to query GraphQL in a backend service for plan lookup
That's it! We've made integrating with Plan Builder very easy to get started with.
Manifold’s web components work the same as any other Stencil project. They can be used in any frameworkless project (“vanilla” JS) or any modern framework like React, Vue, or Angular, and even pure HTML.
Vanilla JS (no framework)
Plan Builder works by providing three components:
The Plan Builder design tool is a WYSIWYG editor for building plans and feature set pricing for products. It can be found on the Manifold Console.
To learn more about how to build plans and customize feature sets, see the Pricing and Packaging pages.
Manifold provides easy to use Web Components for integrating with your front-end. The components are easy to use, customize and style.
GET request with plan and feature set provided as query parameters.
More information on implementing the Web Components can be found on the front-end Quickstart guide.
The GraphQL API allows you to query information on plans, and products to understand the latest pricing model for your product. These queries allow you to programmatically understand your pricing model.
To find out more about how a backend implementation of GraphQL might work, see the Quickstart guide
Build a Product and Plans using the Plan Builder interface by following the Quick Start guide.
After your Product and Plans have been created, save and publish them so get an embed code.
Interactions and selections that are to be handled server-side by back-end code, can be done with the Redirect handler.
The GraphQL APIs allow you to query product, plan and pricing information to query information for a custom UI, or take action that requires plan pricing information on a user.
The Web Components are highly customizable for styling. For more information, see the Styling section.