Avatar Embedding

Put an interactive avatar
on any website.

One iframe and a few lines of CSS. Your avatar floats in the corner, responds to visitors, and works on every device.

Before you start

Find your Avatar ID

Every avatar has a unique ID. You need it to build the iframe src URL.

1. Log in to your Trulience dashboard and go to your avatars list.
2. Each avatar shows its Avatar ID directly below the avatar name — a long number like 750723204286267723.
3. Copy that ID. You'll paste it into the iframe URL as: https://www.trulience.com/avatar/YOUR_AVATAR_ID
The avatar service always runs on trulience.com. Even if your site is hosted elsewhere, the iframe src always points to www.trulience.com/avatar/…

Step 1

Basic iframe embed

The simplest way to add an avatar. Drop this anywhere in your page. Swap in your own Avatar ID.

HTML 
<iframe
  src="https://www.trulience.com/avatar/YOUR_AVATAR_ID"
  frameborder="0"
  allow="microphone; camera; fullscreen; autoplay; encrypted-media"
  allowfullscreen
  style="width: 420px; height: 560px; border: none; border-radius: 20px;">
</iframe>
Permissions matter. The allow attribute grants microphone and camera access inside the iframe. Without it, your visitor won't be able to speak to the avatar.

Step 2

Float it in the corner

Wrap the iframe in a container div. CSS position: fixed pins it to the bottom-left of the viewport so it stays visible as the user scrolls.

HTML 
<div id="trl-avatar">
  <iframe
    src="https://www.trulience.com/avatar/YOUR_AVATAR_ID"
    frameborder="0"
    allow="microphone; camera;
      fullscreen; autoplay;
      encrypted-media"
    allowfullscreen
    style="width:100%;height:100%;
      border:none;
      border-radius:20px">
  </iframe>
</div>
CSS 
#trl-avatar {
  position: fixed;
  bottom:    -6px;
  left:      0;
  z-index:   9999;
  min-height:200px;

  /* size set by JS below */
}
bottom: -6px intentionally clips a few pixels at the bottom edge so the avatar frame bleeds into the page edge, giving a natural "sitting on the page" look. Change to bottom: 0 if you prefer a clean gap.

Step 3

Make it responsive

This script sizes the avatar to 35% of the viewport, capped between 220px and 500px wide, and recalculates on resize. Without it the avatar will be a fixed pixel size.

JavaScript 
(function () {
  var el    = document.getElementById('trl-avatar');
  var MAX   = 500;   // px — largest the avatar will grow
  var MIN   = 220;   // px — smallest on narrow screens
  var RATIO = 4 / 3; // width ÷ height

  function resize() {
    var w = Math.max(MIN, Math.min(window.innerWidth * 0.35, MAX));
    el.style.width  = w + 'px';
    el.style.height = (w / RATIO) + 'px';
  }

  resize();
  window.addEventListener('resize', resize);
}());
Adjust to taste. Change 0.35 (35% of viewport) to control how prominent the avatar feels. 0.25 is more subtle; 0.45 is larger. Change RATIO to match your avatar's screenAspectRatio URL parameter — 4/3 pairs with screenAspectRatio=4:3.

Customisation

URL parameters

Append these as query parameters to your avatar URL to control behaviour and appearance. Combine as many as you need.

Example URL 
https://www.trulience.com/avatar/YOUR_AVATAR_ID?screenAspectRatio=4:3&hideChatInput=true&dialPageBackground=transparent&overlayButtonColor=%23ff6200
Parameter What it does Values Default
screenAspectRatio Sets the width-to-height ratio of the avatar viewport e.g. 5:3, 4:3, 1:1 16:9
hideChatInput Hides the text input bar (voice-only mode) true / false false
hideChatHistory Hides the scrollable chat transcript true / false false
dialPageBackground Background of the avatar page. Use transparent to blend with your site transparent / hex #ffffff
disableDragging Locks the avatar in place — users cannot drag it around true / false false
disablePanels Hides side configuration panels true / false false
overlayButtonColor Colour of the control button. URL-encode # as %23 hex #000000
controlButtonLayout Stacks the control buttons vertically or horizontally column / row row
controlButtonPosition Where the control button cluster sits inside the avatar frame left / center / right right
Hex colours in URLs: always URL-encode the # sign as %23. For example, #ff6200 becomes %23ff6200 in the query string.

Complete example

Ready to paste

A full working HTML page. Replace YOUR_AVATAR_ID and drop it into your project.

HTML — complete page 
<!-- Add inside <head> -->
<style>
  #trl-avatar {
    position:   fixed;
    bottom:     -6px;
    left:       0;
    z-index:    9999;
    min-height: 200px;
  }
</style>

<!-- Add before </body> -->
<div id="trl-avatar">
  <iframe
    src="https://www.trulience.com/avatar/YOUR_AVATAR_ID?screenAspectRatio=4:3&hideChatInput=true&hideChatHistory=true&dialPageBackground=transparent&disableDragging=true&disablePanels=true&controlButtonLayout=column&controlButtonPosition=left&overlayButtonColor=%23ff6200"
    frameborder="0"
    allow="microphone; camera; fullscreen; autoplay; encrypted-media"
    allowfullscreen
    style="width:100%;height:100%;border:none;border-radius:20px">
  </iframe>
</div>

<script>
  (function () {
    var el    = document.getElementById('trl-avatar');
    var MAX   = 500, MIN = 220, RATIO = 4 / 3;
    function resize() {
      var w = Math.max(MIN, Math.min(window.innerWidth * 0.35, MAX));
      el.style.width  = w + 'px';
      el.style.height = (w / RATIO) + 'px';
    }
    resize();
    window.addEventListener('resize', resize);
  }());
</script>