# Embeddable Staking Widget

Fanbase supports an embeddable staking widget for non npm-based web development and no-code platforms. The iframe widget can be used on Content Management Systems (CMS)-- services like Wix, Wordpress and Webflow.&#x20;

### What is an Embeddable Widget?

An embeddable widget is a tool that can be embedded into a webpage or application using an **iframe** element. An iframe (short for inline frame) is an HTML element that allows you to embed another HTML document within the current document. This means that you can display content from another website or source within your own webpage or application.

**Iframes** are commonly used to embed videos, maps, calendars, social media feeds, and other types of content into webpages. By using an **iframe**, you can seamlessly display the content of the embedded widget within your own site, without the need for complex integration or coding.

To embed an **iframe** widget, you typically need to obtain the embed code provided by the widget provider. This code usually consists of an **iframe** element with specific attributes, such as the source URL of the widget content and the desired dimensions of the **iframe**. By copying and pasting the following code into your webpage or application, you can embed the widget and display its content to your users.

### How to use Fanbase Embeddable Widget?

1. **Use with HTML front-end.**

```html
<!DOCTYPE html>
<html>
    <body>
        <-- Embeddable Staking Widget -->
        <iframe src="https://embedstake.fanbase.io/staking" style="border:none; border-radius: 10px" title="Embeddable Widget Example"></iframe>
    </body>
</html>
```

2. **Use with CMS platforms**\
   To embed the widget on a CMS website, reference these guides.\
   \
   Wix: <https://support.wix.com/en/article/wix-editor-embedding-a-site-or-a-widget>\
   Wordpress: <https://wordpress.org/plugins/wp-embed-widgets/>\
   Webflow: <https://university.webflow.com/lesson/custom-code-embed?topics=elements>\\

3. **Widget  render options**\
   Base Url: [https://embedstake.fanbase.io/](https://embedswap.fanbase.io/) \
   Staking Widget: `/staking`

4. **API key and user role option**\
   **api\_key**\
   `/staking?api_key=0x00`\
   This option passes the API key to the widget server to verify the user's API key and determine his role.\
   **sup\_domain**\
   `/staking?sup_domain=user.example.com`\
   This option passes the user's domain to the widget server to verify user's domain and allow his access.\
   This option must be used with the `api_key`when accessing widget.\
   **chain\_id**\
   `/staking?chain_id=1`\
   This option passes network name where user created plan and get API key to verify API key.\
   This option must be used with `api_key` option when access widget.
