DappHero Docs
  • Getting Started 👋🏽
  • DappHero Basics
    • How does it work? 🧐
    • Setting Up Your Project 🏗️
      • Projects
      • Smart Contracts
    • An Intro to Features 🎁
  • Features
    • Network ⛓️
    • User 🤖
    • 3box 👯‍♂️
    • Smart Contracts 👩🏾‍🔬
      • Adding Smart Contracts 🏗️
        • Contract Details
      • Create a Method Instance
      • Inputs
      • Invoke
      • Outputs
      • Events
      • Advanced: Automatically clearing Inputs
      • Advanced: Getting the Current User's Address Dynamically
      • Advanced: Sending ETH to a contract method
      • Listening to Events
      • Resources: Learn More
      • Resources: Test Contracts
    • Collectibles 🃏
      • Getting Started
      • Single Collectibles
      • Listing Collectibles
      • Displaying Token Metadata
      • Advanced: $CURRENT_USER
      • Advanced: $URL
      • Advanced: $THIS
      • Advanced: Properties
      • Calling Smart Contracts inside Collectibles
      • Collectible Example
  • No-Code Integrations
    • Webflow 🎁
      • Getting Started with Webflow
      • Add DappHero Elements
      • Learn more about WebFlow
  • Examples
    • Coming soon...
  • Advanced
    • Engine Events
    • Force Refresh
    • Database
    • Ethereum Provider
  • Updates
    • ChangeLog
  • Bug Bounty
Powered by GitBook
On this page
  • What if I don't know HTML?
  • Want us to support your favorite tool? Let us know!

Was this helpful?

  1. DappHero Basics

How does it work? 🧐

All about the magic.

PreviousGetting Started 👋🏽NextSetting Up Your Project 🏗️

Last updated 4 years ago

Was this helpful?

All websites are constructed with items called elements that are described using HTML. When collected together, they form your website and include all the text, images, and designs that are displayed on a user's screen when they visit your site.

With DappHero, you add special attributes to each element you want to use with blockchain. When DappHero runs, it will automatically replace your existing elements with super-powered blockchain-connected elements!

Take a quick look at the HTML example below, this is the HTML required to display the name of the currently connected ethereum network.

<div 
    data-dh-feature="network"
    data-dh-property-name="true"
>
Network name will appear here! (Mainnet, Rinkeby, Ropsten, etc)
</div>

It's that easy

DappHero can do a wide range of things: get your user's Ethereum address, their 3Box profile name, even connect to Smart Contracts to read data from the blockchain or send money!

What if I don't know HTML?

No problem! We have been working hard to make DappHero easy to use for people who love no-code tools (just like we do!).

Our first officially supported no-code platform is , a fantastic tool that lets you design brilliant websites AND uses DappHero without ever writing a line of code! We also have some that will help you get started quickly.

We are working hard to support DappHero in other platforms, but generally anywhere that you can add a <script/> tag and data attributes to elements on your webpage, DappHero will work. Our users have been testing out DappHero on many platforms, you can see a on our forum.

Want us to support your favorite tool?

WebFlow
templates
list of the latest
Let us know!