Skip to main content

All attributes

AttributeDefaultDescription
data-api-keyrequiredYour Orova API key
data-agent-idrequiredAgent ID to connect to
data-server-urlrequiredOrova API server URL
data-modechatWidget mode: chat, voice, video, multi
data-positionbottom-rightButton position: bottom-right or bottom-left
data-themelightColor theme: light or dark
data-primary-color#111111Brand color for buttons and accents
data-titleOrovaHeader title text
data-subtitleWe typically reply instantlyHeader subtitle text
data-greeting(auto)Custom greeting message. If empty, fetches from agent’s first message

Modes explained

Chat mode

Text-only conversation. Users type messages and receive streaming responses.
<script ... data-mode="chat"></script>

Voice mode

Shows a picker with Chat and Voice options. Users choose their preferred communication method.
<script ... data-mode="voice"></script>

Video mode

Video call with a realistic avatar. Users see the avatar and can optionally enable their camera.
<script ... data-mode="video"></script>

Multi mode

Shows a picker with Voice and Video options.
<script ... data-mode="multi"></script>

Theming

Light theme (default)

<script ...
  data-theme="light"
  data-primary-color="#312E56"
></script>

Dark theme

<script ...
  data-theme="dark"
  data-primary-color="#6C63FF"
></script>
The data-primary-color affects:
  • Floating action button background
  • User message bubbles
  • Header background
  • Send button
  • Active states and accents

Positioning

<!-- Bottom right (default) -->
<script ... data-position="bottom-right"></script>

<!-- Bottom left -->
<script ... data-position="bottom-left"></script>

Panel dimensions

The widget panel is 400px wide and 620px tall by default. On mobile screens (under 440px), it expands to fill the screen width with 80% viewport height.

Branding

The widget shows “Powered by Orova” at the bottom. This links to orova.ai.