Follow Button
Embedding a follow button on your website is a quick and easy way to follow/unfollow other people on the given namespace. Let's start.
The Cyber Connect follow button SDK for JavaScript doesn't have any standalone files that need to be downloaded or installed, instead you simply need to include a short piece of regular JavaScript in your HTML that will asynchronously load the SDK into your pages. The async load means that it does not block loading other elements of your page.
The source code can be found here.
Create a follow button
First you need to include the cyberconnect-follow-button.min.js script and call follow.init after the script loaded.
1
<script>
2
async function initCyberConnect() {
3
await capi.follow.init({
4
ethProvider: ethProvider, // ethProvider is an Ethereum provider
5
namespace: 'CyberConnect',
6
env: 'PRODUCTION' // env decides the endpoints. Now we have STAGING and PRODUCTION. The default value is PRODUCTION
7
});
8
</script>
9
<script src="https://connect.cybertino.io/js/cyberconnect-follow-button.min.js" defer onload="initCyberConnect"></script>
Copied!
Then, to create a follow button, add an div element to contain a button id and call follow.render with the button id and the target wallet address
1
<body>
2
<div id="follow-button"></div>
3
<script>
4
capi.follow.render("follow-button", {
5
toAddr: 'xxx',
6
onSuccess: (event) => {
7
console.log(event);
8
},
9
onFailure: (event) => {
10
console.log(event);
11
},
12
});
13
</script>
14
</body>
Copied!
When the button triggered, the callbacks will be called with the following event object:
1
onSuccess:
2
{
3
code: EVENT_NAME,
4
toAddr: "xxx"
5
}
6
7
onFailure:
8
{
9
code: ERROR_CODE,
10
message: "error message"
11
}
Copied!
Button Style:
  • Follow:
    • Normal:
    • Hover:
  • Following:
    • Normal:
    • Hover:
Last modified 1mo ago
Copy link