Go to upmind.comTry Upmind for freeGitHub
Documentation
Start typing to searchā€¦

PlanCard Widget (Alpha)

šŸš§

Attention

This widget is currently in alpha. The setup and customisation processes for this widget are subject to change. Please exercise caution when considering its use in production environments, as future updates may alter functionality.

Our new 'PlanCard' widget is designed to streamline the display of products, currency-correct pricing, and automatically applied promotions directly from your Upmind instance. This widget eliminates the need for custom design and development of plan cards, ensuring that pricing information remains current and accurate. Optimised for both light and dark modes, the widget's appearance can be effortlessly customised to match your branding with the use of CSS variables. There is even localisation baked-in for certain languages - and more will be supported soon.

To start using the plan card widget today, follow these simple step-by-step instructions:

Step 1: Add Required Scripts

Ensure our primary upm-widget.js script is included in your web pages. This script initiates and enables the widget functionalities. Append the following line to the <body> section of your HTML document:

<script type="module" src="https://embed.upmind.app/upm-widget.js"></script>

For optimal performance, it is recommended to establish a pre-connection and prefetch DNS requests for the Upmind domain. Include these lines in the <head> section as well:

<link rel="preconnect" href="https://embed.upmind.app">
<link rel="dns-prefetch" href="https://embed.upmind.app">

Step 2: Embed the Widget

To embed the PlanCard widget into your page, place the following code where you would like the widget to appear:

<upm-widget as="PlanCard" locale="en"></upm-widget>

Note: The as attribute is case-sensitive and specifies the type of widget to load.

Step 3: Configure the Widget

You can customise each widget by passing properties and variables using the bind attribute. This attribute accepts a JSON-stringified object of the properties you wish to set. For example:

<upm-widget as="PlanCard" locale="en" bind="{'id':'93e8d569-d072-4566-772c-d4e853121607','currencyCode':'cad'}"></upm-widget>

Below is a list of all the properties you can configure for the PlanCard widget along with their types. All props are optional, although a valid catalogue product id is required if you wish to dynamically pull pricing and details from Upmind.

{
    ctaText?: string;
    currencyCode?: string;
    description?: string;
    features?: { label: string; included: boolean }[];
    highlightText?: string;
    href?: string;
    id?: string;
    isFramed?: boolean;
    isHighlighted?: boolean;
    price?: string;
    priceSuffix?: string;
    priceSummary?: string;
    showDescription?: boolean;
    showImage?: boolean;
    showLMFP?: boolean; // Show [L]owest [M]onthly [F]rom [P]rice
    title?: string;
  }

Step 4: Customising Colours

The new Upmind widgets allow for easy customisation of colours to align with your website's branding. You can override the default widget colours by setting --upm CSS variables at a root or element level. If you have multiple widgets on a page, the easiest way is to define these variables within a <style> block in the <head> section of your HTML document ā€“ for example:

<style lang="css">
  :root {
    --upm-primary-color: 239 125 0;             /* Primary color in raw RGB */
    --upm-primary-contrast-color: 255 255 255;  /* Primary contrast color in raw RGB  */
    --upm-success-color: 239 125 0;             /* Success color in raw RGB */
  }
</style>

The following variables are available to you, however these are subject to change whilst in alpha:

--upm-lm-color: 226 232 240;
--upm-lm-contrast-color: 17 24 39;
--upm-dm-color: 17 24 39;
--upm-dm-contrast-color: 255 255 255;

--upm-primary-color: 1 143 253;
--upm-primary-contrast-color: 255 255 255;
--upm-secondary-color: 5 195 222;
--upm-secondary-contrast-color: 255 255 255;
--upm-info-color: 59 130 246;
--upm-info-contrast-color: 255 255 255;
--upm-success-color: 16 185 129;
--upm-success-contrast-color: 255 255 255;
--upm-caution-color: 253 224 71;
--upm-caution-contrast-color: 0 0 0;
--upm-warning-color: 251 146 60;
--upm-warning-contrast-color: 255 255 255;
--upm-danger-color: 239 68 68;
--upm-danger-contrast-color: 255 255 255;

Here's a full example

<html lang="en">
  <head>
  	<title>PlanCard Demo</title>
    <link rel="preconnect" href="https://embed.upmind.app">
    <link rel="dns-prefetch" href="https://embed.upmind.app">
    <style lang="css">
      :root {
        --upm-primary-color: 239 125 0;
        --upm-primary-contrast-color: 255 255 255;
        --upm-success-color: 239 125 0;
      }
    </style>    
  </head>
  <body>
    <upm-widget as="PlanCard" locale="en" bind="{&quot;id&quot;:&quot;93e8d569-d072-4566-772c-d4e853121607&quot;,&quot;title&quot;:&quot;WordPress II&quot;,&quot;isHighlighted&quot;:false,&quot;features&quot;:[{&quot;id&quot;:162,&quot;label&quot;:&quot;**100** Websites&quot;},{&quot;id&quot;:164,&quot;label&quot;:&quot;**Unlimited** Bandwidth&quot;},{&quot;id&quot;:163,&quot;label&quot;:&quot;**50 GB** NVMe Disk Space&quot;},{&quot;id&quot;:165,&quot;label&quot;:&quot;**Free Domain Name**&quot;},{&quot;id&quot;:167,&quot;label&quot;:&quot;**Free Website Migration**&quot;},{&quot;id&quot;:166,&quot;label&quot;:&quot;**Daily Backups** Included&quot;},{&quot;id&quot;:168,&quot;label&quot;:&quot;**Optimised** for WordPress&quot;}],&quot;showDescription&quot;:false,&quot;showImage&quot;:false,&quot;showPriceSummary&quot;:false,&quot;currencyCode&quot;:&quot;cad&quot;}"></upm-widget>
    <script type="module" src="https://embed.upmind.app/upm-widget.js"></script>
	</body>
</html>

Updated 25 days ago