Introducing, Profile Hovers

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

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 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="<>"></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 to create your profile or to dig into the code.


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


Written by


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



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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade