API

Iframe API

Iframe API

Get API Key

The package requires an API key to be used. To get one use API to create a "all" scoped API key.

bash
curl -X 'POST' \
  'https://api.unionavatars.com/v2/keys' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{
      "description": "My Application API Key",
      "scope": "all",
      "expire_at": "<an expiry date>"
    }'

bash
curl -X 'POST' \
  'https://api.unionavatars.com/v2/keys' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{
      "description": "My Application API Key",
      "scope": "all",
      "expire_at": "<an expiry date>"
    }'

After that save the API Key to be reused later for the Iframe library.

Objects

In the package the TS defintions to help development process are included.

Options

ts
import { type Options } from '@unionavatars/iframe'
 
const options = {
  color: 'violet', /*
    string, any valid web color, could be hex code, hsla, or any valid css color unit.
    Values like 'rgb(255, 120, 80)' or 'hsl(23, 80%, 40%)', or '#E3256B' are allowed
  */
  logo: 'https://example.com/path/to-image.jpg', /*
    string, any accessible file or dataurl, files over net     
    must be referenced with an absolute path.
  */
  background: 'https://example.com/path/to-large-image.png', /*
    string, any accessible file or dataurl, files over net     
    must be referenced with an absolute path.
  */
  apiKey: '<your-API-key>', // string, required, your API Key.
  hideLogout: false // boolean, if set hides the logout button 
} as Options
       (alias) type Options = {
    color?: string | undefined;
    logo?: string | undefined;
    background?: string | undefined;
    apiKey: string;
    hideLogout?: boolean | undefined;
}
import Options

ts
import { type Options } from '@unionavatars/iframe'
 
const options = {
  color: 'violet', /*
    string, any valid web color, could be hex code, hsla, or any valid css color unit.
    Values like 'rgb(255, 120, 80)' or 'hsl(23, 80%, 40%)', or '#E3256B' are allowed
  */
  logo: 'https://example.com/path/to-image.jpg', /*
    string, any accessible file or dataurl, files over net     
    must be referenced with an absolute path.
  */
  background: 'https://example.com/path/to-large-image.png', /*
    string, any accessible file or dataurl, files over net     
    must be referenced with an absolute path.
  */
  apiKey: '<your-API-key>', // string, required, your API Key.
  hideLogout: false // boolean, if set hides the logout button 
} as Options
       (alias) type Options = {
    color?: string | undefined;
    logo?: string | undefined;
    background?: string | undefined;
    apiKey: string;
    hideLogout?: boolean | undefined;
}
import Options

This object is used as a parameter sent to the setup function call.

client

The client is the instance used to communicate with the iframe. It is composed of 4 functions.

client.on(key, callback)
client.once(key, callback)
client.off(key, callback)
client.request(key, callback)

The on, once and off methods can be called with any key from Outputs and return with be it's value.

ts
// @filename: main.ts
import { setup } from '@unionavatars/iframe'
 
const iframe = document.querySelector('iframe#id') as HTMLIFrameElement
export const client = setup(iframe, { apiKey: 'YOUR-API-KEY'})
               const client: {
    on<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<D[O]>): void;
    once<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<...>): void;
    off<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<...>): void;
    request<K extends keyof Requests = keyof Requests, P extends unknown[] = Parameters<...>, R = ReturnType<...>>(key: K, ...params: P): Promise<...>;
}

ts
// @filename: main.ts
import { setup } from '@unionavatars/iframe'
 
const iframe = document.querySelector('iframe#id') as HTMLIFrameElement
export const client = setup(iframe, { apiKey: 'YOUR-API-KEY'})
               const client: {
    on<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<D[O]>): void;
    once<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<...>): void;
    off<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<...>): void;
    request<K extends keyof Requests = keyof Requests, P extends unknown[] = Parameters<...>, R = ReturnType<...>>(key: K, ...params: P): Promise<...>;
}

Response

Response object contains a boolean named succeed which contains true if it completed without errors, and if it failed an error field will be populated.

ts
import { client } from './main'
 
