A guide that lives on your website

Add him to your site

Two lines of HTML put a guide on a page: a script and an element. A third piece, your own answers, lets him take questions. Here he is on a bakery's page, with nothing changed but those two lines.

1. 1

   Load the script

   Copy versonaWebComponent.js to your site. It loads A-Frame, the 3D library it draws with, by itself.

   <script src="versonaWebComponent.js"></script>

   Copy
2. 2

   Place the guide

   Point it at any rigged .glb model and name the clips it has. Atlas is atlas-optimized.glb. The Settings part builds this tag for you.

   <versona-helper
     model-url="/models/your-guide.glb"
     idle-animation="Idle"
     talking-animation="Talk"
     scale="2.5 2.5 2.5"
     enable-page-interaction
     enable-prompt-input>
   </versona-helper>

   Copy
3. 3

   Give him answers

   Without this he still tours, finds, outlines and checks the page. Questions and summaries come to you as an event; send back the text he should say.

   const guide = document.querySelector('versona-helper');
   
   guide.addEventListener('versona-prompt-received', async (event) => {
     const { prompt, pageIndex, respond } = event.detail;
     const reply = await fetch('/your-ai/chat', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ prompt, page: pageIndex })
     }).then(r => r.json());
     respond(reply.text);   // he says it, and keeps it in the history
   });

   Copy

Settings

Attributes on the versona-helper element. Change them here and Atlas changes as you do; the tag below is the one that would give you this guide.

Control him from your code

Methods to call on the element, and the events he sends back. Press Run and watch the log on the right fill as he answers.

How this page answers you

When you ask Atlas something here, the page sends your question and a map of its own parts to Verse's AI. If the reply names a part of the page, he goes there and marks it; then he says the answer out loud. Ask him something and watch it travel.

1. You askIn his question box.
2. He hands it onAs versona-prompt-received, with a map of the page.
3. The page asks the AIVerse's AI reads the question and the map.
4. He goes to the partIf the answer names one.
5. He says itIn his bubble, and out loud.

// the reply may name a part of the page: <scroll>#settings</scroll>
const { extracted, remainingString } = extractScrollContent(reply);
extracted.forEach(id => guide.scrollToElement(id, true));
respond(remainingString);