3D Versona Assistant Demo

Welcome to the Demo

This page demonstrates the 3D Versona Assistant web component. Click on the 3D versona in the bottom-right corner to see the menu with options:

• Ask Question - Opens a text input to ask the versona a question
• Tour Website - Starts a guided tour of the webpage sections
• Find - Opens a text input to find and highlight content on the page
• Close - Closes the menu

How to Add to Your Website

To add the 3D versona assistant to your website, simply include these two things:

1. Include the JavaScript

<script src="versona-complete-code.js"></script>

2. Add the Web Component

<versona-helper 
  id="myVersona"
  model-url="./resources/drone.glb"
  animation-mode="hovering"
  scale="2.5 2.5 2.5"
  enable-page-interaction
  enable-prompt-input>
</versona-helper>

Available Attributes

• model-url - URL to the GLB 3D model
• animation-mode - "animated", "static", or "hovering"
• scale - Size of the model (x y z)
• idle-animation - Name of the idle animation
• talking-animation - Name of the talking animation
• pointing-animation - Name of the pointing animation
• wave-animation - Name of the waving animation
• hover-amplitude - How high the versona hovers
• hover-speed - Speed of hovering animation
• enable-page-interaction - Flag to enable page analysis
• enable-prompt-input - Flag to enable prompt input

Available Methods

You can control the versona programmatically:

// Get the element
const versona = document.getElementById('myVersona');

// Say something
versona.say('Hello world!');

// Start a tour of the page
versona.tourPageSections();

// Find content on the page
versona.highlightTextOnPage('example');

// Scroll to an element
versona.scrollToElement('#introduction');

Events

Listen for events from the versona:

// When the versona is ready
document.addEventListener('versona-ready', function(e) {
  // Versona is initialized and ready
});

// When a user submits a prompt
versona.addEventListener('versona-prompt-received', function(event) {
  const { prompt, respond } = event.detail;
  
  // Process the prompt
  yourAI.getResponse(prompt).then(response => {
    // Send response back to the versona
    respond(response);
  });
});

AI Integration

Connect the versona to your AI backend:

versona.addEventListener('versona-prompt-received', async function(event) {
  const { prompt, respond } = event.detail;
  
  try {
    // Send to your AI API
    const response = await fetch('https://your-ai-api.com/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ 
        prompt: prompt,
        context: versona.createPageSummary() // Include page context
      })
    });
    
    const data = await response.json();
    
    // Send AI response to the versona
    respond(data.message);
    
    // If the AI response includes element references
    if (data.elementToHighlight) {
      versona.scrollToElement(data.elementToHighlight);
    }
  } catch (error) {
    respond("Sorry, I couldn't connect to my knowledge base.");
  }
});