Docs
Vue.js Integration Guide
Add Heyo live chat to your Vue.js application with support for Vue 2, Vue 3, and Composition API.
This guide shows you how to add Heyo to your Vue.js application. Compatible with Vue 2, Vue 3, Options API, and Composition API.
Installation
Method 1: JavaScript SDK (Recommended)
Install the SDK:
npm install @heyo.so/js
Then use it in your App component (Composition API):
<script setup>
import { onMounted } from 'vue';
import HEYO from '@heyo.so/js'; // or: import { HEYO } from '@heyo.so/js'
onMounted(() => {
HEYO.init({ projectId: 'YOUR_PROJECT_ID' });
});
</script>
Method 2: Script Tag in App.vue (Composition API)
<template>
<div id="app">
<!-- Your app content -->
</div>
</template>
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
const script = document.createElement('script');
script.src = 'https://heyo.so/embed/script';
script.defer = true;
script.setAttribute('data-project-id', 'YOUR_PROJECT_ID');
document.head.appendChild(script);
});
</script>
Method 3: Script Tag in App.vue (Options API)
<template>
<div id="app">
<!-- Your app content -->
</div>
</template>
<script>
export default {
name: 'App',
mounted() {
const script = document.createElement('script');
script.src = 'https://heyo.so/embed/script';
script.defer = true;
script.setAttribute('data-project-id', 'YOUR_PROJECT_ID');
document.head.appendChild(script);
},
};
</script>
Advanced Usage
Create a Composable (Vue 3)
Create composables/useChat.js:
import { onMounted } from 'vue';
export const useChat = () => {
onMounted(() => {
if (window.HEYO) {
window.HEYO.init({ projectId: 'YOUR_PROJECT_ID' });
}
});
const showChat = () => window.HEYO?.show();
const hideChat = () => window.HEYO?.hide();
const toggleChat = () => window.HEYO?.toggle();
return {
showChat,
hideChat,
toggleChat,
};
};
Usage in component:
<template>
<button @click="showChat">Open Chat</button>
</template>
<script setup>
import { useChat } from '@/composables/useChat';
const { showChat } = useChat();
</script>
Control Widget Based on Route
<script setup>
import { watch } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
watch(
() => route.path,
(newPath) => {
// Hide chat on checkout pages
if (newPath.includes('/checkout')) {
window.HEYO?.hide();
} else {
window.HEYO?.show();
}
}
);
</script>
Pass User Data
<script setup>
import { onMounted } from 'vue';
import HEYO from '@heyo.so/js'; // or: import { HEYO } from '@heyo.so/js'
const user = {
name: 'John Doe',
email: '[email protected]',
};
onMounted(() => {
HEYO.init({
projectId: 'YOUR_PROJECT_ID',
user,
});
});
</script>
Integration with Pinia/Vuex
Access chat from your store:
// stores/chat.js
import { defineStore } from 'pinia';
export const useChatStore = defineStore('chat', {
actions: {
openChat() {
window.HEYO?.show();
},
closeChat() {
window.HEYO?.hide();
},
},
});
TypeScript Support
For TypeScript projects, add type definitions:
declare global {
interface Window {
HEYO: {
init: (config: { projectId: string; user?: any }) => void;
show: () => void;
hide: () => void;
toggle: () => void;
};
}
}
export {};
Best Practices
- Initialize Heyo in your root App.vue component
- Use Vue Router guards to control widget visibility
- Leverage Vue's reactivity to pass dynamic user data
- Clean up in
onBeforeUnmountif loading scripts dynamically
Troubleshooting
Widget not appearing
Ensure the script loads after the DOM is ready and you've added your correct Project ID.
Multiple chat instances
Initialize Heyo only once in your app, preferably in App.vue or main.js.
TypeScript errors
Add the type definitions shown above to your src/types or env.d.ts file.