Page Comparison

This document provides examples showing how to integrate Personal Assistant chatbots into third-party web applications.

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)

...

<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:

...

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.

...

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.