Introducing, Profile Hovers
The easiest way to add social user profiles to your app. Integrate our simple plugin with 2 lines of code.
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.
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.
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
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.
2. Add this HTML tag throughout your app
Then, add this html tag wherever you display an ethereum address in your UI.
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.