declare global {
   interface Window {
       BrevoConversationsID: string
       BrevoConversations: any
   }
}

export const useBrevoWidget = () => {
   // Load widget on mount
   onMounted(() => {
       const script = document.createElement('script')
       script.async = true
       script.src = 'https://conversations-widget.brevo.com/brevo-conversations.js'
       window.BrevoConversationsID = 'YOUR_CONVERSATIONS_ID'

       script.onload = () => {
           window.BrevoConversations =
               window.BrevoConversations ||
               function () {
                   ;(window.BrevoConversations.q = window.BrevoConversations.q || []).push(arguments)
               }
       }

       if (document.head) {
           document.head.appendChild(script)
       }
   })

   // Destroy widget on unmount
   onBeforeUnmount(() => {
       window?.BrevoConversations('kill', true)
   })

   const openChat = () => {
       window?.BrevoConversations('openChat', true)
   }

   return { openChat }
}

<template>
   <h1>Contact us</h1>
   <p>Click on the chat bubble</p>
</template>

<script setup lang="ts">
   useBrevoWidget()
</script>

<template>
   <h1>Contact us</h1>
   <p>Click on the chat bubble or click this button</p>
   <button @click="openChat">Open chat</button>
</template>

<script setup lang="ts">
   const { openChat } = useBrevoWidget()
</script>