Embedding Plan Picker

You can embed our Plan Picker on your website easily by using our integration script.

Embedding Options

The embedding scripts supports multiple operations as explained below. Depending on the operation, there are different number of arguments and each argument positions might mean something different. All configurations always start with the operation name as the first argument (i.e sb({operationName}, ...{args}))

Initializing the SiteId

(Required)
You need to initialize the embedding script by specifying the "Site Id". You can do this by using the siteId operation as follows:

sb("siteId", "{your_siteId})");

Where:

{your_siteId} is the case-sensitive site id you want to use and which contains the plans you need to attach. Your Subsbase Admin Portal link is in the form of https://{siteId}.subsbase.io

This operation should exist only once, adding it more than once can lead to unexpected behaviour.

Attaching Plan Picker

Using the attachPlanPicker operation will create and display a button on the web page and attach the Plan Picker to it upon click.

sb("attachPlanPicker", "{mainConfig}", "{mobileConfig|hideOnMobile}");

Where:

{mainConfig} is the main configuration object.
{mobileConfig|hideOnMobile} is the mobile configuration object OR a boolean value to specify whether to hide the plan picker on mobile devices.
Mobile configuration will be used on devices with screen width lower than 1024px.

Configuration Object Properties (Applies for both main and mobile config)

  {
    text: String,
    shape: String,
    icon: String,
    textColor: String,
    backgroundColor: String,
    position: String,
    alignment: String,
    uprightText: Boolean,
    showDelay: Number,
    flashDelay: Number,
    planPicker: {
      disableGrouping: Boolean,
      displayAll: Boolean,
      expanded: Boolean,
      collapsable: Boolean,
      sortable: Boolean,
      defaultSorting: String
    }
  }

{text} Text shown on the button.
{shape} Button shape; with two options: "rectangle" and "circle", "rectangle" is the default value.
{icon} Base64 image string, available only if shape is set to "circle".
{textColor} Button Text Color; (hex, rgb or rgba).
{backgroundColor} Button Background Color; (hex, rgb or rgba).
{position} Button horizontal position on screen; with two options: "right" and "left", "right" is the default value.
{alignment} Button vertical alignment; with three options "top", "center", and "bottom". "center" is the default value.
{uprightText} Button text will be displayed vertically from top to bottom, true is the default value.
{showDelay} The delay in which after the button will be displayed on screen. 0 is the default value.
{flashDelay} The delay to flash the button on the screen for catching user's attention. 0 is the default value.
flashDelay should be higher than showDelay for it to work properly.
Above configuration is for the Plan Picker button, and the below configration is for the Plan Picker itself:
{disableGrouping} Disable Grouping Plans by Billing Cycle, false is the default value.
{displayAll} Display the "All" Group which displays all of the plans regardless of the billing cycle, true is the default value.
{expanded} Plan Cards will be expanded by default, false is the default value.
{collapsable} Make Plan Cards collapsable/expandable, true is the default value.
{sortable} Enable/Disable Plans sorting, true is the default value.
{defaultSorting} Default sorting order, "price:ascending" is the default value which will sort by Price from Lowest to Highest. Available options are "price:ascending", "price:descending".

If the mobile configruation object is not specified or any of its properties, main configuration object will be used.

If the main configruation object is not specified or any of its properties, the below default configuration will be used.

Default Configuration Object

{
    text: 'Subscribe',
    shape: 'rectangle',
    icon:
    'data:image/png;base64,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',
    textColor: '#f7b547',
    backgroundColor: '#20407d',
    position: 'right',
    alignment: 'center',
    uprightText: true,
    showDelay: 0,
    flashDelay: 0,
    planPicker: {
      disableGrouping: false,
      displayAll: true,
      expanded: false,
      collapsable: true,
      sortable: true,
      defaultSorting: 'price:ascending'
    }
}

Hide Plan Picker on Mobile Devices

You can completely hide the Plan Picker on mobile devices by passing true instead of the mobile configuration object {mobileConfig|hideOnMobile} which will enable the hideOnMobile flag.

Example:

sb("attachPlanPicker", "{mainConfig}", true);

Putting it all together

Put the below script before your website's closing head tag </head>.

HTML

<script>
  (function (d, o, s, a, m) {
    a = d.createElement(o);
    m = d.getElementsByTagName(o)[0];
    a.async = 1;
    a.defer = 1;
    a.src = s;
    m.parentNode.insertBefore(a, m);
  })(document, "script", "https://embed.subsbase.com/sb.min.js");
  window.sb =
    window.sb ||
    function () {
      (sb.s = sb.s || []).push(arguments);
    };
  sb("siteId", "{your_siteId}"); // Required
  sb("attachPlanPicker", "{mainConfig}", "{mobileConfig|hideOnMobile}"); // Required. Only once or unexpected behavior may occur!
</script>

Integration GuideEmbedding Checkout

Integration GuideEmbedding Customer Portal