How to setup XTOPIA AI Assistant Widget - Resources

Resources

OVERVIEW

This is a guideline for project teams on how to setup XTOPIA AI Assistant widget in XTOPIA Masterpage.

Before this, make sure that you have done the following:

Set up Assistant Profile
Set up Assistant Display (Basic setup is good enough)
Set up the JS code below before crawling to ensure header is shown during website crawl

Step by step

1. Open up the Masterpage that you want the AI Assistant Widget to be setup in.

2. Drop the latest AI Assistant widget ( APPS > XYAN > AI Chat Assistant V2 ) onto the page. It can be anywhere. You may simple place it as the first row (as highlighted in screenshot).

2. Locate the outermost row that you want the Assistant Widget to be positioned at (normally the header row).

Set the row ID exactly as "xyan-chat-parent".
Add a class name "main-header" that you can use to customize the CSS rules. It can be any class name as long as it is consistent with your project.
Set the z-index as 20, or higher depends on project. Main idea is to make sure chat is positioned correctly above the header

3. As of now, there is two modes available. Position ABSOLUTE (XIMNET) and FIXED (Merdeka Award).

4. For ABSOLUTE mode

Desktop

Locate the inner row that you want the Assistant Widget to be positioned at. Set the row ID exactly as "xyan-chat-area".
Add a class name "main-header-mobile" that you can use to set the CSS rules. It can be any class name as long as it is consistent with your project.
Set the height of the row. Normally set as 64px.
Set Arrangement > Display as Inline-block. Keep the position as relative.

Switch to Tablet & Mobile

Set Arrangement > Position as Fixed.
Set Arrangement > Top as auto.
Set Arrangement > Right as 0.
Set Arrangement > Bottom as 0.
Set Arrangement > Left as 0.
Set Box Shadow. For example: 0px 0px 15px 0px rgba(0, 0, 0, 0.05)

5. For FIXED mode

Desktop

You can:

EITHER create a separate row same level as "xyan-chat-parent"

OR locate the inner row that you want the Assistant Widget to be positioned at

Set the row ID exactly as "xyan-chat-area".

Add a class name "main-header-mobile" that you can use to set the CSS rules. It can be any class name as long as it is consistent with your project.
Set the height of the row. Normally set as 64px.
Set Arrangement > Display as Inline-block.
Set Arrangement > Position as Fixed.
Set Arrangement > Top as auto.
Set Arrangement > Right as 0.
Set Arrangement > Bottom as 0.
Set Arrangement > Left as 0.

Switch to Tablet & Mobile

Set Box Shadow. For example: 0px 0px 15px 0px rgba(0, 0, 0, 0.05)

Make sure to update Display Settings > Position on XTOPIA to Fixed

Example 1

Example 2

6. Finally, this step is to tackle iOS devices bug.

Navigate to all first level ROW(s) and add class "xyan-active-hidden"
This is to ensure that on mobile iOS, all rows will be hidden when chat window is active.

7. Here are some CSS that you might need. You may modify it based on project needs:

Example CSS rules as below:

        
.main-header{transition:all 0.5;}
.main-header-mobile{transition:all 0.5s;}
@media all and (min-width: 768px) {
	.main-header{transition:all 1.8s; max-height:0px; opacity: 0;}
    .main-header.fade-in{max-height:300px; opacity: 1;}
}
    
@media all and (max-width: 767px) {
	.main-header-mobile{transition:all 1.8s; max-height:0px; opacity: 0;}
	.main-header-mobile.fade-in{max-height:100px; opacity: 1;}
}

8. These are the basic JS function available. Developer may use the functions to customize event handling:

chatActiveFunc
chatInactiveFunc
mountedFunc
handleTrigger({"state": false})
_xyan_content query string to show main header upon engine crawling

Please remember to modify the class name according to what have been set up prior to this.

Developer may use this template as below for a basic setup:

        
(function (window, document) {
	"use strict";

	let count = 0;
	const maxCount = 3;
	const intervalId = setInterval(function () {
		count++;
		console.log(`Attempt ${count}: ${window.chatWidgetConnected}`);

		if (window.chatWidgetConnected) {
			console.log("widget accessible");
			clearInterval(intervalId);
		}

		if (count >= maxCount) {
			console.log('Maximum iterations reached, stopping interval.');
			clearInterval(intervalId);
			if(window.matchMedia("(max-width: 768px)").matches){
				document.querySelector(".main-header-mobile").classList.add("fade-in");
			} else {
				document.querySelector(".main-header").classList.add("fade-in");
			}
		}
	}, 2000);

	window.chatActiveFunc = function () {
	};

	window.chatInactiveFunc = function () {
	};

	if(window.location.search.indexOf("_xyan_content") >= 0){
		document.querySelector(".main-header").classList.add("fade-in");
	}

	window.mountedFunc = function () {
		window.handleTrigger({"state": false});
		if(window.matchMedia("(max-width: 768px)").matches){
			document.querySelector(".main-header-mobile").classList.add("fade-in");
		} else {
			document.querySelector(".main-header").classList.add("fade-in");
		}
	};

}(window, document));