Beyond Rarity Instacheck Widget - JS Version
This page has instructions for the plain JS.
If you are using React, you can see instructions here: https://www.npmjs.com/package/@beyondrarity/instacheck
Check out the BR-InstaCheck JS Widget Live Demo on CodePen.
Usage
<body>
.
.
.
<!-- STEP 1: Create the BR-InstaCheck widget container element and set collectionId, startTokenId and endTokenId values -->
<div id="br-instacheck" collectionId="wallstmoms" startTokenId="1" endTokenId="3000" theme="light" />
.
.
.
<!-- STEP 2: Import BR-InstaCheck package from the CDN (at end of <body> element)-->
<script src="https://cdn.jsdelivr.net/npm/@beyondrarity/instacheck-js@latest/dist/index.min.js"></script>
<!-- STEP 3: Initialize the BR-InstaCheck after importing the package -->
<script>
BRInstacheck.init("#br-instacheck");
</script>
</body>Steps
-
Create the container element for the BR-InstaCheck widget where you want it placed within your web page. You must set the
id="br-instacheck"for the BR-InstaCheck package to know where to render the widget.NOTE: The container element does not need to be a
<div>element but can be any element; the BR-InstaCheck widget will simply be placed inside the specified element. -
Import the BR-InstaCheck package from the CDN at the bottom of your html
<body>element. By placing at the end of thebody, the web page can load first and then fetch BR-InstaCheck package. -
Initialize the BR-Instacheck widget after you have imported the package. This will run the BR-InstaCheck code to render the widget.
IMPORTANT: Another reason to have the
BRInstacheck.initmethod called at the end of thebodyelement is that it ensures that you have already defined the container element (i.e.<div id="br-instacheck" ... />), else the code will not render widget.
Attributes
| Attribute | Description | Required |
|---|---|---|
collectionId |
The Collection Id which is the unique identifier for your collection (also called slug).The Collection Id is available in the URL when navigating to your collection on Beyond Rarity which is in the following format:www.beyondrarity.com/c/[collectionId]For example, the URL for the Wall St Moms collection is https://www.beyondrarity.com/c/wallstmoms where wallstmoms is the collectionId. |
yes |
startTokenId |
The first token id in the collection which is normally 1 or 0. |
yes |
endTokenId |
The last token id in the collection which is normally: - equal to the supply if the first token id is 1- or equal to the (supply - 1) if the first token id is 0
|
yes |
theme |
"dark" or "light"
|
No.Default value is "light"
|
Alternative Usage
Instead of specifying the attributes in the <div id="br-instacheck" ...> container element, you can specify the attributes as a config object as the second parameter to the BRInstacheck.init function.
Alternate Usage Example
<body>
.
.
.
<div id="br-instacheck" />
.
.
.
<script src="https://cdn.jsdelivr.net/npm/@beyondrarity/instacheck-js@latest/dist/index.min.js"></script>
<script>
BRInstacheck.init(
"#br-instacheck",
{
collectionId: "wallstmoms",
startTokenId: 1,
endTokenId: 3000,
theme="dark"
}
);
</script>
</body>NOTE: The div container element attributes take precedence over the config object values. If you define an attribute in both the div container and BRInstacheck.init config object, the value defined on the div container element will be used.
Check out the BR-InstaCheck Widget Alternative Code Option Live Demo on CodePen.