Crate Examples

Async

Default `window.crate` object

<iframe height="265" style="width: 100%;" scrolling="no" title="Standard Crate" src="https://codepen.io/advaith1/embed/xmXpeG?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy"> See the Pen Standard Crate by Advaith (@advaith1) on CodePen. </iframe>

Custom glyph

<iframe height="265" style="width: 100%;" scrolling="no" title="Crate with Glyph" src="https://codepen.io/advaith1/embed/preview/dyMOOjb?height=265&theme-id=dark&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen Crate with Glyph by Advaith (@advaith1) on CodePen. </iframe>

Initialising a custom crate object

<iframe height="265" style="width: 100%;" scrolling="no" title="Custom crate object" src="https://codepen.io/advaith1/embed/MZErRx?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy"> See the Pen Custom crate object by Advaith (@advaith1) on CodePen. </iframe>

Multiple instances at the same time

<iframe height="265" style="width: 100%;" scrolling="no" title="Multiple crate instances" src="https://codepen.io/advaith1/embed/oJGpRz?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy"> See the Pen Multiple crate instances by Advaith (@advaith1) on CodePen. </iframe>

Updating the state

<iframe height="265" style="width: 100%;" scrolling="no" title="Updating crate state" src="https://codepen.io/advaith1/embed/jXGYoQ?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy"> See the Pen Updating crate state by Advaith (@advaith1) on CodePen. </iframe>

Dynamically interacting with the button

<iframe height="265" style="width: 100%;" scrolling="no" title="Dynamically interacting with crate" src="https://codepen.io/advaith1/embed/oJGEvY?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy"> See the Pen Dynamically interacting with crate by Advaith (@advaith1) on CodePen. </iframe>

Sync

We recommend using the async version of the API, as it'll make your website way faster. The synchronous version should only be used if it's being dynamically inserted into your website after the page's initial load (eg. A custom JS script)

Initialising a custom crate object

<iframe height="265" style="width: 100%;" scrolling="no" title="Sync crate" src="https://codepen.io/advaith1/embed/OrxQLv?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy"> See the Pen Sync crate by Advaith (@advaith1) on CodePen. </iframe>