Webflow, Wordpress and plain HTML
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.
Updated 3 months ago