Marketing Assets
Super provides a suite of components you can embed directly in your website by using our embedded javascript.
When the script is included, a superjs object is placed in the global namespace. The SDK must be initialized, once during its lifecycle, by calling the function superjs.init() with the required arguments.
Init Options
The superjs.init() function has two required arguments. The first argument is the Publishable Key. This is a unique key associated with a business and is used to authenticate with Super's backend services. Unlike the Private API Key, the Publishable Key has very limited capabilities and is suitable for embedding in a public web page.
The second function argument includes options for configuring the SDK. The following table describes these attributes, including any that are mandatory.
| Option | Description | Type | Mandatory | Default |
|---|---|---|---|---|
integrationId |
Your payment initiator ID used to determine which integration to use. | string |
Yes | N/A |
page |
The page the SDK is being initialised on. | 'home', 'cart', 'checkout', 'product-listing', 'product-detail' |
Yes | N/A |
platform |
The e-commerce platform being used (if any). | 'woo-commerce', 'shopify', 'magento', 'big-commerce', 'custom' |
Yes | N/A |
platformVersion |
The version number of the e-commerce platform. | string |
No | "unknown" |
superPluginVersion |
The version of the e-commerce Super plugin (if any). | string |
No | "unknown" |
sdkVersion |
The Super JS SDK version. This is set automatically. | string |
No | "unknown" |
The mandatory SDK options, integrationId, page, and platform, are used to determine the display theme and layout of the Web Components on a merchant's website. Each merchant has the capability to configure these on a per-page, and per-integration basis. The non-mandatory attributes are primarily used for debugging.
Components
super-banner
This is the full-width banner component that can be displayed at the top of any page.
| Option | Type | Mandatory | Default |
|---|---|---|---|
cartAmount |
number |
Yes (can be "0") | 0 |
cartId |
string |
No | "unknown" |
cartItems |
CartItem[] |
No | [] |
page |
Page |
No | "unknown" |
colorScheme |
ColorScheme |
No | "orange" |
Example usage:
<super-banner cartamount="0" page="product-listing" cartid="cart1" colorscheme="orange" cartitems="[]"></super-banner>
super-cart-callout
This is a "callout" element that can be placed on a page to highlight any offers from Super. Clicking on the callout triggers a description modal to open, that further explains & breaks down the particular offer. For this component, the offer is derived from the current cart amount.
| Option | Type | Mandatory | Default |
|---|---|---|---|
cartAmount |
number |
Yes (can be "0") | 0 |
cartId |
string |
No | "unknown" |
cartItems |
CartItem[] |
No | [] |
page |
Page |
No | "unknown" |
placement |
main, drawer |
No | main |
position |
string |
No | "primary" |
width |
string |
No | 'null' |
Example usage:
<super-cart-callout cartamount="1800" page="product-listing" cartid="examplecart" cartItems="[]"></super-cart-callout>
super-product-callout
This is a "callout" element that can be placed on a page to highlight any offers from Super. Clicking on the callout triggers a description modal to open, that further explains & breaks down the particular offer. For this component, the offer is derived from a single product and is suitable for product detail/product listing pages.
| Option | Type | Mandatory | Default |
|---|---|---|---|
productAmount |
number |
Yes (can be "0") | 0 |
productQuantity |
number |
No | 1 |
cartId |
string |
No | "unknown" |
page |
Page |
No | "unknown" |
width |
string |
No | null |
Example usage:
<super-product-callout productamount="1800" page="product-listing" cartid="examplecart"></super-product-callout>