Get started integrating quickly on the front-end, and review the requirements for back-end plan and pricing queries.
Before you can begin integrating with Plan Builder, you should have a Product defined, with plans. If not, review the Plan Builder Quick Start to create your first plan and get started.
Once a Product and it's Plans have been created, the primary point of integration for Plan Builder is in the web components Manifold offers through it's Content Delivery Network. They are manifold-init
and manifold-plan-table
. These components create the full plan-selection experience for users on your pricing page, and integrate with vanilla JavaScript, or any back-end service.
Manifold's web components are built using Stencil. For more information about integrating with your site, please refer to the latest framework docs.
In order to use the Web Components for the plan table, you must include them as dependencies. You can load the required JavaScript libraries from our CDN, or use NPM to include the source locally.
Place the following immediately after the <body>
tag:
<!-- modern browsers --><script async type="module" src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.esm.js" ></script><script async type="module" src="https://js.cdn.manifold.co/@manifoldco/manifold-plan-table/dist/manifold-plan-table/manifold-plan-table.esm.js" ></script><!-- legacy browsers --><script nomodule src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.js" ></script><script nomodule src="https://js.cdn.manifold.co/@manifoldco/manifold-plan-table/dist/manifold-plan-table.js" ></script>
If you build your site with npm using webpack, create-react-app, etc., run:
npm install @manifoldco/manifold-init @manifoldco/manifold-plan-table
And add the following code to your application, ideally to your entry file so it’s loaded as early as possible:
import('@manifoldco/manifold-init/loader').then(({ defineCustomElements }) => defineCustomElements(window));import('@manifoldco/manifold-plan-table/loader').then(({ defineCustomElements }) => defineCustomElements(window));
After the plans have been saved and published, you can add the pricing table on your presentation page, by using the web components and embed code given to you when you Save and Publish a new product, it looks something like:
<manifold-init client-id="[your-client-id]"></manifold-init><manifold-plan-table base-url="/signup" cta-text="Get Started" client-id="[your-client-id] product-id="[your-product-id"></manifold-plan-table>
Options are passed to the plan table web component in the form of HTML Attributes:
Name | Required | Description | Example |
| Y | Your product’s identifier |
|
| Y | Your account identifier (helps us associate analytics to your account) |
|
| | CTA redirect URL (plan ID & user selection will be appended to the end of the URL in a query string) |
|
| | Change the ”Getting Started” default text. |
|
You can set a CTAClick
event listener on the cta-button
in <manifold-plan-table>
(as opposed to setting a redirect URL on the plan call-to-action button in Plan Builder). Attach your event listener to the manifold-plan-table
node, rather than document
.
For a manifold-plan-table
with an id
value of plan-table
:
<manifold-plan-table id="plan-table" product-id="234mbngepc31ebkb0dp7j12b7ukjy" client-id="[MY_CLIENT_ID]" base-url="#"></manifold-plan-table>
You can add an event handler for CTAClick
:
document.getElementById("plan-table").addEventListener("CTAClick", e => {console.log(e.planID); // plan ID for the clicked planconsole.log(e.planDisplayName); // human-readable name for the planconsole.log(e.userSelection); // feature-selections by the user}
For more in-depth information on manifold-plan-table
and events, see the manifold-plan-table
reference documentation.
When a user clicks on your plan’s call-to-action button and no JavaScript handler is used, the Manifold Web Component appends key-value pairs as GET
query parameter pairs to the base-url
defined on the manifold-plan-table
component. These key-value pairs contain information about the plan that has been selected, and the feature customization.
For example, if the base-url
option is /signup
, and your customer selects the “Left Shark Plan” which has a configurable “color” feature. Your customer has chosen “Light Blue” for their “color.” The Manifold web component will send a request to your base url that looks something like this:
/signup?planId=123&color=light-blue
The query string will contain a key-value pair for the planId
that has been selected and for each user-configurable feature in that plan.
You can find the planID
and feature label in the Plan Builder UI.
Once the user has selected their plan and feature customization, and you are ready to process the information on the back end, you can use our GraphQL API to query information about Plan Builder products, or plans for your product.In the Frontend Quickstart guide, we saw how to retrieve selected plan and feature information when a user clicks a CTA button for a plan. This selection information can be handled by a JavaScript handler and then passed to your back-end for processing, or you can use a GET
redirect with query parameters for the selection information.
You can find more information on the GraphQL APIs in the reference documentation.