Quickstart

Get started integrating quickly on the front-end, and review the requirements for back-end plan and pricing queries.

Plan Builder

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.

Plan Builder Web Components

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.

Component Dependencies

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.

<!-- 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>

npm install @manifoldco/manifold-init @manifoldco/manifold-plan-table

import('@manifoldco/manifold-init/loader').then(({ defineCustomElements }) => defineCustomElements(window));
import('@manifoldco/manifold-plan-table/loader').then(({ defineCustomElements }) => defineCustomElements(window));

Adding Components to a page

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

Options are passed to the plan table web component in the form of HTML Attributes:

Handling Interactions

JavaScript Handler

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 plan
    console.log(e.planDisplayName); // human-readable name for the plan
    console.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.

Redirect Handler

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.

GraphQL

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.