Support

back| Documentation > API Examples

Speech Functions

Speak Pre-Existing Audio

Initiate speech of an audio from your account.

Speak Text-To-Speech Audio

Create your text & speak audio and speak it in real time.

Enable/Disable Playback Queing

Subsequent speech calls can be queued for playback, or not.

Stop and Restart Speech

A simple example demonstrating basic speech controls.

Preload Audio

When timing is critical, you may want to pre-load your audio.

Preload Text-To-Speech

When timing is critical, you may want to pre-load your TTS audio.

Adjust Audio Volume

Control the volume of speech.

Silent Mock Speech

This can be useful to get users’ attention before audio is enabled.

Speaking Static Audios in Sequence

Play multiple audios in sequence, to speak longer or to achieve a tailored message.

Speaking Dynamic TTS in Sequence

Play multiple TTS segments in sequence.

Speaking Long TTS Input

Long text input is auto-segmented to overcome the 900 character limit.

Animation Control Functions

Control Your Character's Gaze

Make the character look in any direction

Set Your Character’s Cursor Tracking

Your character can follow the cursor – you can control how

Control Facial Movement

Limit or enhance your character’s facial movements.

Control Facial Expressions

Modify your 3D character’s facial expressions

Control Blink Frequency

Set the (average) blink interval, or turn off blinking entirely

Manage Scene Attributes

Modify Your Character’s Colors

Update skin, hair, lips and eye color (2D character only)

Update Your Scene’s Background Image

Scene background can be modified programmaticly

Modify Your Scene’s Background Color

Affects the color behind the character, and also while loading

Modify Display Settings for Play Controls

Use setStatus to determine when controls are shown

Get Scene Attributes

Certain Scene attributes can be read via this API call.

Access Raw Audio Data

Get handle to the JS audio object

Get / Set Frame Rate

Finetune GPU load for your implementation

Responsive Design - Automated

Turn ON 'responsive' embed option, and we will take care of responsive behavior for you.

Responsive Embed - Standard Embed Code
Responsive Embed - No JS Embed Code

Responsive Design - Manual

Use 'dynamicResize' to implement responsive page behaviour yourself.

Resize Scene Without Reloading It – Example 1
Resize Scene Without Reloading It – Example 2

Events

Using Callbacks

Callbacks allow you to synchronize your page with character speech

Miscellaneous

Add Audio Effects to TTS

Add voice filters to your Text-To-Speech audio to create useful effects

Embed Overlay

Use the API to show & hide a character embedded over the page (Full Body only)

Check Whether Character is 3D

This can be useful to determine whether facial expressions can be applied.

Using Portals to Load and Replace Scenes

Select Which Scene to Load Into Each Portal

With multiple Scenes on the page, you can control what loads where.

Load and Unload a Scene

Use the API to load the Scene, then unload it.

Advanced API Examples

Artificial Intelligence

Using Your AI Bot

How to set up your AI Agent, using the API.

Using Speech Input with your AI Bot

Have a chat with your AI Bot via Speech-To-Text (implemented using Web Speech API)

Integration with 3rd Party AI Bots

Your SitePal character can be used with 3rd Party AI Bots

Using SitePal In JS Frameworks

Read Me! - Embed in React, Angular and Vue React JS Example and Source Code

Demonstrates embedding SitePal in React JS, using speech API function calls and callbacks

React JS AI Speech Input Example and Source Code

Have a chat with your AI Bot by speaking to it (implemented using Web Speech API)

Angular Example and Source Code

Demonstrates embedding SitePal in Angular, using speech API function calls and callbacks

Vue Example and Source Code

Demonstrates embedding SitePal in Vue, using speech API function calls and callbacks

Context Dependent Greeting

Cookie Based Messaging

Use cookies to greet visitors with a different message on each subsequent visit

Time Sensitive Greeting – Using TTS

Greet your visitors according to the time of day

Time Sensitive Greeting – Using Pre-Recorded Audio

Greet your visitors according to the time of day

Time & Day Sensitive Greeting

Greet your visitors according to both time & day of the week.

WebRTC Video

WebRTC Example

Implement real time video delivery using WebRTC

WebRTC Example Using RealTime TTS

Implement video delivery using WebRTC, combining real time text input

Other Examples

SitePal Conversation

Two characters have a conversation

SitePal Conversation And Video Background

Two characters chatting in front of video background

Implement Subtitles In Your Scenes

Add subtitles in any language - it's a piece of cake!

Belated Load Example

Demonstrating how to use your character in a popup dialog

Simple FAQ

Create a “frequently asked questions” implementation