const res = await client.request('outfits')
      const res: {
    succeed: boolean;
    data?: Outfit[] | undefined;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const res = await client.request('outfits')
      const res: {
    succeed: boolean;
    data?: Outfit[] | undefined;
    error?: Error | undefined;
}

Functions

setup

The setup method is the one responsible to connect the iframe with the container. Returns a client object. It accepts 2 parameters, a required iframe loaded instance and an Options.

ts
import { setup } from '@unionavatars/iframe'
          (alias) function setup(iframeOrWindow: HTMLIFrameElement | Window, opts: Options): {
    on<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<D[O]>): void;
    once<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<...>): void;
    off<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<...>): void;
    request<K extends keyof Requests = keyof Requests, P extends unknown[] = Parameters<...>, R = ReturnType<...>>(key: K, ...params: P): Promise<...>;
}
import setup

ts
import { setup } from '@unionavatars/iframe'
          (alias) function setup(iframeOrWindow: HTMLIFrameElement | Window, opts: Options): {
    on<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<D[O]>): void;
    once<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<...>): void;
    off<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<...>): void;
    request<K extends keyof Requests = keyof Requests, P extends unknown[] = Parameters<...>, R = ReturnType<...>>(key: K, ...params: P): Promise<...>;
}
import setup

client.on(key, callback)

The on method can be used to listen for events happening on the iframe. It receives 2 parameters:

key: the name of the event intercepted
callback: The callback to listen for the event

ts
import { client } from './main'
 
const listener = () => console.log('logged in')
client.on('logged-in', listener) // any listen event
       
(method) on<"logged-in", Outputs>(key: "logged-in", cb: Listener<unknown>): void

ts
import { client } from './main'
 
const listener = () => console.log('logged in')
client.on('logged-in', listener) // any listen event
       
(method) on<"logged-in", Outputs>(key: "logged-in", cb: Listener<unknown>): void

avatar-select

Whenever an avatar has been selected: callback is called with an avatar instance.

ts
import { client } from './main'
 
client.on('avatar-select', avatar => console.log(avatar.name))
                             
(parameter) avatar: Avatar

ts
import { client } from './main'
 
client.on('avatar-select', avatar => console.log(avatar.name))
                             
(parameter) avatar: Avatar

camera-ready

Fired as soon as the camera is available.

ts
import { client } from './main'
client.on('camera-ready', () => console.log('camera is ready'))
       
(method) on<"camera-ready", Outputs>(key: "camera-ready", cb: Listener<unknown>): void

ts
import { client } from './main'
client.on('camera-ready', () => console.log('camera is ready'))
       
(method) on<"camera-ready", Outputs>(key: "camera-ready", cb: Listener<unknown>): void

logged-in

Fired just after any login/signup action.

ts
import { client } from './main'
client.on('logged-in', () => console.log('user has been logged in'))
       
(method) on<"logged-in", Outputs>(key: "logged-in", cb: Listener<unknown>): void

ts
import { client } from './main'
client.on('logged-in', () => console.log('user has been logged in'))
       
(method) on<"logged-in", Outputs>(key: "logged-in", cb: Listener<unknown>): void

avatar-created

Fired after finishing the creation of an avatar.

ts
import { client } from './main'
client.on('avatar-created', avatar => console.log(avatar.name))
                              
(parameter) avatar: Avatar

ts
import { client } from './main'
client.on('avatar-created', avatar => console.log(avatar.name))
                              
(parameter) avatar: Avatar

page-loaded

Fired after loading the page.

ts
import { client } from './main'
client.on('page-loaded', view => console.log(`View ${view} has been loaded`))
                          
(parameter) view: Path

ts
import { client } from './main'
client.on('page-loaded', view => console.log(`View ${view} has been loaded`))
                          
(parameter) view: Path

client.once(key, callback)

The once behaves the sames as the on but will be disconnected just after executing the callback.

ts
import { client } from './main'
 
client.once
        
(method) once<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<D[O]>): void

ts
import { client } from './main'
 
client.once
        
(method) once<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<D[O]>): void

client.off(key, callback)

This method disconnected the callback from being executed after the key event happens.

Consider once as a shorthand for.

ts
import { type Avatar } from '@unionavatars/iframe'
import { client } from './main'
 
const cb = (avatar: Avatar) => {
  console.log(avatar.name)
  client.off('avatar-select', cb)
         
(method) off<"avatar-select", Outputs>(key: "avatar-select", cb: Listener<Avatar>): void
} // this is the same as 'once'
client.on('avatar-select', cb)
       
