Profile hovers make dapps more social! 🎉

Introducing, Profile Hovers

The easiest way to add social user profiles to your app. Integrate our simple plugin with 2 lines of code.

3Box
3Box
Feb 28 · 3 min read

We’re excited to announce the release of our newest product — 3Box profile hovers. Profile hovers allow developers to easily replace hexadecimal addresses in their app’s UI with user-friendly social profile information, and it only takes two lines of code. Profile hovers help apps convey richer contextual social information about user addresses directly in their app, where it’s easily accessible to other users. Profile hovers make web3 apps more engaging by adding familiarity, social trust, and usability.

Try the 🎉hover demo 🎉today and check us out on ⭐Github! ⭐


Profile Hover Overview

The profile hover plugin consists of two UI components: the address tag and the profile hover. Both elements are very configurable and customizable to your app’s design and information needs.

Address Tag

The address tag appears in your app in place of ethereum addresses.

  • Appears wherever ethereum addresses are displayed
  • Display a short or full address
  • Display user profile image, fall back to blockies if none exists
  • Click-to-copy ethereum address to clipboard
  • Style element as desired

Profile Hover

The hover element appears in your app when the user hovers over an address tag. Hovers display more social context and richer metadata about an address.

  • Appears when address tag element is hovered
  • Displays profile name, emoji, twitter, github, and URL by default
  • Links to user’s public profile on 3box.io if one exists
  • Fully configurable and customizable

Add Profile Hovers to Your App

How to Integrate

It only takes two lines of code to add profile hovers to your app!

1. Add the Profile Hover script

First, add this profile hover script to your app. Place this as the last element inside your body tag.

<script type="text/javascript" src="<https://unpkg.com/profile-hover>"></script>

2. Add this HTML tag throughout your app

Then, add this html tag wherever you display an ethereum address in your UI.

<threebox-address data-address='0xa8ee0babe72cd9a80ae45dd74cd3eae7a82fd5d1'></threebox-address>

Want to Customize your Profile Hovers?

Explore the many options, configurations, and ways you can customize the design and layout of profile hovers in your app by visiting our Github page.

Additional Resources


👋 Join the 3Box Discord to chat with the community

📫 Sign up for 3Box newsletter to get these in your inbox


3️⃣ 3Box provides distributed data infrastructure for web3. Integrate 3Box.js to instantly make your dapp more social, scalable, and human. Visit 3box.io to create your profile or github.com/3box/3box to dig into the code.

3Box

Suite of APIs for decentralized profiles, storage, and messaging. Learn more at 3box.io.

3Box

Written by

3Box

Distributed database infrastructure for Ethereum. We provide a simple, scalable Ethereum Profiles API.

3Box

3Box

Suite of APIs for decentralized profiles, storage, and messaging. Learn more at 3box.io.