API requests as like AI Chat Avatar
|
|
<head>
<script src="https://web-xr.studio/jp/api"></script>
</head>
<body>
<!-- XR content -->
<div class="xr-studio" data-id="{xrID}" data-option="noConfig, onlyPageFull"></div>
<!-- Message part : "xrs-wide" class is attached "xrs-wide--on" modifier, when this page become pageFull. -->
<div id="message" class="ai-msg xrs-wide"></div>
<!-- Input part : "xrs-wide" class is attached "xrs-wide--on" modifier, when this page become pageFull. -->
<div class="ai-input xrs-wide">
<input id="input" type="text" placeholder="message..." >
<div id="button">Say</div>
</div>
</body><script>
const $say = document.getElementById('button');
const $msg = document.getElementById('message');
const $input = document.getElementById('input');
const _words = ['Bow', 'Give up', 'Yes', 'No'];
const _you = 'you';
const _msg = [
`Hello,<br>
A XR content by WEB-XR.studio can be freely embedded in your page,
You can also move XR content freely via the API.`,
'Please enter "Bow" in the input form below and click "Say" button.',
'Please Stop Joking.',
`Just send a request to the API at the right time with JavaScript from the parent page
XR content can be linked.<br>
It's very easy.`,
`"Bow" "Give up" "Yes" "No"<br>
This example responds to these words, so try them.`
];
setTimeout(() => {
$msg.innerHTML += <div>${_msg[0]}</div>`;
setTimeout(() => $msg.innerHTML += <div>${_msg[1]}</div>`, 3000);
}, 2000);
const doReply = () => {
let _id, i;
if ($input.value.length <= 0) return;
$msg.innerHTML += `<div>${_you}: ${$input.value}</div>`;
if (_words.indexOf($input.value) != -1) {
for (i = 0; i < _words.length; i++) {
if ($input.value == _words[i]) _id = i + 1;
}
xrsApi[0].postMessage({act: 'case', id: _id}, '*');
$msg.innerHTML += `<div>${_msg[3]}</div>`;
setTimeout(() => {
$msg.innerHTML += `<div>${_msg[4]}</div>`
$msg.scrollTop = $msg.scrollHeight;
}, 3000);
} else {
xrsApi[0].postMessage({act: 'case', id: 4}, '*');
$msg.innerHTML += `<div>${_msg[2]}</div>`;
}
$input.value = '';
$msg.scrollTop = $msg.scrollHeight;
};
$say.addEventListener('click', () => doReply());
document.addEventListener('keydown', (e) => {if (e.keyCode == 13) doReply()});
</script>
<style>
// "xrs-wide" class is attached "xrs-wide--on" modifier, when this page become pageFull.
// Also note that the description is such that the dots are connected because it is in the same hierarchy as "ai-msg".
//
// xrs-wide -> xrs-wide--on : All adapted when the page is full
// xrs-wide-# -> xrs-wide-#--on : When multiple XR contents are installed, change # to a number and handle them individually.
.ai-msg.xrs-wide--on {
position: fixed;
z-index: 10000;
bottom: 10%;
right: 3%;
width: 40%;
background: rgba(255,255,255,.7);
border-radius: 5px;
padding: 8px;
}
.ai-input.xrs-wide--on {
position: fixed;
z-index: 10000;
bottom: 3%;
width: 40%;
right: 3%;
}
</style>