(method) on<"avatar-select", Outputs>(key: "avatar-select", cb: Listener<Avatar>): void

ts
import { type Avatar } from '@unionavatars/iframe'
import { client } from './main'
 
const cb = (avatar: Avatar) => {
  console.log(avatar.name)
  client.off('avatar-select', cb)
         
(method) off<"avatar-select", Outputs>(key: "avatar-select", cb: Listener<Avatar>): void
} // this is the same as 'once'
client.on('avatar-select', cb)
       
(method) on<"avatar-select", Outputs>(key: "avatar-select", cb: Listener<Avatar>): void

client.request(key, callback)

This method sends a request to the iframe and gets back a response.

ts
import { client } from './main'
 
client.request
         
(method) request<K extends keyof Requests = keyof Requests, P extends unknown[] = Parameters<Requests[K]>, R = ReturnType<Requests[K]>>(key: K, ...params: P): Promise<...>

ts
import { client } from './main'
 
client.request
         
(method) request<K extends keyof Requests = keyof Requests, P extends unknown[] = Parameters<Requests[K]>, R = ReturnType<Requests[K]>>(key: K, ...params: P): Promise<...>

Accepts 2 parameters, the user and the password, returns the token or an Error if failed.

ts
import { client } from './main'
 
const resp = await client.request('login', 'user@email.com', 'some-password')
       const resp: {
    succeed: boolean;
    data?: string | undefined;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const resp = await client.request('login', 'user@email.com', 'some-password')
       const resp: {
    succeed: boolean;
    data?: string | undefined;
    error?: Error | undefined;
}

logout

No parameters, returns a boolean with true on success and false on failure.

ts
import { client } from './main'
 
const resp = await client.request('logout')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const resp = await client.request('logout')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

register

Accepts 2 parameters, the user and the password, returns the token.

ts
import { client } from './main'
 
const resp = await client.request('register', 'user@email.com', 'some-password')
       const resp: {
    succeed: boolean;
    data?: string | undefined;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const resp = await client.request('register', 'user@email.com', 'some-password')
       const resp: {
    succeed: boolean;
    data?: string | undefined;
    error?: Error | undefined;
}

authenticate

Accepts a token as a parameter, returns a boolean with true on success and false on failure.

ts
import { client } from './main'
 
const resp = await client.request('authenticate', 'a-session-token')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const resp = await client.request('authenticate', 'a-session-token')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

recover-password

Accepts an email as parameter, returns a boolean with true on success and false on failure.

ts
import { client } from './main'
 
const resp = await client.request('recover-password', 'user@email.com')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const resp = await client.request('recover-password', 'user@email.com')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

caution

User needs to be authenticated for this to work

reset-password

Accepts a token and a password as parameters, returns a boolean with true on success and false on failure.

ts
import { client } from './main'
 
const resp = await client.request('reset-password', 'a-session-token', 'password')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const resp = await client.request('reset-password', 'a-session-token', 'password')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

caution

User needs to be authenticated for this to work

take-picture

Captures the picture on the webcam if available

caution

This action won't work if:

View is not set to "CreateAvatar"
Webcam stream is blocked or missing

ts
import { client } from './main'
 
const resp = await client.request('take-picture')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const resp = await client.request('take-picture')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

send-picture

Sends a picture so it's used instead of the webcam capture

caution

The value to be sent should be the encoded contents of a file, usually a base64 encoded string.

ts
import { client } from './main'
 
const resp = await client.request('send-picture', 'data:image/jpeg;base64,....')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const resp = await client.request('send-picture', 'data:image/jpeg;base64,....')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

confirm-picture

To confirm the selection on the preview.

caution

This won't work if preview on the CreateAvatar is not set.

ts
import { client } from './main'
 
const resp = await client.request('confirm-picture')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const resp = await client.request('confirm-picture')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

convert-avatar

Converts the avatar to VRM format. The parameter is the ID of the avatar to convert from GLB to VRM

ts
import { client } from './main'
 
const avatarId = '22f58d93-0ad9-43c5-a75b-e0c224349f13'
 
const resp = await client.request('convert-avatar', avatarId)
       const resp: {
    succeed: boolean;
    data?: string | undefined;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const avatarId = '22f58d93-0ad9-43c5-a75b-e0c224349f13'
 
const resp = await client.request('convert-avatar', avatarId)
       const resp: {
    succeed: boolean;
    data?: string | undefined;
    error?: Error | undefined;
}

complete-avatar

The action to finish the avatar creation with the body selection.

caution

This action won't work if:

The head has not been created
The selected view is not the "SelectBody"

ts
import { client } from './main'
 
const avatarId = '22f58d93-0ad9-43c5-a75b-e0c224349f13'
 
const resp = await client.request('complete-avatar', 'body-id')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const avatarId = '22f58d93-0ad9-43c5-a75b-e0c224349f13'
 
const resp = await client.request('complete-avatar', 'body-id')
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

create-avatar

Straightforward call to create an avatar omitting the web flow.

note

It requires:

A name for the avatar to create
A "File" object or a head id
A body id which could be requested with the "bodies" method.

ts
import { client } from './main'
 
const imageData = 'data:image/jpeg;base64,....'
const resp = await client.request('create-avatar', 'Avatar-name', imageData, 'body-id')
       const resp: {
    succeed: boolean;
    data?: any;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const imageData = 'data:image/jpeg;base64,....'
const resp = await client.request('create-avatar', 'Avatar-name', imageData, 'body-id')
       const resp: {
    succeed: boolean;
    data?: any;
    error?: Error | undefined;
}

avatars

No parameters, returns a list of avatars

ts
import { client } from './main'
 
const resp = await client.request('avatars')
       const resp: {
    succeed: boolean;
    data?: Avatar[] | undefined;
    error?: Error | undefined;
}
if (resp.succeed) {
  const { data: avatars } = resp
                  
const avatars: Avatar[] | undefined
}

ts
import { client } from './main'
 
const resp = await client.request('avatars')
       const resp: {
    succeed: boolean;
    data?: Avatar[] | undefined;
    error?: Error | undefined;
}
if (resp.succeed) {
  const { data: avatars } = resp
                  
const avatars: Avatar[] | undefined
}

outfits

No parameters, returns a list of outfits

ts
import { client } from './main'
 
const resp = await client.request('outfits')
       const resp: {
    succeed: boolean;
    data?: Outfit[] | undefined;
    error?: Error | undefined;
}
if (resp.succeed) {
  const { data: outfits } = resp
                  
const outfits: Outfit[] | undefined
}

ts
import { client } from './main'
 
const resp = await client.request('outfits')
       const resp: {
    succeed: boolean;
    data?: Outfit[] | undefined;
    error?: Error | undefined;
}
if (resp.succeed) {
  const { data: outfits } = resp
                  
const outfits: Outfit[] | undefined
}

goto

Accepts a path as a parameter, navigates to that location.

ts
import { client } from './main'
 
const resp = await client.request('goto', '/register') // Navigates to the register page
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const resp = await client.request('goto', '/register') // Navigates to the register page
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

set-logo

Accepts a string as a parameter, absolute path to an image or a data-url.

ts
import { client } from './main'
 
const resp = await client.request('set-logo', 'https://example.com/path/to-image.jpg') // Logo will be updated
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const resp = await client.request('set-logo', 'https://example.com/path/to-image.jpg') // Logo will be updated
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

set-background

Accepts a string as a parameter, absolute path to an image or a data-url.

ts
import { client } from './main'
 
const resp = await client.request('set-background', 'https://example.com/path/to-large-image.png') // Background will be updated
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const resp = await client.request('set-background', 'https://example.com/path/to-large-image.png') // Background will be updated
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

set-color

Accepts a string as a parameter, any valid css color unit.

ts
import { client } from './main'
 
const resp = await client.request('set-color', '#DEFACE') // Theme color will be updated
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

ts
import { client } from './main'
 
const resp = await client.request('set-color', '#DEFACE') // Theme color will be updated
       const resp: {
    succeed: boolean;
    data?: unknown;
    error?: Error | undefined;
}

Frameworks

Basic framework support is included in the API.

the framework utilities are scoped inside its namespace.

ts
import {
  Iframe,
    (alias) function Iframe({ ...props }: Props): import('react').DetailedReactHTMLElement<{
    onLoad: EventHandler<SyntheticEvent<HTMLIFrameElement, Event>>;
    allow: string;
    accept?: string | undefined;
    acceptCharset?: string | undefined;
    action?: string | undefined | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS];
    allowFullScreen?: boolean | undefined;
    allowTransparency?: boolean | undefined;
    alt?: string | undefined;
    as?: string | undefined;
    async?: boolean | undefined;
    autoComplete?: string | undefined;
    autoPlay?: boolean | undefined;
    capture?: boolean | "user" | "environment" | undefined;
    cellPadding?: number | string | undefined;
    cellSpacing?: number | string | undefined;
    charSet?: string | undefined;
    challenge?: string | undefined;
    checked?: boolean | undefined;
    cite?: string | undefined;
    classID?: string | undefined;
    cols?: number | undefined;
    colSpan?: number | undefined;
    controls?: boolean | undefined;
    coords?: string | undefined;
    crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
    data?: string | undefined;
    dateTime?: string | undefined;
    default?: boolean | undefined;
    defer?: boolean | undefined;
    disabled?: boolean | undefined;
    download?: any;
    encType?: string | undefined;
    form?: string | undefined;
    formAction?: string | undefined | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS ...
import Iframe
  Provider,
     (alias) function Provider({ logo, apiKey, background, color, hideLogout, children }: Props & {
    apiKey: string;
}): import('react').FunctionComponentElement<import('react').ProviderProps<Context>>
import Provider
  useIframeContext
         (alias) const useIframeContext: () => Context
import useIframeContext
} from '@unionavatars/iframe/react'

ts
import {
  Iframe,
    (alias) function Iframe({ ...props }: Props): import('react').DetailedReactHTMLElement<{
    onLoad: EventHandler<SyntheticEvent<HTMLIFrameElement, Event>>;
    allow: string;
    accept?: string | undefined;
    acceptCharset?: string | undefined;
    action?: string | undefined | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS];
    allowFullScreen?: boolean | undefined;
    allowTransparency?: boolean | undefined;
    alt?: string | undefined;
    as?: string | undefined;
    async?: boolean | undefined;
    autoComplete?: string | undefined;
    autoPlay?: boolean | undefined;
    capture?: boolean | "user" | "environment" | undefined;
    cellPadding?: number | string | undefined;
    cellSpacing?: number | string | undefined;
    charSet?: string | undefined;
    challenge?: string | undefined;
    checked?: boolean | undefined;
    cite?: string | undefined;
    classID?: string | undefined;
    cols?: number | undefined;
    colSpan?: number | undefined;
    controls?: boolean | undefined;
    coords?: string | undefined;
    crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
    data?: string | undefined;
    dateTime?: string | undefined;
    default?: boolean | undefined;
    defer?: boolean | undefined;
    disabled?: boolean | undefined;
    download?: any;
    encType?: string | undefined;
    form?: string | undefined;
    formAction?: string | undefined | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS ...
import Iframe
  Provider,
     (alias) function Provider({ logo, apiKey, background, color, hideLogout, children }: Props & {
    apiKey: string;
}): import('react').FunctionComponentElement<import('react').ProviderProps<Context>>
import Provider
  useIframeContext
         (alias) const useIframeContext: () => Context
import useIframeContext
} from '@unionavatars/iframe/react'

Same goes for vue

ts
import {
  Plugin,
    (alias) function Plugin(opts: Options): VuePlugin
import Plugin
  Iframe,
    (alias) const Iframe: DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<{}>>, {}, {}>
import Iframe
  useIframeContext
         (alias) function useIframeContext(): Context | undefined
import useIframeContext
} from '@unionavatars/iframe/vue'

ts
import {
  Plugin,
    (alias) function Plugin(opts: Options): VuePlugin
import Plugin
  Iframe,
    (alias) const Iframe: DefineComponent<{}, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
    [key: string]: any;
}>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<{}>>, {}, {}>
import Iframe
  useIframeContext
         (alias) function useIframeContext(): Context | undefined
import useIframeContext
} from '@unionavatars/iframe/vue'

React

Provider

The base provider that connects the client to the iframe on load.

The provider accepts several optional parameter for initialization and a required apiKey parameter

ts
import { Iframe, Provider } from '@unionavatars/iframe/react'
import Application from './app'
 
function Root() {
  return ( // this parameters will set the base color and the log
    <Provider
      background="purple"
          
(property) background?: string | undefined
      color="blue"
       
(property) React.HTMLAttributes<T>.color?: string | undefined
      logo="https://picsum.photos/100/80"
       
(property) logo?: string | undefined
      apiKey="YOUR-API-KEY"
        
(property) apiKey: string
      hideLogout
          
(property) hideLogout?: boolean | undefined
    >
      <Iframe src="https://iframe.unionavatars.com" />
      <Application />
    </Provider>
  )
}

ts
import { Iframe, Provider } from '@unionavatars/iframe/react'
import Application from './app'
 
function Root() {
  return ( // this parameters will set the base color and the log
    <Provider
      background="purple"
          
(property) background?: string | undefined
      color="blue"
       
(property) React.HTMLAttributes<T>.color?: string | undefined
      logo="https://picsum.photos/100/80"
       
(property) logo?: string | undefined
      apiKey="YOUR-API-KEY"
        
(property) apiKey: string
      hideLogout
          
(property) hideLogout?: boolean | undefined
    >
      <Iframe src="https://iframe.unionavatars.com" />
      <Application />
    </Provider>
  )
}

Iframe

Convenience wrapper to connect the onload event with the Provider

ts
import { Iframe, Provider } from '@unionavatars/iframe/react'
import Application from './app'
 
function Root() {
  return ( // this parameters will set the base color and the log
    <Provider apiKey="YOUR-API-KEY">
                
(property) apiKey: string
      <Iframe src="https://iframe.unionavatars.com" />
         (alias) function Iframe({ ...props }: Props): import('react').DetailedReactHTMLElement<{
    onLoad: EventHandler<SyntheticEvent<HTMLIFrameElement, Event>>;
    allow: string;
    accept?: string | undefined;
    acceptCharset?: string | undefined;
    action?: string | undefined | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS];
    allowFullScreen?: boolean | undefined;
    allowTransparency?: boolean | undefined;
    alt?: string | undefined;
    as?: string | undefined;
    async?: boolean | undefined;
    autoComplete?: string | undefined;
    autoPlay?: boolean | undefined;
    capture?: boolean | "user" | "environment" | undefined;
    cellPadding?: number | string | undefined;
    cellSpacing?: number | string | undefined;
    charSet?: string | undefined;
    challenge?: string | undefined;
    checked?: boolean | undefined;
    cite?: string | undefined;
    classID?: string | undefined;
    cols?: number | undefined;
    colSpan?: number | undefined;
    controls?: boolean | undefined;
    coords?: string | undefined;
    crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
    data?: string | undefined;
    dateTime?: string | undefined;
    default?: boolean | undefined;
    defer?: boolean | undefined;
    disabled?: boolean | undefined;
    download?: any;
    encType?: string | undefined;
    form?: string | undefined;
    formAction?: string | undefined | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS ...
import Iframe
      <Application />
    </Provider>
  )
}

ts
import { Iframe, Provider } from '@unionavatars/iframe/react'
import Application from './app'
 
function Root() {
  return ( // this parameters will set the base color and the log
    <Provider apiKey="YOUR-API-KEY">
                
(property) apiKey: string
      <Iframe src="https://iframe.unionavatars.com" />
         (alias) function Iframe({ ...props }: Props): import('react').DetailedReactHTMLElement<{
    onLoad: EventHandler<SyntheticEvent<HTMLIFrameElement, Event>>;
    allow: string;
    accept?: string | undefined;
    acceptCharset?: string | undefined;
    action?: string | undefined | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS];
    allowFullScreen?: boolean | undefined;
    allowTransparency?: boolean | undefined;
    alt?: string | undefined;
    as?: string | undefined;
    async?: boolean | undefined;
    autoComplete?: string | undefined;
    autoPlay?: boolean | undefined;
    capture?: boolean | "user" | "environment" | undefined;
    cellPadding?: number | string | undefined;
    cellSpacing?: number | string | undefined;
    charSet?: string | undefined;
    challenge?: string | undefined;
    checked?: boolean | undefined;
    cite?: string | undefined;
    classID?: string | undefined;
    cols?: number | undefined;
    colSpan?: number | undefined;
    controls?: boolean | undefined;
    coords?: string | undefined;
    crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
    data?: string | undefined;
    dateTime?: string | undefined;
    default?: boolean | undefined;
    defer?: boolean | undefined;
    disabled?: boolean | undefined;
    download?: any;
    encType?: string | undefined;
    form?: string | undefined;
    formAction?: string | undefined | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS ...
import Iframe
      <Application />
    </Provider>
  )
}

useIframeContext

Hook to get the client to interact with the iframe

ts
import { useIframeContext } from '@unionavatars/iframe/react'
 
const { eventer } = useIframeContext()
          const eventer: {
    on<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<D[O]>): void;
    once<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<...>): void;
    off<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<...>): void;
    request<K extends keyof Requests = keyof Requests, P extends unknown[] = Parameters<...>, R = ReturnType<...>>(key: K, ...params: P): Promise<...>;
} | undefined

