🧑🏻‍💻

SDK

Getting Started

POWER Commerce

3D Viewer 🔍Augmented reality

POWER Engage

📌Why POWER Engage?🚀Engagement programs 🟩Our Modules 🔰Collectibles 🕹️Quests 🎁Rewards 🧑🏻‍💻SDK

Asset Manager

3D Files

🤝🏻User Onboarding

Integrating this module of our SDK will allow you to onboard your users in your program :

✔️ The ability to offer a frictionless onboarding thanks to a passwordless account creation

✔️ An effective & inclusive way to onboard the masses thanks to our wallet as a service capability, create a web 3.0 in one click! (or 200+ selfcustodian providers)

✔️ Easily customize the look & feel of our widget thanks by applying your own style in order to fit your brand guidelines & propose a coherent user experience

Getting started with our SDK

METAV.RS SDK uses CDN.

In order to have the complete explerience ready to code, we recommand using the SDK core javascript module alongside the two optional modules for ready to use Onboarding and local Wallet interaction

💡

For a more comprehensive and complete tutorial, please check our example project (React)

First, import our core SDK The core SDK javascript provide you a complete list of functions to interact with the METAV.RS API

<!-- METAV.RS Core SDK (Mandatory)-->
<script src="https://sdk.metav.rs/3.0.1/metavrs.sdk.core.js"></script>

Then in you main .js file:

let m = new METAVRS({
  API_KEY: 'YOUR_API_KEY', // provided by METAV.RS

  // ... see below for optionnal arguments
})

Web 3.0 wallet interaction If do want your program to allow users to connect their self custodian web 3.0 wallet (compatible with 200+ providers) , you do need this module.

<!-- METAV.RS local wallet interaction module-->
<script type="module" src="https://sdk.metav.rs/3.0.1/metavrs.sdk.wallet-interaction.js"></script>

Onboarding module

This module will provide you a ready to use web-component for onboarding your user. Every technical aspect like connecting to the SDK or user onboarding flow is already taken care of

<!-- METAV.RS Onboaring module -->
<script type="module" src="https://sdk.metav.rs/3.0.1/metavrs.mod.onboarding.js"></script>

We also recommend starting with the base minimum style before customizing it

<!-- METAV.RS Onboaring module base style -->
<link href="https://sdk.metav.rs/3.0.1/metavrs.mod.onboarding.css" rel="stylesheet" />

Then in you main .html or .jsx file:

<metavrs-onboarding

ref={onBoardingRef}

show={false}

wallets="selfcustodian cloudwallet"

code-scheme="dark"

autoClose={true} />

Arguments

ARGUMENT	TYPE	DESCRIPTION
show	bool	Set to true to display onboarding modal, false to hide(displays a minimalist profile page is user already connected)
wallets	string	selfcustodian: user can connect existing wallet (metamask..), cloudwallet: a wallet will be created & linked to the user automatically
code-scheme	string	theme for the 6 numbers OTP input, based on your background ("dark" or "light")
autoClose	bool	If true, the modal will auto close after success onBoarding, if false, will show a minimalist profile window

Show/hide onboarding

Vanilla js

document.querySelector("metavrs-onboarding").setAttribute("show", true)

React

onBoardingRef.current.show = true

Easily customize the look & feel You can override any class and id style with your custom CSS.

For quick & easy tweaking we provide some variables for the onbording modal

:root {

  /* Base */
  --mtvrs-color-palette-01: #0D0D0D;
  --mtvrs-color-palette-02: #f8f7fd;
  --mtvrs-color-palette-03: #3477ea;
  --mtvrs-color-palette-04: #9c93c8;
  --mtvrs-color-palette-05: #edebf9;

  --mtvrs-text-color-primary: var(--mtvrs-color-palette-02);
  --mtvrs-text-color-secondary: var(--mtvrs-color-palette-01);

  --mtvrs-transition-ms: 125ms;
  --mtvrs-transition-delayed-ms: 125ms;

  /* Buttons */
  --mtvrs-button-bg : var(--mtvrs-color-palette-02);
  --mtvrs-button-color : var(--mtvrs-text-color-secondary);
  --mtvrs-button-hover-bg: var(--mtvrs-color-palette-03);
  --mtvrs-button-hover-color: var(--mtvrs-text-color-primary);
  --mtvrs-button-dis-bg: var(--mtvrs-color-palette-05);
  --mtvrs-button-dis-color: var(--mtvrs-color-palette-04);
  --mtvrs-button-radius: 2.25em;

  /*  Default onboarding modal */
  --mtvrs-onboarding-background-color: rgba(0,0,0,0.76);
  --mtvrs-onboarding-progress-color: rgba(255,255,255,0.86);
  --mtvrs-onboarding-fontsize: clamp(1em, 1.75vmin, 2em);
  --mtvrs-onboarding-radius: 0.5em;
  --mtvrs-onboarding-bgblur: 3rem;
  --mtvrs-onboarding-zindex: 800;
}

