Overview

The Embed SDK is a Javascript library for presenting Stigg components in websites that are created using Webflow, Wordpress, or plain HTML.

Under the hood, the Embed SDK wraps the React SDK, and allows you to inject the same components into your website without including any other frameworks.

You can read more about the React SDK API reference here.

Including the Embed SDK

To include the Embed SDK in the page, you need to add the following <script> tag to the <body> element:

<script src="https://cdn.jsdelivr.net/npm/@stigg/[email protected]/dist/embed-sdk.js"></script>

You also need to include the styles in the <head> tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@stigg/[email protected]/dist/embed-sdk.css" />

Retrieving the client API key

In the Stigg Cloud Console, go to Settings > Account > Environments.

Copy the Client API key of the relevant environment.

Getting started

You'll need to initialize the Embed SDK with your API key. For the list of additional parameters that can be passed please refer to the React SDK's <StiggProvider/> component.

<script>
  const stigg = Stigg({ apiKey: "YOUR-CLIENT-API-KEY" });
</script>

Render pricing plans

Use the Paywall component to render the pricing plans in a public pricing page or a customer paywall:

Add the target container element to the DOM

<body>
  <div id="paywall"/>
</body>

Render the paywall

The stigg.Paywall function accepts the same properties as the Paywall component would.

<script>
  const stigg = Stigg({
      apiKey: "YOUR-CLIENT-API-KEY",
      // You can ppass additional options 
      theme: {
        layout: {
          planMinWidth: '320px',
          planMaxWidth: '420px',
        },
      },
    });
  
    const paywall = stigg.Paywall({
      onPlanSelected: (...args) => {
        console.log('Plan selected', args);
      },
    });

    // mount the paywall to the container element
    paywall.mount('#paywall');
</script>

📘
You can find more paywall options here.

Customization options

You can customize the paywall look and feel using the options that are supported by the React SDK. You can find more information about the options here.