ts
import { useIframeContext } from '@unionavatars/iframe/react'
 
const { eventer } = useIframeContext()
          const eventer: {
    on<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<D[O]>): void;
    once<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<...>): void;
    off<O extends keyof Outputs = keyof Outputs, D extends Outputs = Outputs>(key: O, cb: Listener<...>): void;
    request<K extends keyof Requests = keyof Requests, P extends unknown[] = Parameters<...>, R = ReturnType<...>>(key: K, ...params: P): Promise<...>;
} | undefined

Vue

Plugin

Plugin to connect the vue application and the iframe.

ts
import { createApp } from 'vue'
import { Plugin } from '@unionavatars/iframe/vue'
 
const root = document.querySelector('#root') as HTMLElement
const app = createApp(root)
app.use(Plugin({ apiKey: 'YOUR-API-KEY' }))

ts
import { createApp } from 'vue'
import { Plugin } from '@unionavatars/iframe/vue'
 
const root = document.querySelector('#root') as HTMLElement
const app = createApp(root)
app.use(Plugin({ apiKey: 'YOUR-API-KEY' }))

Iframe

Convenience wrapper to connect the onload event with the Plugin

ts
import { defineComponent, h } from 'vue'
import { Iframe } from '@unionavatars/iframe/react'
 
const component = defineComponent({
  render() {
    return () => h(Iframe, { src: "https://iframe.unionavatars.com" })
  }
})

