Skip to main content

iFrame integration


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 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:

Example 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.

Nochrome custom dApp

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:



Nochrome 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.

</iframe> example

A free example template is available here (pending approval from 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.