This document provides examples showing how to integrate Personal Assistant chatbots into third-party web applications.
| Table of Contents | ||
|---|---|---|
|
Prerequisites
An instance of Personal Assistant deployed
A server with the third-party web application deployed
Knowledge of web development
Understanding of the PKCE authorization flow (applies only to internal chatbots)
...
| Code Block |
|---|
<div id="chatbot-wrapper">
<div id="chatbot-container">
<div id="messages-wrapper">
<div id="messages-container"></div>
</div>
<form id="message-form">
<input
type="text"
id="message-input"
placeholder="Enter your message"
required
/>
<button id="send-button" type="submit">Send</button>
</form>
</div>
</div> |
Add some basic styling:
...
| View file | ||
|---|---|---|
|
This HTML and CSS will be used for both public and internal chatbots.
Public Chatbot
Create a script of type="module" that will handle communication with the chatbot as well as rendering of messages.
...
| Code Block |
|---|
window.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("message-form");
const messageInput = document.getElementById("message-input");
form.addEventListener("submit", (event) => {
event.preventDefault(); // Prevent form submission
const message = messageInput.value;
// Display sent message
const sentMessageDiv = document.createElement("div");
sentMessageDiv.className = "message sent";
sentMessageDiv.textContent = message;
messagesContainer.appendChild(sentMessageDiv);
const currentMessageDiv = document.createElement("div");
currentMessageDiv.className = "message received";
currentMessageSpan = document.createElement("span");
currentMessageDiv.appendChild(currentMessageSpan);
messagesContainer.appendChild(currentMessageDiv);
chatbotClient.sendMessage(message);
messageInput.value = "";
});
}); |
...
| Code Block |
|---|
chatbotClient.connect(authService.getAccessToken()); |
Example implementations
The attached ZIP archives contain minimal chatbot integrations following the guide above. Each of them requires supplying your own chatbot_client.js, after which they will be fully functional and can be used as reference for you to integrate the chatbots into your own apps.
| View file | ||
|---|---|---|
|
| View file | ||
|---|---|---|
|