Supercharge Your
Profile Avatars

Powerful plug-n-play API to transform your digital profile pictures.

Open Beta Signups
TRY FOR FREE

An Open Ecosystem for All

and many more coming soon...

SOLUTIONS

Powerful Solutions

Avatr is a powerful plug-n-play smart digital avatar API that can be added to any blockchain, website, marketplace, mobile apps, or dApps.

01

Blazing Fast API Solution

Industry-leading API response times, high reliability, and blazing fast performance for fetching NFTs.

cross chain compatible
02

Cross-chain Compatible

Avatr API is cross-chain compatible, allowing you to build on all the biggest Web3 networks.

03

Plug-N-Play Integration

Seamlessly integrate our plug-n-play API into your  existing tech stack.

FEATURES

The Next Generation of Digital Avatars

Power-up your digital avatars with user-focused features that fit every use case.

Unique Shapes

Standout and grab users' attention with eye catching shapes.

NFT
Collection

Show off your prized NFT collection from your public avatar.

Call-To-Actions

Effective way to let your target audience interact with your avatar.

Video Display*

Create excitement with video displays and motivates your follower.

Custom Skins*

Go over-the-top with your custom branded avatar skins.

Custom
Animations*

Add mouse cursor animations to further engage with your audience.

Smart Links*

Connect your audience to all your online properties.

Live Streams*

Turn visitor into subscribers with live stream video displays.

And many more coming soon...

TRY FOR FREE
Learn More

and many more coming soon...

FEATURES

Plug-N-Play Integration

At Avatr, we take the developer experience to heart. That's why we work hard to make our API very simple to integrate.

Javascript
PHP
Python
Ruby
Java
GO
.NET
dart
Rust
Swift
Instant Meilisearch
React
Vue
Angular
Rails
Symfony
const client = new MeiliSearch('http://localhost:7700', 'masterKey')
  
await client.index('movies').addDocuments([
  { 'id': 1, 'title': 'Carol' },
  { 'id': 2, 'title': 'Wonder Woman' },
  { 'id': 3, 'title': 'Life of Pi' },
  { 'id': 4, 'title': 'Mad Max: Fury Road' },
  { 'id': 5, 'title': 'Moana' },
  { 'id': 6, 'title': 'Philadelphia'}
])
    
// be aware this client is using the masterKey, it should not be used in front end
const search = await index.search('philodelphia')
console.log(search)
$client = new Client('http://localhost:7700', 'masterKey');

$client->index('movies')->addDocuments([
  ['id' => 1, 'title' => 'Carol'],
  ['id' => 2, 'title' => 'Wonder Woman'],
  ['id' => 3, 'title' => 'Life of Pi'],
  ['id' => 4, 'title' => 'Mad Max: Fury Road'],
  ['id' => 5, 'title' => 'Moana'],
  ['id' => 6, 'title' => 'Philadelphia'],
]);
client = meilisearch.Client('http://localhost:7700', 'masterKey')

client.index('movies').add_documents([
  { 'id': 1, 'title': 'Carol' },
  { 'id': 2, 'title': 'Wonder Woman' },
  { 'id': 3, 'title': 'Life of Pi' },
  { 'id': 4, 'title': 'Mad Max: Fury Road' },
  { 'id': 5, 'title': 'Moana' },
  { 'id': 6, 'title': 'Philadelphia'}
])
client = MeiliSearch::Client.new('http://localhost:7700', 'masterKey')

client.index('movies').add_documents([
  { id: 1, title: 'Carol' },
  { id: 2, title: 'Wonder Woman' },
  { id: 3, title: 'Life of Pi' },
  { id: 4, title: 'Mad Max: Fury Road' },
  { id: 5, title: 'Moana' },
  { id: 6, title: 'Philadelphia' }
])
Client client = new Client(new Config("http://localhost:7700", "masterKey"));
  
client.index("movies").addDocuments("["
  + "{\"id\": 1, \"title\": \"Carol\"},"
  + "{\"id\": 2, \"title\": \"Wonder Woman\"},"
  + "{\"id\": 3, \"title\": \"Life of Pi\"},"
  + "{\"id\": 4, \"title\": \"Mad Max: Fury Road\"},"
  + "{\"id\": 5, \"title\": \"Moana\"},"
  + "{\"id\": 6, \"title\": \"Philadelphia\"}"
  + "]"
);
client := meilisearch.NewClient(meilisearch.ClientConfig{
  Host: "http://localhost:7700",
  APIKey: "masterKey",
})
    
documents := []map[string]interface{}{
  { "id": 1, "title": "Carol" },
  { "id": 2, "title": "Wonder Woman" },
  { "id": 3, "title": "Life of Pi" },
  { "id": 4, "title": "Mad Max: Fury Road" },
  { "id": 5, "title": "Moana" },
  { "id": 6, "title": "Philadelphia" },
}
client.Index("movies").AddDocuments(documents)
MeilisearchClient client = new MeilisearchClient("http://localhost:7700", "masterKey");

