Skip to main content

iFrame integration

Walkthrough​

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:

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:


//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​

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>

Bubble.io example​

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