Framework examples
Copyable examples for opening demos and subscribing to SDK events from React and Vue.
The SDK is framework-agnostic: load embed.js as in the quick start and call window.handhold from your components.
React
import { useEffect, useCallback } from 'react';
const DemoButton = () => {
const handleOpenDemo = useCallback(() => {
if (typeof window.handhold?.openDemo === 'function') {
window.handhold.openDemo({ id: 'agent-id', modality: 'VOICE' });
}
}, []);
useEffect(() => {
function handleEvent(data) {
// Handle tracking event
}
window.handhold?.addEventListener('onusermessage', handleEvent);
return () => {
window.handhold?.removeEventListener('onusermessage', handleEvent);
};
}, []);
return (
<button className="demo-button" onClick={handleOpenDemo}>
Start Demo
</button>
);
};Vue
<template>
<button class="demo-button" @click="handleOpenDemo">Start Demo</button>
</template>
<script>
export default {
name: 'DemoButton',
methods: {
handleOpenDemo() {
if (typeof window.handhold?.openDemo === 'function') {
window.handhold.openDemo({ id: 'agent-id', modality: 'VOICE' });
}
},
},
mounted() {
this._handleEvent = (data) => {
// Handle tracking event
};
window.handhold?.addEventListener('onusermessage', this._handleEvent);
},
beforeUnmount() {
window.handhold?.removeEventListener('onusermessage', this._handleEvent);
},
};
</script>For AI agents: a clean Markdown version is available at /docs/frameworks.md.