Feel free to check te onboarding module with your inspector and change anything you like on a custom metavrs-onboarding-style.css file on your project (see the example project for more)

📖 Let’s start with with setting up a default onboarding following this tutorial

Launch an instance of our SDK

You'll need to access this instance anytime you'll need to interact with METAV.RS API. Let’s take the onboarding module as an example.

let m = new METAVRS({

  // provided by METAV.RS
  API_KEY: 'YOUR_API_KEY',

  // Use this to provide your own TOU and Privacy Policy links
  // to the onboarding module
  consentOptions: {
    title : "In order to access the experience, please accept our terms of use",
    terms : {
      label : "I have read and I accept the",
      link : {
        label : "terms of use",
        url : "http://metav.rs"
      }
    },
    privacyPolicy : {
      label : "To find out how Brand uses and processes your personal data, please refer to our",
      link : {
        label : "privacy policy",
        url : "http://metav.rs"
      }
    }
  },

  // Here you can override any module UI texts with your own
  // For example this will translate the onboaridng module in French :
  // (Optionnal)
  texts: {
    'Back': 'Retour',
    'Next': 'Suivant',
    'Enter your email': 'Renseignez votre adresse email',
    'Your email': 'votre email',
    'Please enter a real email' : "Merci d'entrer un email valide",
    'Hello ! Create your wallet to continue': 'Bienvenue ! Créez votre wallet pour continuer',
    'Create a wallet': "Je créé mon wallet",
    'Enter the code we just sent to': 'Renseignez le code envoyé à',
    "You didn't receive the code ?": "Vous n'avez rien reçu ?",
    'Resend code': 'Renvoyer le code',
    'You need to verify your device first, please check your email': "Votre appareil a besoin d'etre verifié, vérifiez votre boite mail"
  }
})

Catch & interact with events generated with METAV.RS SDK

In your App, you'll need to listen to some events in order to update your UI accordingly, here are some SDK callbacks :

// The user has begin the onboarding process, here's his email
m.onEmailEntered(({email}) => {
  // ...
})


/**
 * The user has completed the onboarding or is already connected
 */
m.onConnect(({session, profile}) => {
  // Here you probably wants to update your user profile state with the profile argument
})

/**
 * The user has logged out
 */
m.onLogOut(() => {
  // update profile state / redirect to home ..etc.
})

🕹️Quests

In this section you’ll access all functions allowing you to retrieve & update informations linked to an Engagement program

Retrieve quest informations

You’ll be able to retrieve quest(s) informations through those functions

m.getExperiences().then((experiences) ={

  /*
  name
  date validite
  status
  */

})

m.getExperience(id).then((experience) => {
  /*
  name
  date validite
  list getExperiences()
  */
})

Quest lifecycle

Over the course of each quests, program members will have to perform actions as part of their quest in order to be rewarded.

Through those methods, you’re be able to: - Update quest status once a certain action has been completed by the user ‘experience’ - Be notified once quest status change in the event of the user receiving a collectible ‘token’ for example

const m = new METAVRS({})   // fonctions de base

// examples
m.dispatch(experience, 'user-enters-code', { code: 123456 })
m.dispatch(experience, 'tutorial-ended')

m.onNotification(({type, data}) => {
  switch (type) {
    case 'token-dropped':
    case 'experience-updated':
      break;
  }
})

o.onTokenDropped((token) => { })
o.onExperienceUpdated((experience) => { })

🎁 Rewards

Through this SDK method you'll be able to configure reward rules so your most engaged customers, community members are rewarded for their contribution.

💡

While Native rewards are available by default in our platform, custom ones needs to be created before being linked to an NFT collection or quest. 3rd party in this case responsible for sending appropriate completion notifcations to our SDK in order to ensure rewards status are updated accordingly. Custom given mentionned above are examplees.

If the user has unlocked a reward, API will trigger the callback event onReward for live feedback display

sdk_instance.onReward((reward) => {
  // user is eligible to reward {id: 3, desc:'20% off', params: {coupon 'MTVRS20'}}

  // display a nice notification/popup to notify the user
  // refresh user profile info
})

🤝🏻User Onboarding
Getting started with our SDK
Show/hide onboarding
📖 Let’s start with with setting up a default onboarding following this tutorial
Catch & interact with events generated with METAV.RS SDK
🕹️Quests
Retrieve quest informations
Quest lifecycle
🎁 Rewards