---
title: Framework examples
description: Copyable examples for opening demos and subscribing to SDK events from React and Vue.
slug: frameworks
order: 5
---

The SDK is framework-agnostic: load `embed.js` as in the [quick start](/docs) and call `window.handhold` from your components.

## React

```javascript
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

```html
<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>
```