var documents = new Movie[] {
  new Movie { Id = "1", Title = "Carol" },
  new Movie { Id = "2", Title = "Wonder Woman" },
  new Movie { Id = "3", Title = "Life of Pi" },
  new Movie { Id = "4", Title = "Mad Max: Fury Road" },
  new Movie { Id = "5", Title = "Moana", ", "Action" },
  new Movie { Id = "6", Title = "Philadelphia" }
};

var task = await client.Index("movies").AddDocumentsAsync<Movie>(documents);
var client = MeiliSearchClient('http://localhost:7700', 'masterKey');

await client.index('movies').addDocuments([
  { 'id': 1, 'title': 'Carol' },
  { 'id': 2, 'title': 'Wonder Woman' },
  { 'id': 3, 'title': 'Life of Pi' },
  { 'id': 4, 'title': 'Mad Max: Fury Road' },
  { 'id': 5, 'title': 'Moana' },
  { 'id': 6, 'title': 'Philadelphia'}
]);
let client = Client::new("http://localhost:7700", "masterKey");

#[derive(Serialize, Deserialize)]
struct Movie {
  id: String,
  title: String
}

client.index("movies")
  .add_documents(&[
    Movie { id: "1".to_string(), title: "Carol".to_string() },
    Movie { id: "2".to_string(), title: "Wonder Woman".to_string() },
    Movie { id: "3".to_string(), title: "Life of Pi".to_string() },
    Movie { id: "4".to_string(), title: "Mad Max: Fury Road".to_string() },
    Movie { id: "5".to_string(), title: "Moana".to_string() },
    Movie { id: "6".to_string(), title: "Philadelphia".to_string() }
  ], Some("reference_number"))
  .await
  .unwrap();
let client = try MeiliSearch(host: "http://localhost:7700", apiKey: "masterKey")
let documents = """
[
  { "id": 1, "title": "Carol" },
  { "id": 2, "title": "Wonder Woman" },
  { "id": 3, "title": "Life of Pi" },
  { "id": 4, "title": "Mad Max: Fury Road" },
  { "id": 5, "title": "Moana" },
  { "id": 6, "title": "Philadelphia"}
]
""".data(using: .utf8)!
    
client.index("movies").addDocuments(documents: documents, primaryKey: "reference_number") {
  (result) in
    switch result {
    case .success(let task):
        print(task)
    case .failure(let error):
        print(error)
    }
<body>
  <div>
    <div id="searchbox"></div>
    <div id="hits"></div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
  <script>
    const search = instantsearch({
      indexName: 'movies',
      searchClient: instantMeiliSearch(
        'http://localhost:7700',
        'searchKey'
      ),
    })

    search.addWidgets([
      instantsearch.widgets.searchBox({
        container: '#searchbox',
      }),
      instantsearch.widgets.hits({
        container: '#hits',
        templates: {
          item: `
            <div>
              <div class="hit-name">
                {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
              </div>
            </div>
          `,
        },
      }),
    ])
    search.start()
  </script>
</body>
import React from 'react';
import { InstantSearch, SearchBox, Hits, Highlight } from 'react-instantsearch-dom';
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
    
const searchClient = instantMeiliSearch(
  "http://localhost:7700",
  "searchKey"
);
    
const App = () => (
  <InstantSearch
    indexName="movies"
    searchClient={searchClient}
  >
    <SearchBox />
    <Hits hitComponent={Hit} />
  </InstantSearch>
);
    
const Hit = (props) => (<Highlight attribute="title" hit={props.hit} />);
// In main.js
import Vue from 'vue';
import App from './App.vue';
import InstantSearch from 'vue-instantsearch';
    
Vue.use(InstantSearch);
    
new Vue({
  el: '#app',
  render: h => h(App),
});
    
// In App.vue
<template>
  <ais-instant-search :search-client="searchClient" index-name="movies">
    <ais-search-box />
    <ais-hits>
      <div slot="item" slot-scope="{ item }">
        <h2>{{ item.title }}</h2>
      </div>
    </ais-hits>
  </ais-instant-search>
</template>
    
<script>
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
    
export default {
  data() {
    return {
      searchClient: instantMeiliSearch(
        "http://localhost:7700",
        "searchKey"
      ),
    };
  },
};
</script>
// In app.component.ts
import { Component } from '@angular/core'
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
    
const searchClient = instantMeiliSearch(
  "http://localhost:7700",
  "searchKey"
)
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
    
export class AppComponent {
  title = 'angular-app'
  config = {
    indexName: 'movies',
    searchClient,
  }
}
    
// In app.modules.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { NgAisModule } from 'angular-instantsearch'
    
import { AppComponent } from './app.component'
    
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgAisModule.forRoot()],
  providers: [],
  bootstrap: [AppComponent],
})
    
export class AppModule {}
    
