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:
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.
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:
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.
A free Bubble.io example template is available here to illustrate how this works.
Live demo available here.
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.