Place the following HTML where you’d like the component to appear (this works in any JS framework, or even no framework!):
<manifold-init client-id="[my client ID]"></manifold-init>
<manifold-plan-table product-id="[my product ID]" client-id="[my client ID]"></manifold-plan-table>Note that the <manifold-init> component is required only once per page for
all Manifold Components (along with its JS). If you have that installed already, you may skip that
here and in the following steps.
Place the following at the very beginning of the <body> tag:
<script async type="module" src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.esm.js" ></script>
<script nomodule src="https://js.cdn.manifold.co/@manifoldco/manifold-init/dist/manifold-init/manifold-init.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>
<script nomodule src="https://js.cdn.manifold.co/@manifoldco/manifold-plan-table/dist/manifold-plan-table.js" ></script>Place this component’s CSS in your <head> tag (optional if you want to write your own styles):
<link rel="stylesheet" href="https://js.cdn.manifold.co/@manifoldco/manifold-plan-table/dist/manifold-plan-table/manifold-plan-table.css" />Alternately, if you build your site with npm using webpack, create-react-app, etc., run:
npm install @manifoldco/manifold-init @manifoldco/manifold-plan-tableAnd 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)
);Also if using CSS from npm, import the file in a way that works for your setup (for example, webpack):
import '@manifoldco/manifold-plan-table/dist/manifold-plan-table/manifold-plan-table.css';This libary is built using Stencil. For more information about integrating with your site, please refer to the latest framework docs.
Options are passed to the component in the form of HTML Attributes:
| Name | Required | Description | Example |
|---|---|---|---|
product-id |
Y | Your Product’s identifier | <manifold-plan-table product-id="234qkjvrptpy3thna4qttwt7m2nf6"> |
client-id |
Y | Your Account identifier (this helps us associate analytics to your account) | <manifold-plan-table client-id="284ablb7scfm8oxwz9wrxpt2q0jii"> |
base-url |
The URL the buttons link to (plan ID & user selection will be appended to the end of the URL in a query string) | <manifold-plan-table base-url="/checkout"> |
|
cta-text |
Change the ”Getting Started” default text. | <manifold-plan-table cta-text="Buy Now!"> |
|
version |
The version of your product (omit for latest published product). Use version="latest" for the latest draft. |
<manifold-plan-table version="1"> |
This component emits [Custom JavaScript Events][custom-events] at key interaction points.
To begin listening for events, add a listener like so (you’ll want to make sure that this component exists in the DOM):
// your custom listener function
function myFunc(evt) {
console.log(evt);
}
document.querySelector('manifold-plan-table').addEventListener('ctaClick', myFunc); // do something on CTA clicks
document.querySelector('manifold-plan-table').addEventListener('init', myFunc); // do something on initial load
document.querySelector('manifold-plan-table').addEventListener('update', myFunc); // do something on updates| Event Name | Trigger | Returns |
|---|---|---|
ctaClick |
Fires when a user clicks the CTA | planID, planDisplayName, userSelection |
init |
Fires once when the component has loaded (broadcasts default options for all plans) | defaultSelections |
update |
Fires when a user selects a feature option (if you don’t have user-selectable features, you probably don’t need this) | planID, planDisplayName, userSelection |
This component works in all frameworks & environments, but when you first add the component in a JSX + TypeScript setup, you may see the following warning at first:
Property 'manifold-init' does not exist on type 'JSX.IntrinsicElements'.
To solve this, import the types this library ships with. Create a custom-elements.d.ts file
anywhere in your project that’s within tsconfig.json’s includes:
import { JSX as ManifoldInit } from '@manifoldco/manifold-init/loader';
import { JSX as ManifoldPlanTable } from '@manifoldco/manifold-plan-table/loader';
import { DetailedHTMLProps, HTMLAttributes } from 'react';
type StencilProps<T> = { [P in keyof T]?: Omit<T[P], 'ref'> };
type ReactProps<T> = { [P in keyof T]?: DetailedHTMLProps<HTMLAttributes<T[P]>, T[P]> };
type StencilToReact = ReactProps<HTMLElementTagNameMap> &
StencilProps<ManifoldInit.IntrinsicElements> &
StencilProps<ManifoldPlanTable.IntrinsicElements>;
// add additional Manifold Component types here if needed
declare global {
export namespace JSX {
interface IntrinsicElements extends StencilToReact {}
}
}You’ll now get TypeScript errors if you mistype an attribute while still being able to use JSX features like refs:
<manifold-init fakeproperty="foo" />
// Property 'fakeproperty' does not exist on type …