LogoLogo
PlaygroundVideosBlogPricing
  • Welcome
  • Convai Playground
    • Playground Walkthrough
    • Get Started
    • Character Creator Tool
      • Create Character
      • Language and Speech
      • Knowledge Bank
      • Personality and Style
      • State of Mind
      • Memory
      • Actions
      • Narrative Design
      • Character Versioning
    • F.A.Q
  • Plugins & Integrations
    • Introduction
    • Unity Plugin
      • Pre-Requisites
      • Compatibility
      • Downloads
        • Limitations of WebGL Plugin
      • Setting Up Unity Plugin
      • Troubleshooting Guide
        • Disable Assembly Validation
        • Missing Newtonsoft Json
        • Microphone Permission Issues
        • Default Animations Incompatibility
        • Animations have Facial Blendshapes
        • Jaw Bone in Avatar is not Free
        • macOS Permission Issues
      • Creating a Convai Powered Scene from Template
      • Importing Ready Player Me (RPM) Characters
      • Importing Custom Characters
      • Adding Actions to your Character
      • Adding Lip-Sync to your Character
      • Adding Narrative Design to your Character
        • Narrative Design Keys
      • Adding NPC to NPC Conversation
      • Adding Scene Reference and Point-At Crosshairs
      • Utilities
        • Character Emotion
        • Player Data Container
        • Long Term Memory
        • Language Support
        • Managing sessionID Locally
        • Transcript UI System
        • Pre-built UI Prefabs
        • Input Management
        • Notification System
        • Settings Panel
        • Dynamic Information Context
      • Building For Supported Platforms
        • Building for iOS/iPadOS
        • Building for WebGL
        • Convai XR
          • Building for VR
            • VR Automatic Installation
            • VR Manual Installation
          • Building for MR
            • MR Automatic Installation
            • MR Manual Installation
          • Building for AR
          • Interacting with XR UI Elements
        • Building for macOS Universal apps
      • Changelogs
      • Tutorials
        • Narrative Design
        • NPC2NPC
    • Unreal Engine
      • Supported Platforms
      • Installation
      • Guides
        • Dynamic Environment Info
        • Change AI Character Movement Speed
        • Integration with Pixel Streaming
        • Adjust Interaction Radius
        • Creating MetaHuman Characters
          • Adding MetaHuman
          • Adding LipSync to MetaHuman (From plugin version 3.0.0 or later )
          • Change the Parent Class for MetaHuman
          • Change the parent class for Player.
          • Adding LipSync to MetaHuman (Deprecated)
        • Creating ReadyPlayerMe Characters
          • Download Plugins
          • Adding ReadyPlayerMe Character
          • Change the parent class for Player.
        • Creating Reallusion Characters
          • Creating a Reallusion Character
          • Importing Reallusion character and setting up the Convai plugin
          • Binding objects to Reallusion Character
        • Event-Aware Convai Characters
        • Operations Based on the Presence of Certain Words
        • Narrative Design
          • Narrative Design Trigger
          • Narrative Design Keys
        • Actions Guide
          • Stage 1: Default Actions
            • Moves To
            • Follows
          • Stage 2: Custom Actions
            • Simple actions
            • Adding Descriptions to Actions
          • Stage 3: Custom Actions with Single Parameter
          • Main Character and Attention Object
        • Customization
          • Push to Talk
          • Alter Character Response Audio Rate
        • Speech To Text Transcription
        • Enable Multiplayer Support
        • 3D Chat Widget
        • Long Term Memory
        • Saving and Loading Session
      • Blueprints Reference
        • Convai Player
        • Convai Chatbot
        • Convai Environment
        • Convai Object Entry
        • Convai Result Action
        • Convai Extra Params
        • Speech To Text
        • Text To Speech
        • Utility Functions
      • Troubleshoot Guide
        • Missing Unreal Engine Tool Set in Microsoft Visual Studio Toolchain
        • Convai Module Not Found
        • MetaHuman Plugin Conflict
        • Failure to Load Character IDs
      • Microphone Settings
        • Set Audio Gain
        • Set Microphone
        • Microphone test
        • List Microphone Devices
      • Mac Microphone Permission: Required for UE 5.0 and 5.3
      • Guides V2 (Under Development)
        • Getting Started
          • Installation
          • Simple Talking Cube
          • Adding Premade Chat and Settings UI
    • Web Plugin
      • PlayCanvas Plugin
        • Adding External Script
        • First Person View
        • Adding characters to scene
        • Character Animations
        • Convai Integration
        • Chat Overlay
      • Convai Web SDK
        • Getting Started
        • Facial Expressions
        • Actions
      • JavaScript Chat UI SDK
        • Getting Started
        • ChatBubble Props
      • Narrative Design Guide
        • Narrative Design Triggers
        • Narrative Design Keys
      • GLB Characters for Convai
      • GLB/FBX animations for Convai
    • Modding Framework
      • Modding Cyberpunk 2077
    • Other Integrations
      • Roblox
        • Sample Game 1
        • Sample Game 2
        • Code Example
          • Character Conversation API
      • Discord
        • Create a Discord Bot
        • Hosting Discord Bot from Personal Server
        • Hosting Discord Bot from Replit
      • Omniverse Extension
      • Third-Party API Integrations
        • ElevenLabs API Integration
  • Reference
    • Core API Reference
      • Character Base API
      • Interaction API
      • Core AI Setting API
      • Backstory API
      • Chat History API
      • Knowledge Bank API
      • Narrative Design API
      • Action API
      • Language List API
      • Voice List API
      • Character List API
      • Evaluation API
