🏢 Main Portal (Widget Demo)

Portal Login Simulation

ℹ️ Demo Instructions:
This page simulates your main portal. After "logging in", the chatbot widget will appear in the bottom-right corner.

Integration Guide

To integrate this widget into your portal:

1. Add Widget Script

<script src="/dist/chatbot-widget.js"></script>

2. Add Widget Element

<chatbot-widget 
  api-url="https://chatbot-api-sit.volanedev.com"
  user-id="<%= user.id %>">
</chatbot-widget>

3. Pass Auth Token After Login

// After your portal login completes
const widget = document.querySelector('chatbot-widget');
const authToken = sessionStorage.getItem('authToken');
widget.setAuthToken(authToken);

4. Handle Token Refresh (Optional)

// Listen for auth expiry events
window.addEventListener('chatbot-auth-expired', (event) => {
  console.log('Chatbot auth expired for user:', event.detail.userId);
  // Refresh token and update widget
  const newToken = await refreshAuthToken();
  widget.setAuthToken(newToken);
});

Vue 3 Integration Examples

Three small examples showing common Vue 3 patterns: CDN/script tag, ESM import (recommended for modern builds), and a Vue SFC example you can copy into your app.

1. CDN / Script tag (index.html)

<!-- public/index.html -->
<script src="https://chatbot-sit.volanedev.com/dist/chatbot-widget.js"></script>

Then in any Vue template you can directly use the custom element and set the token from onMounted:

<template>
  <chatbot-widget ref="chatbot" api-url="https://chatbot-api-sit.volanedev.com" :user-id="userId" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
const chatbot = ref(null)
const userId = 'user123'

onMounted(() => {
  const token = sessionStorage.getItem('authToken')
  if (chatbot.value && token) chatbot.value.setAuthToken(token)
})

2. ESM import (main.js / Vite)

Import the ESM bundle in your app entry so the element is registered before components mount:

// main.js
import 'chatbot-widget/dist/chatbot-widget.esm.js'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

3. Vue SFC (copy-paste)

<template>
  <div>
    <chatbot-widget ref="chatbot" api-url="https://chatbot-api-sit.volanedev.com" :user-id="userId" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const chatbot = ref(null)
const userId = 'user123'

onMounted(() => {
  // Ensure widget is available (if using ESM import this is usually immediate)
  const token = sessionStorage.getItem('authToken')
  if (chatbot.value && token) chatbot.value.setAuthToken(token)
})

Notes