sesamy-paywall-wizard – Sesamy help center

The paywall wizard component is a dynamic paywall that fetches product configuration from the server. I can either be used as a UI in an article paywall or standalone on a landing page.

Basic usage

The paywall wizard can show a list of different products and optionally also sell the current article as a single purchase.

<html>
  <head></head>
  <body>
    <sesamy-paywall-wizard item-src="https://example.com/article" settings-url="https://example.com/paywall-wizard.json">
		</sesamy-paywall-wizard>

    <script type="module">
      import "https://assets.sesamy.com/scripts/web-components/sesamy-bundle.min.js";
    </script>
  </body>
</html>

The wizard is configured by configuring a link to a json file that either can be statically hosted or served via an api. Below is an example of a configuration file:


{
	"logoSrc": "https://example.com/logo.svg",
	"color": "#D62802",
	"subscriptionsUrl": "https://www.example.com/prenumerera",
	"vendorId": "vendorId",
	"singlePurchase": {
		"type": "single",
		"text": "Köp artikeln",
		"description": "Betala och få tillgång till innehållet direkt.",
		"currency": "kr",
		"discountCodes": []
	},
	"subscriptions": [
		{
			"type": "monthly",
			"text": "3 månader för 49kr!",
			"description": "Efter kampanjperioden 149 kr/mån. Ingen bindningstid!",
			"price": "49",
			"currency": "kr",
			"recurringPaymentText": "3 mån",
			"itemSrc": "itemSrc",
			"po": "poID",
			"discountCodes": []
		},
		{
			"type": "yearly",
			"text": "Ett år för 995kr",
			"description": "Du sparar 793 kr. Prenumerationen förnyas automatiskt årsvis.",
			"price": "995",
			"currency": "kr",
			"recurringPaymentText": "år",
			"itemSrc": "itemSrc",
			"po": "poID",
			"discountCodes": []
		}
	],
	"subscriptionFeatures": [
		"Tagline 1",
	  "Tagline 2",
	],
	"subscriptionPurchaseText": "3 månader för bara 49 kr!",
	"termsOfServiceUrl": "https://www.example.com/prenumerationsvillkor",
	"privacyPolicyUrl": "https://www.example.com/personuppgiftspolicy",
	"footerPaymentMethods": ["visa", "amex", "mastercard", "klarna", "google-pay", "apple-pay", "swish"],
  "showLoginButton": true
}

API Reference

json-data-id (String): This attribute specifies the id of a <script type="application/json"> tag within the HTML document from which to pull JSON data. Default: 'paywall-wizard'.

settings-url (String): Defines the URL from which to fetch JSON settings. When set, this attribute takes precedence over json-data-id, and the component fetches its configuration from the specified URL.

publisher-content-id (String): The ID of the content on the publisher side. It can be used to fetch data about the content from a sesamy-content-data web component with a matching ID.

item-src (String): If the singlePurchase data is set in the json file, the product displayed in the checkout will be taken from the current URL, if it should be a different product then the product could be got from the item-src attribute. The external item could be both, an article on a separate url or a pass.

redirect-url (String): The redirect URL to go once the checkout is completed. Default: window.location.href.

currency (String): The price of the currency purchase item.

price (String): The price of the single purchase item.

separate-products (String): If true, the subscriptions are displayed with a separated between each other. Default: false.

show-login-button (String): If true, it shows the login button at the top of the wizard. Default: false.

utm-source (String).

utm-medium (String).

utm-campaign (String).

utm-term (String).

utm-content (String).

Example

<!-- Pulling settings from URL -->
<sesamy-paywall-wizard item-src="https://example.com/article" settings-url="https://example.com/paywall-wizard.json">

<!-- Pulling settings from inline HTML -->
<script type="application/json" id="data">
  {
    "data": {
	    // See example JSON data in the Basic Usage section
			...
    }
  }
</script>
<sesamy-paywall-wizard item-src="https://example.com/article" json-data-id="data">

Styling

The sesamy-paywall-wizard element is packaged with base styles, which can be adjusted by modifying CSS custom properties.

The list of CSS custom properties are (the value set is the default value, if the property is not presented it will take that value):

<style>
	sesamy-paywall-wizard {
	  --font-family: "Helvetica"; // font family
	  --image-height: 30px; // logo height
	  --primary-color: #000; // background color of the button
	  --button-color: #fff; // text color of the button
	  --form-subtitle-color: var(--color, #3E445F); // text color of the subtitle
	  --form-subtitle-font-weight: 400; // font weight of the subtitle
	  --privacy-text-color: var(--color, #3E445F); // text color of the privacy text
	  --headline-color: var(--color, #000); // text color of the headline
	  --perks-color: var(--color, #3E445F); // text color of the perks
	  --tag-background: #fdc306; // background color of the tag
	  --tag-font-family: 'Times New Roman'; // font family of the tag
	  --tag-color: #000; // text color of the tag
  }
</style>