This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
See Vite Configuration Reference.
yarn
yarn run start --host
yarn run build
Embed the messaging app as a widget:
- Include stwidget.js.
<script src="/stwidget.js"></script>
- Example of usage:
<template>
<button @click="toggleWidget()"> Toggle Widget</button>
<div ref="widget" hidden></div>
</template>
<script setup>
const widget = ref();
function initWidget() {
//specify the url of the widget
var stwidget = new StWidget('https://chat.peakd.com/t/hive-163399/0');
//if you would like to not let widget to use keychain passthrough, you can disable it with:
//stwidget.enableKeychainPassthrough = false;
var element = stwidget.createElement();
stwidget.setStyle({ direction: 'rtl', top: '51px', right: '32px' }); //add custom styles
//add direction: 'rtl' if you would like the widget to be expandable by dragging the
//bottom-left corner instead of bottom-right corner
var e = widget.value;
e.appendChild(element);
}
var init = true;
function toggleWidget() {
if(init) { init = false; initWidget(); }
var e = widget.value;
if(e) e.hidden = !e.hidden;
}
</script>
Check out the examples folder for examples of embedding and overlaying the widget in javascript and vue.