> For the complete documentation index, see [llms.txt](https://docs.convai.com/api-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.convai.com/api-docs/plugins-and-integrations/web-plugins/playcanvas-plugin/chat-overlay.md).
# Chat Overlay
Chat Overlay - PlayCanvas Plugin Guide for Convai integration.
Let's add a chat window to enhance user interaction and immersion. Create a New entity called Convai Chat.
### Convai Chat script
\
The `ConvaiChat` script is responsible for managing the chat interface and displaying the conversation between the user and an AI-powered virtual character. It handles rendering user messages and AI responses, maintaining a chat history, and ensuring smooth scrolling behavior within the chat container.
```javascript
// Create a new script called 'convaiChat'
var ConvaiChat = pc.createScript('convaiChat');
// Add an attribute to store the CSS asset
ConvaiChat.attributes.add('css', { type: 'asset', assetType: 'css', title: 'CSS Asset' });
// Add an attribute to store the HTML asset
ConvaiChat.attributes.add('html', { type: 'asset', assetType: 'html', title: 'HTML Asset' });
// Initialize code called once per entity
ConvaiChat.prototype.initialize = function() {
// Create a new div element for the chat box container
this.htmlEl = document.createElement('div');
this.htmlEl.classList.add('chatbox__container');
this.htmlEl.setAttribute("id", "convai-chat");
document.body.appendChild(this.htmlEl);
// Set the HTML content of the chat box container
this.htmlEl.innerHTML = this.html.resource || '';
// Create a STYLE element for the CSS
this.cssEl = document.createElement('style');
document.head.appendChild(this.cssEl);
this.cssEl.innerHTML = this.css.resource || '';
// Initialize variables
this.asset = null;
this.assetId = 0;
this.currentNpcText = "";
this.currentUserText = "";
this.ChatHistory = [];
this.createNewUserChatEl = true;
this.createNewNpcChatEl = true;
this.userChatEl = null;
this.npcChatEl = null;
};
// Function to add a conversation to the chat history
ConvaiChat.prototype.addToChatHistory = function(userQuery, npcResponse) {
// Create an object representing the conversation
const conversation = {
userQuery: userQuery.trim(),
response: npcResponse.trim(),
};
// Push the conversation object to the chat history array
this.ChatHistory.push(conversation);
};
// Function to add a user message to the chat container
ConvaiChat.prototype.addUserMessage = function(message) {
const chatContainer = document.getElementById("chatbot__activeChat");
if (this.createNewUserChatEl) {
const userMessage = document.createElement("div");
userMessage.classList.add("user_message");
this.userChatEl = userMessage;
chatContainer.appendChild(this.userChatEl);
}
this.userChatEl.textContent = message;
};
// Function to add an AI response to the chat container
ConvaiChat.prototype.addNpcMessage = function(message) {
const chatContainer = document.getElementById("chatbot__activeChat");
if (this.createNewNpcChatEl) {
const convaiMessage = document.createElement("div");
convaiMessage.classList.add("convai_message");
this.npcChatEl = chatContainer.appendChild(convaiMessage);
}
this.npcChatEl.textContent = message;
};
// Function to handle the chat updates
ConvaiChat.prototype.handleChat = function() {
// Set userText when the conversation is active
if (window.conversationActive && (window.userTextStream !== this.currentUserText) && window.userTextStream !== "") {
this.currentUserText = window.userTextStream;
// UI for current user chat (also trim in the UI)
this.addUserMessage(this.currentUserText);
this.createNewUserChatEl = false;
}
// Set npcText when the conversation is active
if (window.conversationActive && (window.npcTextStream !== this.currentNpcText) && window.npcTextStream !== "") {
this.currentNpcText = window.npcTextStream;
// UI for current NPC chat (also trim in the UI)
this.addNpcMessage(this.currentNpcText);
this.createNewNpcChatEl = false;
}
// Add the conversation to the chat history when it's finished
if (!window.conversationActive && this.currentUserText !== "" && this.currentNpcText !== "") {
this.addToChatHistory(this.currentUserText, this.currentNpcText);
this.currentUserText = "";
this.currentNpcText = "";
this.createNewUserChatEl = true;
this.createNewNpcChatEl = true;
}
// Scroll to the bottom of the chat container
this.scrollTop();
};
// Function to scroll to the bottom of the chat container
ConvaiChat.prototype.scrollTop = function(dt) {
if (window.conversationActive) {
var chatBox = document.getElementById("chatbot__activeChat");
chatBox.scrollTop = chatBox.scrollHeight - chatBox.clientHeight;
}
};
// Update code called every frame
ConvaiChat.prototype.update = function(dt) {
this.handleChat();
};
```
Add the following files as an attachment to convaiChat script after parsing the script.
### HTML
```html
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.convai.com/api-docs/plugins-and-integrations/web-plugins/playcanvas-plugin/chat-overlay.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
.png?alt=media&token=41837e7c-9130-4b77-b271-044e8baca0a3)