ts
import { defineComponent, h } from 'vue'
import { Iframe } from '@unionavatars/iframe/react'
 
const component = defineComponent({
  render() {
    return () => h(Iframe, { src: "https://iframe.unionavatars.com" })
  }
})

useIframeContext

Hook to get the context that contains the client useful to interact with the iframe.

ts
import { useIframeContext } from '@unionavatars/iframe/vue'
 
const ctx = useIframeContext() // ctx.eventer
                   (alias) useIframeContext(): Context | undefined
import useIframeContext

ts
import { useIframeContext } from '@unionavatars/iframe/vue'
 
const ctx = useIframeContext() // ctx.eventer
                   (alias) useIframeContext(): Context | undefined
import useIframeContext

Iframe API

Get API Key​

Objects​

Options​

client​

Response​

Functions​

setup​

client.on(key, callback)​

avatar-select​

camera-ready​

logged-in​

avatar-created​

page-loaded​

client.once(key, callback)​

client.off(key, callback)​

client.request(key, callback)​

login​

logout​

register​

authenticate​

recover-password​

reset-password​

take-picture​

send-picture​

confirm-picture​

convert-avatar​

complete-avatar​

create-avatar​

avatars​

outfits​

goto​

set-logo​

set-background​

set-color​

Frameworks​

React​

Provider​

Iframe​

useIframeContext​

Vue​

Plugin​

Iframe​

useIframeContext​

Get API Key

Objects

Options

client

Response

Functions

setup

client.on(key, callback)

avatar-select

camera-ready

logged-in

avatar-created

page-loaded

client.once(key, callback)

client.off(key, callback)

client.request(key, callback)

login

logout

register

authenticate

recover-password

reset-password

take-picture

send-picture

confirm-picture

convert-avatar

complete-avatar

create-avatar

avatars

outfits

goto

set-logo

set-background

set-color

Frameworks

React

Provider

Iframe

useIframeContext

Vue

Plugin

Iframe

useIframeContext