ADAM WIDGET INSTALLATION
To embed the Adam Chat widget:
Include stylesheet <link href="https://uat-adam-chat.travtus.com/v2/index.css" rel="stylesheet">
Include JS library <script src="https://uat-adam-chat.travtus.com/v2/index.js"></script>
Initialize Adam Chat widget by calling AdamChat.init(‘adam-bot’,options)
Make sure that in the options, you include the clientId and source
e.g. AdamChat.init(‘adam-bot’,{clientId: ‘01234567’, source: ‘website’})
Please see the Widget API section for more details about what can be passed as options
<!DOCTYPE data-preserve-html-node="true" html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Adam Widget</title>
<link href="https://uat-adam-chat.travtus.com/v2/index.css" rel="stylesheet">
<script src="https://uat-adam-chat.travtus.com/v2/index.js"></script>
</head>
<body>
<div id="adam-bot"></div>
<script>
(function () {
window.onload = function () {
AdamChat.init('adam-bot', {clientId: ‘01234567’, source:'website'});
}
})()
</script>
</body>
</html>Widget API
Available Methods
init()
openChatWindow()
closeChatWindow()
remove()
init() - Initialises Chat Widget
Creates the Adam Chat icon in the bottom, right corner of the page. It initializes the frame necessary to show/hide the adam chat widget.
It takes two parameters:
Id of the HTML element where the widget will be loaded
An object of options to allow for widget customization behaviour AND to send the mandatory clientId and source
AdamChat.init(‘elementId’, ‘options’)
AdamChat.init(‘adam-bot’, {clientId: ‘testClientId’, source:'website'})
remove() - destroys the chat
Destroys the chat completely, removing it from the bottom of the page. It will remove all chat related HTML. Therefore, in order to add the chat again, you must initialize it using Init()
AdamChat.remove()
openChatWindow() - opens the chat window
Acts like a click on the Adam Chat icon, opening the chat window. This can be used especially for mobile, where you might not want the chat icon to show up, rather having a button click on a custom element where you initialize the widget and force open the chat.
AdamChat.openChatWindow()
closeChatWindow() - closes the chat window
Acts like a click on the close icon on the top right hand corner of the open widget.
AdamChat.closeChatWindow()
Available Options
clientId:
This is a MANDATORY field to pass in
Pass the clientId string provided for the property the tenant belongs to
source:
This is a MANDATORY field to pass in
Pass one of the following values to identify the channel that the conversations is being held on:
“portal” - if the user is accessing Adam via a private/secure portal
“website” - if the user is accessing Adam via a public website
“mobile_app” if the user is accessing Adam via a mobile application
shouldShowChatOnMobile: true|false
The user uses a mobile device and we have the widget initialized, pass the following values:
True - Chat will open automatically in full screen when on mobile device
False - Chat will not show in mobile view, however, it can be opened using ‘openChatWindow()’
clientInfo:
Pass the following to be able to initiate the chat with the user information pre-loaded (for use in resident portals in logged-in state)
“firstName” : user’s first name
“lastName” : user’s last name
“phoneNumber” : user’s registered phone number
“email” : user’s registered email address
“unit” : apartment number
“address” : property address
Example
AdamChat.init('adam-bot', {
clientId: clientId,
source: 'website',
clientInfo: {
firstName: "Adam",
lastName: "Bot",
phoneNumber: "123456789",
email: "adam@travtus.com",
unit: "unit 3",
address: "Summer 5 Rd",
}
});