API Example

API requests as like AI Chat Avatar

Say

Example Code

<head>
    <!-- Load API file in head tag -->
    <!-- Display Timestamp etc. so that it will not be cached. This example is for PHP -->
    <script src="https://web-xr.studio/jp/api?<?php  echo(time()) ?>"></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>