Choosing the Right Front-end#

There are three pathways that one can take for the Tokkio front-end web application. These are:

  • Tokkio UI (default)

  • Tokkio Iframe

  • Custom Tokkio UI

The pathway you take depends on your use case, and are each described below.

Tokkio UI#

If you would like a simple, standalone web application that works out of the box and has all of the features that Tokkio provides, it is recommended to deploy the Tokkio UI. This will give you a simple web application which shows an avatar video, along with video controls, ASR and TTS text captions, an indicator for user presence, and more. It also has a top bar with a configurable title. The Tokkio UI looks like this when it is up and running:

UI Fullscreen Layout

To learn more about the Tokkio UI, you can get started by checking out the Tokkio UI Documentation.

Tokkio Iframe#

If you would instead like to embed an avatar video into your existing website, it is recommended to use the Tokkio Iframe. Unlike the Tokkio UI, the Iframe is a minimal UI which just contains the avatar window and some basic controls to mute the microphone, among other things. It will begin with a static start page, which allows the user to click a button to start their session with an avatar. It does not contain all of the other Tokkio features that are available in the Tokkio UI, including ASR and TTS text transcriptions, user presence indicator, etc.

The Tokkio Iframe looks like this on startup:

Iframe Welcome Page

After the user clicks the start button, it will look like this:

Iframe Avatar Page

To learn more about the Tokkio Iframe, you can get started by checking out the Tokkio Iframe Documentation.

Custom Tokkio UI#

The third and most challenging option is to have a custom UI. This option is designed for users who have a specific experience in mind that they would like to implement, and also have the web-development engineering resources needed to code and host this experience.

One who is creating this experience should do so by creating a custom layout within the Tokkio UI source code, so that they have access to all of the prebuilt Tokkio features out of the box, and do not need to worry about re-implementing all of the communication with the Tokkio application from scratch. This approach will require some experience with the tech stack that the Tokkio UI is created with.

To learn more about all of the options available for Tokkio UI Customization, you can get started by checking out the Tokkio UI Customization Guide.

On this page