Embed your pricing

An overview of the PlanGraph Plan Builder interface.

Overview

After storing your plans, features, and values in PlanGraph you can choose to use one of our Web Components to display your data on your website.

What is an embed?

An embed is the combination of a script include and web component markup that when included in your application can automatically handle structuring and displaying your plans.

Each embed has a unique ID so that they can be independently customized without needing to update the code added to the page.

To install an embed simply copy and paste the two scripts onto your page. Or learn more about our components here.

Create your first embed

When viewing a specific product in PlanGraph you have two main tabs: Plan Builder, and Embeds. When you enter the embeds tab you will be given the option to create a new embed:

  1. Click the "Create new embed" button

  2. Provide a name for your embed, shown in your embeds list

  3. Customize your embed

Customizing your embed

Our Plan Table component has a few customization options that enable you to change the look and behavior of the buttons for each plan.

From the component preview tab, to change the text or behavior of a button:

  1. Click the button you wish to customize (which defaults to Get Started)

  2. Change the button text

  3. Select the button's action

  4. Click the "Save changes" button

Saved changes are updated instantly wherever the embed is included.

Create additional embeds

Your account can create multiple embeds. If you wish to display your pricing and packaging with a different behavior simply following the embed creation process again.

Deleting an embed

Destroying an embed will cause a JavaScript error on any page that the code had previously been added to.

To remove the embed:

  1. Select the embed from the list you wish to delete

  2. Click the trash can icon at the top right of the component preview

  3. Click the "Delete embed" confirmation button