// in app.component.html
<div class="container">
  <ais-instantsearch [config]="config">
    <div class="search-panel">
      <div class="search-panel__results">
        <div class="searchbox">
          <ais-search-box placeholder=""></ais-search-box>
        </div>
    
        <ais-hits>
          <ng-template let-hits="hits">
            <ol class="ais-Hits-list">
              <li *ngFor="let hit of hits" class="ais-Hits-item">
                <div class="hit-name">{{hit.title}}</div>
              </li>
            </ol>
          </ng-template>
        </ais-hits>
      </div>
    </div>
  </ais-instantsearch>
</div>
# Create an initializer file like `config/initializers/meilisearch.rb`
MeiliSearch::Rails.configuration = {
  meilisearch_url: 'http://127.0.0.1:7700',
  meilisearch_api_key: 'masterKey',
}

# Add Meilisearch to your ActiveRecord model
class Movie < ActiveRecord::Base
  include MeiliSearch::Rails

  meilisearch index_uid: 'movies' do
    attribute :title
  end
end

# Inserting data in your DB table will automatically update your Meilisearch index
Movie.create([
  { title: 'Carol' },
  { title: 'Wonder Woman' },
  { title: 'Life of Pi' },
  { title: 'Mad Max: Fury Road' },
  { title: 'Moana' },
  { title: 'Philadelphia' }
])
// # Configure your entities by adding them in config/packages/meilisearch.yaml
// meilisearch:
//    url: 'http://127.0.0.1:7700'
//    api_key: 'masterKey'
//    indices:
//        - name: movies
//          class: App\Entity\Movie

<?php
// src/Controller/MoviesController.php
namespace App\Controller;

use App\Entity\Movie;
use Doctrine\Persistence\ManagerRegistry;
use Symfony\Component\HttpFoundation\Response;

class MoviesController extends AbstractController
{
    #[Route('/add-movies', name: 'addMovies')]
    public function addMovies(ManagerRegistry $doctrine): Response
    {
        $entityManager = $doctrine->getManager();

        $movies = ['Carol', 'Wonder Woman', 'Life of Pi', 'Mad Max: Fury Road', 'Moana', 'Philadelphia'];

        foreach ($movies as $title) {
            $movie = new Movie();
            $movie->setTitle($title);

            $entityManager->persist($movie);
        }

        // Inserting data in your DB table will automatically update your Meilisearch index
        $entityManager->flush();

        //...
    }
}

An Open Ecosystem for All

TRY FOR FREE
LEARN MORE

and many more coming soon...

FAQs

Get more usage from your digital avatars with powerful features that fit every use case.

What is Avatr.xyz?

Avatr.xyz is a Web3-native API platform that aims to enhance creators digital avatars with NFTs and other powerful features. Users can create distinct digital representations of themselves, enjoying unique features like call-to-actions, video displays, animations, smart embeds, custom skins, and live streams for an immersive experience.

Is Avatr Free of Charge?

Yes, currently Avatr is completely free of charge for users. The platform aims to power-charge digital avatars with powerful features and enhance the user experience.

How to Sign Up for an Account?

To sign up for an account with Avatr.xyz and get started creating your Web3 digital avatar, simply follow these easy steps:

‍

  1. Navigate to the Avatr website and click the Sign Up button.
  2. Claim your unique username, enter your email address, and create a password.
  3. Agree to the terms and conditions of the platform, then click the Sign Up button to complete the process.
  4. You will then be directed to your My Avatar page and prompted to verify your email address.
  5. After successful registration, you will receive a welcome email from the Avatr team.

‍

Alternatively, you can sign up and log in to the platform using your Metamask, WalletConnect, or ENS account.

Where Will My Digital Avatar Appear?

Your digital avatar will appear on the Avatr platform and any associated web application, websites, dapps, or mobile apps that support Avatr’s API integration. This could include social media platforms, online gaming environments, virtual reality spaces, and other digital realms where avatars are used for self-expression and interaction.

Uploading Your First NFT Image

To upload your first NFT image to your Avatr, follow these steps:

‍

  1. Ensure that you are logged in to your Avatr account and have an NFT file ready to upload. The NFT file should meet Avatr.xyz’s supported file format and size requirements.
  2. Navigate to your Manage My Avatar Dashboard and click on the Upload NFT button.
  3. The system will prompt you to select from a previously connected wallet or connect to another wallet.
  4. Now select the NFT file and import it. The system will validate the file format and size requirements.
  5. If the file passes validation, it will be imported to your Manage My Avatar Dashboard, and you can view it there.
Do I Need Cryptocurrency To Use Avatr?

No, currently you do not need cryptocurrency to use Avatr. All features relating to purchasing, selling, or trading NFTs must be handled on 3rd party marketplaces or NFT platforms. Avatr integrates into any marketplaces via wallet.

Do I Need .ETH Domain From (ens.domains) To Use Avatr?

No, you do not need a .ETH domain from ENS (Ethereum Name Service) to use Avatr. While having a .ETH domain can provide you with a unique and personalized address for your Ethereum wallet, it is not a requirement for using the Avatr platform. You can still create an account, upload and manage NFTs, and access other features on Avatr without owning a .ETH domain.

Supercharge Your Digital Avatar!

We're Open for Beta Signups

TRY FOR FREE