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.
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
- Github Repo: https://github.com/3box/profile-hover
- Example Demo: https://3box.github.io/profile-hover/example/
- Create/Edit Your Profile: https://3box.io
👋 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.
