This article will introduce how to use the Embed SDK to embed frontend components into your website.
Installation
Install via NPM
npm install @footprint-network/embed-sdk
Include via CDN
<script src="https://cdn.jsdelivr.net/npm/@footprint-network/embed-sdk"></script>
Usage
Here is a simple example demonstrating how to use the Embed SDK to embed community components into your website. The usage of other components is similar.
React Example
import { Community } from '@footprint-network/embed-sdk'
export default function Home() {
return (
<div className="w-[500px] h-[500px]">
<Community
handle="<your-community-handle>"
theme="dark"
appName="<your-app-name>"
/>
</div>
)
}
JavaScript Example
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/@footprint-network/embed-sdk"></script>
</head>
<body>
<iframe id="embed" width="500px" height="500px" frameborder="0"></iframe>
<script>
const src = GrowthlySDK.getIframeSrc({
type: 'community',
options: {
handle: '<your-community-handle>',
theme: 'dark',
appName: '<your-app-name>',
},
})
const iframe = document.getElementById('embed')
iframe.src = src
</script>
</body>
</html>
Walkthrough Example
Embed Community
import { Community } from '@footprint-network/embed-sdk'
export default function Home() {
return (
<div className="w-[500px] h-[500px]">
<Community handle="pea" appName="demo" theme="light" />
</div>
)
}
Embed Quest
import { Quest } from '@footprint-network/embed-sdk'
export default function Home() {
return (
<div className="w-[500px] h-[800px]">
<Quest
questId="66bf0c6cd1a3570031aa7fb4"
questType="lucky_money"
appName="demo"
theme="light"
/>
</div>
)
}
Embed Task
Coming
Embed Leaderboard
Coming