Integration

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.

Requirements

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.

JavaScript support for Manifold Web Components

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.

Framework

Supported?

Vanilla JS (no framework)

Angular

React

Vue

Ember

Intended Setup

Plan Builder works by providing three components:

Plan Design

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.

Web Components

Manifold provides easy to use Web Components for integrating with your front-end. The components are easy to use, customize and style.

The components provide full plan selection and customization for users, and plan selection handling can be implemented on the front-end in JavaScript, or as a 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.

GraphQL

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

Steps

Build Product Plans

Build a Product and Plans using the Plan Builder interface by following the Quick Start guide.

Add Embed Code

After your Product and Plans have been created, save and publish them so get an embed code.

JavaScript Handler

Interactions and selections that are to be handled client-side by your JavaScript code, and be done with with a JavaScript handler.

Redirect Handler

Interactions and selections that are to be handled server-side by back-end code, can be done with the Redirect handler.

Querying for Plan information

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.

Styling

The Web Components are highly customizable for styling. For more information, see the Styling section.