> ## Documentation Index
> Fetch the complete documentation index at: https://docs.navtalk.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Available Avatars

> Browse all available built-in avatar characters for your digital human

## Available Avatars

Choose from our collection of built-in avatar characters to personalize your digital human experience. Each avatar is unique and ready to use in your real-time digital human API integration.

<style>
  {`
    .avatar-card {
      background-color: #ffffff;
    }
    .avatar-card-name {
      color: #1e293b;
    }
    .avatar-card-id {
      color: #64748b;
    }
    @media (prefers-color-scheme: dark) {
      .avatar-card {
        background-color: #1e293b !important;
        border-color: #475569 !important;
      }
      .avatar-card > div:last-child {
        background-color: #1e293b !important;
        border-top-color: #475569 !important;
      }
      .avatar-card-name {
        color: #ffffff !important;
      }
      .avatar-card-id {
        color: #ffffff !important;
      }
    }
    [data-theme="dark"] .avatar-card,
    .dark .avatar-card {
      background-color: #1e293b !important;
      border-color: #475569 !important;
    }
    [data-theme="dark"] .avatar-card > div:last-child,
    .dark .avatar-card > div:last-child {
      background-color: #1e293b !important;
      border-top-color: #475569 !important;
    }
    [data-theme="dark"] .avatar-card-name,
    .dark .avatar-card-name {
      color: #ffffff !important;
    }
    [data-theme="dark"] .avatar-card-id,
    .dark .avatar-card-id {
      color: #ffffff !important;
    }
    `}
</style>

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: '24px', marginTop: '32px', marginBottom: '32px' }}>
  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Astrid.png" alt="Astrid" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Astrid</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Astrid</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Brianna.png" alt="Brianna" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Brianna</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Brianna</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Cameron.png" alt="Cameron" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Cameron</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Cameron</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Catalina.png" alt="Catalina" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Catalina</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Catalina</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Elaine.png" alt="Elaine" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Elaine</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Elaine</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Elizabeth.png" alt="Elizabeth" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Elizabeth</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Elizabeth</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Ella.png" alt="Ella" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Ella</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Ella</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Emily.png" alt="Emily" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Emily</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Emily</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Freya.png" alt="Freya" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Freya</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Freya</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Gabriela.png" alt="Gabriela" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Gabriela</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Gabriela</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Kevin.png" alt="Kevin" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Kevin</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Kevin</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Lauren.png" alt="Lauren" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Lauren</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Lauren</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Lisa.png" alt="Lisa" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Lisa</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Lisa</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Luis.png" alt="Luis" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Luis</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Luis</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Luke.png" alt="Luke" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Luke</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Luke</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Malik.png" alt="Malik" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Malik</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Malik</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Mian.png" alt="Mian" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Mian</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Mian</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Nia.png" alt="Nia" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Nia</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Nia</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Samuel.png" alt="Samuel" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Samuel</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Samuel</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Sarah.png" alt="Sarah" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Sarah</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Sarah</div>
    </div>
  </div>

  <div className="avatar-card" style={{ border: '1px solid #e2e8f0', borderRadius: '12px', overflow: 'hidden' }}>
    <img src="https://navtalk.s3.us-east-2.amazonaws.com/uploadFiles/navtalk.Zaria.png" alt="Zaria" style={{ width: '100%', height: '280px', objectFit: 'cover', display: 'block', border: 'none', margin: 0, padding: 0, borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }} />

    <div style={{ padding: '16px', borderTop: '1px solid #e2e8f0', textAlign: 'center' }}>
      <div className="avatar-card-name" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>Zaria</div>
      <div className="avatar-card-id" style={{ fontSize: '14px' }}>navtalk.Zaria</div>
    </div>
  </div>
</div>

## Try the Avatars

You can view all available characters and test them with a live call on [https://navtalk.ai/avatars/](https://navtalk.ai/avatars/). This interactive gallery allows you to explore each avatar's appearance and have a real-time conversation with them before integrating into your application.

## How to Use

To use any of these avatars in your WebSocket connection, specify the character name in the connection URL:

```javascript theme={null}
const CHARACTER_NAME = 'navtalk.Astrid'; // Replace with your chosen avatar
const LICENSE = 'your-license-key';
const websocketUrl = `wss://transfer.navtalk.ai/wss/v2/realtime-chat?license=${encodeURIComponent(LICENSE)}&name=${encodeURIComponent(CHARACTER_NAME)}`;
```

<Note>
  All avatars are available immediately after your account is created. No additional setup is required.
</Note>