Skip to main content

DApp Widgets

Walkthrough​

DApp Widget provides a way to embed Toolblox into any web page. Here is a walkthrough of embedding a workflow to issue diplomas as NFTs on blockchain into a Bubble.io application (web site).

1. Create smart contract workflow with an Asset Dashboard​

Use Toolblox Contract Maker to create a new smart contract workflow. After deploying the workflow Toolblox exposes an auto-genareted DApp to use it.

For example this following workflow:

Example workflow

Has this corresponding Asset Dashboard.

2. (optional) Create a DApp with custom look and feel​

If the auto-generated DApp does not seem logical in the context of your application flow, Toolblox DApp Maker can be used to create a custom experience.

For example for this example a simple DApp was created with only the UI to enter a new diploma together with a thank-you page. A custom DApp will also allow to customize the colors of the background and buttons, for a more seamless end result.

Nochrome custom DApp

3. Remove Toolblox 'chrome'​

By default each DApp sits inside the Toolblox chrome - with Toolblox-branded elements like logo and menu. In order to transparently embed the DApp into an existing website the UI can be removed.

This is done using the ?nochrome=nochrome at the end of the URL. For example:


//before
https://app.toolblox.net/flow/diploma_workflow_d10044bf

//after
https://app.toolblox.net/flow/diploma_workflow_d10044bf?nochrome=nochrome

Nochrome example

4. Embed the DApp as a Widget​

The auto-generated or custom DApp can be embedded into any website using an iframe. This is how an HTML snippet would look like.

<iframe
    width="500px"
    height="650px"
    src="https://app.toolblox.net/dapp/diploma_dapp_d10044bf?nochrome=nochrome"
    scrolling="no"
    frameborder="0">
</iframe>

Live Example​

A free Bubble.io example template is available here to illustrate how this works.

Live demo available here.

Bubble example

All NFTs created using the application can be reviewed on any crypto wallet or NFT marketplace such as OpenSea. For example the gallery for this demo application is available here.