Skip to main content

Getting Started

Boilerplate​

Here we can see an example of the different elements that have to be integrated to show the button an the widget.

<html>
  <head>
    <meta property="sesamy:price" content="10" />
    <meta property="sesamy:currency" content="EUR" />

    <style>
      sesamy-content-container {
        display: none;
      }
      sesamy-button-container {
        --background: #ffffff;
        --font-weight: 600;
      }
      sesamy-button {
        --background: #436cad;
        --border-radius: 30px;
      }
    </style>
    <script>
      document.addEventListener('sesamy-unlock', function (e) {
        console.log(e.detail);
      });
    </script>
  </head>
  <body>
    <sesamy-content-container>
      <p>...</p>
      <p>...</p>
      <p>...</p>
    </sesamy-content-container>

    <sesamy-button-container>
      <sesamy-button></sesamy-button>
    </sesamy-button-container>
    
    <script defer src="https://assets.sesamy.dev/scripts/checkout-button/sesamy-content-container.min.js"></script>
    <script defer src="https://assets.sesamy.dev/scripts/checkout-button/sesamy-button-container.min.js"></script>
    <script defer src="https://assets.sesamy.dev/scripts/checkout-button/sesamy-button.min.js"></script>
  </body>
</html>

Inside the HEAD tag​

Add Meta tags​

It's needed to get the title, description, image, price and currency.

The priority to get those values are:

title​

  1. sesamy:title meta tag
<meta property="sesamy:title" content="any title" />
  1. og:title meta tag
<meta property="og:title" content="any title" />
  1. <title> tag 
<title>any title</title>
  1. First <H1> finded
<h1>any title</h1>

description​

  1. sesamy:description meta tag
<meta property="sesamy:description" content="any description" />
  1. og:description meta tag
<meta property="og:description" content="any description" />
  1. description meta tag 
<meta property="description" content="any description" />

image​

  1. sesamy:image meta tag
<meta property="sesamy:image" content="[IMAGE_URL]" />
  1. og:image meta tag
<meta property="og:image" content="[IMAGE_URL]" />
  1. image meta tag 
<meta property="image" content="[IMAGE_URL]" />

price​

  1. sesamy:price meta tag
<meta property="sesamy:price" content="10" />
  1. og:price meta tag
<meta property="og:price" content="10" />
  1. price meta tag
<meta property="price" content="10" />

currency (DKK, EUR and SEK)​

  1. sesamy:currency meta tag
<meta property="sesamy:currency" content="EUR" />
  1. og:currency meta tag
<meta property="og:currency" content="EUR" />
  1. currency meta tag 
<meta property="currency" content="EUR" />

Styling​

The sesamy-button and sesamy-button-container elements are packaged with base styles, which can be adjusted by modifying CSS custom properties.

Besides, we can adjust any style of any of these components directly, like sesamy-content-container.

Check all the CSS custom properties of every component in the component page.

<style>
  sesamy-content-container {
    display: none;
  }
  sesamy-button-container {
    --background: #ffffff;
    --font-weight: 600;
  }
  sesamy-button {
    --background: #436cad;
    --border-radius: 30px;
  }
</style>

Handling Unlock Data​

Once the checkout flow in the iframe is finished and the item was succesfully purchased, a custom event sesamy-unlock will be dispatched, the button element can listen to that event and handle as appropriate. The detail property of the event will contain the information regarding the unlocked article.

<script>
  document.addEventListener('sesamy-unlock', function (e) {
    console.log(e.detail);
  });
</script>

Event payload structure​

The detail property of the sesamy-unlock event will contain an object with two properties:

- itemId (String)​

An sku that identifies the purchased item.

- checkoutId (String)​

The id of the checkout from which the item was purchased.

Inside the BODY tag​

<sesamy-content-container>​

The sesamy-content-container element is used to hide content on the client-side.

<html>
  <head>
    <style>
      sesamy-content-container {
        display: none;
      }
    </style>
  </head>
  <body>
    <sesamy-content-container>
      <p>...</p>
      <p>...</p>
      <p>...</p>
    </sesamy-content-container>
    
    <script defer src="https://assets.sesamy.dev/scripts/checkout-button/sesamy-content-container.min.js"></script>
  </body>
</html>

By default, the content inside sesamy-content-container will be hidden until the checkout flow is finished. The attribute show-childs-count could be used to show the the number of visible children elements when locked, and the attribute gradient with the value "true" (gradient="true") to show a gradient effect at the bottom of the inner content.

<sesamy-button>​

This component show the button to buy the article. When it's clicked, the widget will appear.

<html>
  <head>
    <style>
      sesamy-button {
        --background: #436cad;
        --border-radius: 30px;
      }
    </style>
  </head>
  <body>
    <sesamy-button></sesamy-button>
    
    <script defer src="https://assets.sesamy.dev/scripts/checkout-button/sesamy-button.min.js"></script>
  </body>
</html>

<sesamy-button-container>​

If the sesamy-button element is wrapped by the sesamy-button-container, the button will be displayed wrapped by a container with an image and a description taken from the meta tags.

<html>
  <head>
    <style>
      sesamy-button-container {
        --background: #ffffff;
        --font-weight: 600;
      }
      sesamy-button {
        --background: #436cad;
        --border-radius: 30px;
      }
    </style>
  </head>
  <body>
    <sesamy-button-container>
        <sesamy-button></sesamy-button>
    </sesamy-button-container>
    
    <script defer src="https://assets.sesamy.dev/scripts/checkout-button/sesamy-button-container.min.js"></script>
    <script defer src="https://assets.sesamy.dev/scripts/checkout-button/sesamy-button.min.js"></script>
  </body>
</html>

To overwrite the image and the description taken from the meta tags you can use the item-src and description attributes.

Component Scripts​

<script defer src="https://assets.sesamy.dev/scripts/checkout-button/sesamy-content-container.min.js"></script>
<script defer src="https://assets.sesamy.dev/scripts/checkout-button/sesamy-button-container.min.js"></script>
<script defer src="https://assets.sesamy.dev/scripts/checkout-button/sesamy-button.min.js"></script>