Powered by GitBook
On this page

Was this helpful?

  1. Plugins & Integrations
  2. Web Plugin
  3. JavaScript Chat UI SDK

ChatBubble Props

Dive into the detailed guide to understand and utilize the properties that can be passed to your Chat Bubble component for enhanced customization and control.

In the ChatBubble component, there are three main properties:

  1. A chatHistory property to determine whether to display the chat history.

  2. A chatUiVariant property to specify the chat variant to display.

  3. A set of properties returned by useConvaiClient which are essential for fetching user and NPC texts.

The set of properties that are mandatory to be returned by the useConvaiClient (You can follow the JavaScript SDK tutorial to set up your own custom useConvaiClient hook) for the Chat Bubble to work as expected are:

  1. npcText : Stores the text returned by Npc.

  2. userText: Stores the user text.

  3. convaiClient: Stores the state of convai client and is used by Chat Bubble to set session Id.

  4. keyPressed: Changes whenever the user presses the key and starts speaking.

  5. characterId: Used by the chat bubble to store and retrieve chat history.

  6. setUserText: Used by Chat Bubble component to reset the Chat History.

  7. setNpcText: Used by the Chat Bubble component to reset the Chat History.

  8. setEnter: Used by the textbox to send the textbox content to the client whenever the user press enter.

These are the properties that can be optionally passed by the custom useConvaiClient hook. If you are using the inbuilt useConvaiClient hook you can use these properties:

  1. npcName: Name that will be shown on the chat UI for your character.

  2. userName: Name that will represent user on the chat UI.

  3. gender: Returns the gender of your avatar ( Can be used to set up animations).

  4. avatar: Gives the model link of your avatar which can be used to load your 3D model to the scene.

  5. actionText: Returns the action text that represents the action Npc has been asked to perform.

There are 4 types of chat variants that you can choose from:

  1. Toggle History Chat

  1. Unified Compact Chat

  1. Sequential Line Chat

  1. Expanded Side Chat

PreviousGetting StartedNextNarrative Design Guide

Last updated 12 months ago

Was this helpful?

Toggle History Chat variant features a bottom panel, displaying only the current user and NPC text. It also includes a 'toggle chat history' button, allowing users to choose whether or not to display previous messages.
Unified Compact chat features a bottom left panel, where both the current messages and the chat history is displayed.
Sequential line chat version features a bottom panel where only a single line of the most recent output is displayed at a given time, maintaining a minimalist view.
'Expanded Side Chat' version closely resembles the 'Unified Compact Chat', but it features a larger, rectangular panel at the bottom left, providing a more spacious layout for your chat interactions.