Announcing Onboard.js — Web3 User Onboarding Made Easy

Chris Meisl

By Chris Meisl in blockchain, usability, onboard.js on December 12, 2019


Transactions are key to every Dapp. But for your users to transact, they must have a wallet, connect to the right network, and have some ETH. There is a lot of room for error. If your users struggle to transact, this reflects poorly on your Dapp.

Given the above, it is crucial for you to provide users with clear directions. You cannot rely on wallet UX alone to ensure that your users transact successfully.

But you are in luck. Blocknative has built a robust open-source solution that helps transact on Web3.

Over the past year, Blocknative has built infrastructure focused on Dapp onboarding and transaction notifications. We originally launched Assist.js to provide a framework for Dapp devs to address both issues. But in the course of working with dozens of great partners, we have rearchitected our solutions to provide developers with more composability and smaller bundle sizes. 

Today I am excited to announce the release of Onboard.js — which is the latest iteration of our open-source Dapp onboarding framework. This framework enables developers to help onboard new users to their Dapp or wallet.

The release of Onboard.js marks a significant evolution of our onboarding capabilities — driven by learnings from Assist.js. Read on to learn about Onboard.js and how it can help your Dapp improve its transaction experience. 

Easier Transactions With Onboard.js

Onboard.js is a framework for Dapp developers and wallet providers.

For Dapp devs, the framework makes it easy to onboard users to Dapps by enabling wallet selection, connection, readiness, and real-time state updates.

For wallet providers, the framework makes it easy to add their wallet via a module. This can be either embedded in the open-source Onboard.js library (create a PR!) or added at runtime by the Dapp.

Onboard.js enables developers to choose which wallets their Dapp displays. It currently supports these providers:

  • MetaMask
  • Dapper
  • Portis
  • Fortmatic
  • SquareLink
  • Authereum
  • Trust
  • Coinbase
  • Opera & Opera Touch
  • as well as any WalletConnect supported wallets

onboard-wallet-selectThe Onboard.js wallet picker supports desktop and mobile wallets.

When a user visits your Dapp, they will be shown a number of wallets that they can connect with based on the current operating system (Desktop, IOS, Android). The Dapp chooses which wallets to present, how they are ordered, and which are preferred. If the user does not have a wallet set up, Onboard.js will direct them to the installation/setup of the chosen wallet.

onboard-modules-2

And if they do have a wallet enabled, Onboard.js will make sure that they are connected, on the right network, and, optionally, have enough ETH. Onboard.js also enables Dapp developers to gain insights into their user onboarding, enabling developers to make smarter decisions about their product roadmap and Dapp design.

The Onboard.js library includes these key features:

  • Multiple wallet provider support
  • Easy wallet provider switching by your users
  • Synced wallet state with your Dapp
  • Wallet checks (account access, correct network, minimum ETH)
  • Fully customizable CSS
  • Custom labeling of wallet labels and icons
  • Extensibility (add wallets, wallet checks, and custom analytics)
  • Analytics
  • Flexible branding options

With Onboard.js, you and your team will get an open-source Web3 onboarding solution that is driven by months of product research and feedback from dozens of customers. This lightweight, customizable framework will make sure that your users are ready to transact.

How to Get Started

Developers can sign up for a free account to try Blocknative today. We have documentation, sample code, and a sandbox at docs.blocknative.com/onboard. Additionally, there are screencasts on our YouTube channel to help you quickly get started:

 

 

Try Blocknative Today

Blocknative builds tools that make it easy for developers to improve blockchain usability. Notify — the framework for real-time transaction notifications — is available via an API, SDK, or robust JavaScript library. And Onboard — our open-source solution to help users get started with Web3 — is available as a JavaScript library.

You can sign up for a free account today to get started:

Try It Now