sesamy-content-container – Sesamy help center

Basic usage

The content container can be used purely client side or by fetching the locked content from the server.

The content container matches the current url against the user's purchases. In client side mode it displays the content from the preview of the content slot depending on if the user has access.

<html>
  <head></head>
  <body>
    <sesamy-content-container>
      <div slot="preview">
        <p>Preview content</p>
      </div>
      <div slot="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut nunc
          ante. Proin dignissim non diam a iaculis. Vivamus nec tincidunt nisl.
          Curabitur vel vehicula felis. Donec iaculis tincidunt varius.
          Curabitur tincidunt varius purus, a malesuada quam fermentum eleifend.
          Maecenas eget lorem justo.
        </p>
      </div>
    </sesamy-content-container>

    <script
      defer
      src="https://assets.sesamy.com/scripts/web-components/sesamy-content-container.min.js"
    ></script>
  </body>
</html>

Passing custom attributes

Publisher content ID

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.

Public (deprecated)

By setting the public attribute the article will be unlocked for all users.

Access level

This attribute determines which access level is required to access the locked content. The content container support the following options:

entitlement (default) The user need to have an entitlement matching the item or one of the passes

<!-- The item-src could be in one of the following formats -->
<!-- SKU (with the format <id-type>:<id>): to unlock the content for users that own any purchase option of the product -->
<sesamy-content-container access-level="entitlement" item-src="sid:test-product">
<!-- <SKU>:<purchase-option>: to unlock the content for users that own a specific purchase option -->
<sesamy-content-container access-level="entitlement" item-src="sid:test-product:purchase-option">
<!-- URL: to unlock the content for users that bought a product from a website page -->
<sesamy-content-container access-level="entitlement" item-src="https://www.test.com/test-article">

public the item is open to everyone

logged-in the item is open to logged in users

<sesamy-content-container access-level="logged-in">

Attribution mode

The content container stores the last viewed article in session storage so that it can be passed as an attribution tag to the checkout. By default this triggers on the last article that is visible within the viewport, but it can be configured to behave in different ways:

automatic (default) The attribution is stored when the article is loaded into the viewport

disabled the attribution tagging is disabled

url-based the attribution tag is only set if the itemSrc of the content container matches the current url. This reduces the risk of articles further down a page incorrectly sets the attribution tag

<sesamy-content-container attribution-mode="url-based">

Lock Modes

There are three different flows for the displaying the locked content once the sesamy-content-conainer is unlocked:

If the attribute lock-mode="embed" (default behavior): the locked content is fetched from the content slot as in the example above.

If the attribute lock-mode="encode". The locked content is embedded on the public website, but in a base64 format. It makes it harder for for instance adblockers or other tools to get access to the content by simply appying css rules.

If the attribute lock-mode="signedUrl": the content is fetched from the publisher's server using a signed url.

If the attribute lock-mode="event: an event is being emitted that could for instance be used to integrate with existing paywall solutions.

Event lock mode

If the lock-mode="event" is used, once the checkout flow is finished and the item was succesfully purchased, instead of displaying the unlocked content, a custom event sesamyAccess will be dispatched. The detail property of the event will contain the information regarding the unlocked article.

<script>
  document.addEventListener("sesamyAccess", function (e) {
    console.log(e.detail);
  });
</script>

Event payload structure

The detail property of the sesamyAccess event will contain an object with two properties:

signedURL (String)

The signed url with the unlocked content.

itemSrc (String)

An item source (url or sku) that identifies the purchased item.

Pass

The pass property is a semi-colon concatenated list of the passes that the article is part of.

Access Url

When using the lock-mode=signedUrl lock mode the content is fetched from the server. By default it fetches the locked content from the article url using the signed url, but depending on how the content is hosted it can be more convenient to fetch the locked content from a separate api path. By specifying the access-url property on the content-container it will use this url to fetch the locked content and pass the signed url in the x-sesamy-signed-url header instead:

<sesamy-content-container
    lock-mode="signedUrl"
    access-url="https://example.com/api/access/test-article"
>

Receipt Link (Deprecated)

This message is shown below the article once it is unlocked, it contains a link to the confirmation screen of the checkout where te item was purchased. It can be configured by setting the attribute receipt-link in the sesamy-content-container tag (<sesamy-content-container receipt-link="none">).

The following options are available for the receipt-link attribute:

Text (default) (receipt-link="text"): Displays a powered by Sesamy message

Embed (receipt-link="embed"): Displays a receipt in an embedded window

None (receipt-link="none"): Removes the receipt link message

The styling of the unlocked message can be configured with the following css variables:

<style>
  sesamy-content-container {
    --unlock-message-flex-direction: column; // default value is `row`
    --unlock-message-align-items: flex-start; // default value is `center`
  }
</style>

The language of the unlock message is defined by the lang attribute on the html tag:

<html lang="en">
  …
</html>

If no language is specified the language will default to english.

Gradient

The sesamy-content-container can show a gradient over the preview content by adding a gradient property to the tag.

<html>
  <head></head>
  <body>
    <sesamy-content-container gradient>
      <div slot="preview">
        <p>Preview content</p>
      </div>
      <div slot="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut nunc
          ante. Proin dignissim non diam a iaculis. Vivamus nec tincidunt nisl.
          Curabitur vel vehicula felis. Donec iaculis tincidunt varius.
          Curabitur tincidunt varius purus, a malesuada quam fermentum eleifend.
          Maecenas eget lorem justo.
        </p>
      </div>
    </sesamy-content-container>

    <script
      defer
      src="https://assets.sesamy.com/scripts/web-components/sesamy-content-container.min.js"
    ></script>
  </body>
</html>