Embed SDK (Coming Soon)
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 { Quest } from '@footprint-network/embed-sdk'
export default function Home() {
return (
<div className="w-[500px] h-[800px]">
<Quest
questId='<quest-id>'
tgWebAppData='<user-telegram-data>'
/>
</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: 'quest',
questId: '<quest-id>'
tgWebAppData: '<user-telegram-data>'
})
const iframe = document.getElementById('embed')
iframe.src = src
</script>
</body>
</html>
Walkthrough Example
Embed Quest
import { Quest } from '@footprint-network/embed-sdk'
export default function Home() {
return (
<div className="w-[500px] h-[800px]">
<Quest
questId='<quest-id>'
tgWebAppData='<user-telegram-data>'
/>
</div>
)
}
Embed Task
import { Earn } from '@footprint-network/embed-sdk'
export default function Home() {
return (
<div className="w-[500px] h-[800px]">
<Earn
communityId='<your-community-id>'
tgWebAppData='<user-telegram-data>'
/>
</div>
)
}
Embed Leaderboard
Coming soon
Updated 15 days ago