iFrame 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 and a dApp
Use Toolblox Workflow builder to create a new smart contract workflow. After deploying the workflow Toolblox exposes an auto-genareted dApp to use it.
For example the following workflow:
Has the this auto-generated dApp.
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 Builder 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 UI elements
By default each dApp sits inside the Toolblox chrome - with Toolblox 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
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 (pending approval from Bubble.io) 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.