Integration Steps

There are several ways to integrate your Cloudpresser AI chatbot with a Vue.js application:

Method 1: Adding to index.html

For Vue CLI or Vite projects, you can add the script directly to the index.html file:

Edit your index.html file:

For Vue CLI: Open the public/index.html file
For Vite: Open the index.html file in the root directory
Add your chatbot code in the <head> section:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue App</title>
    
    <!-- Cloudpresser AI Chat integration -->
    <script src="https://cloudpresserai.com/chatbot-widget.js" data-chatbot-id="YOUR_CHATBOT_ID" async></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Method 2: Using onMounted Hook (Vue 3)

For Vue 3 applications, you can use the onMounted lifecycle hook:

<template>
  <div id="app">
    <!-- Your app content -->
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  // Get the integration code
  const integrationCode = <script src="https://cloudpresserai.com/chatbot-widget.js" data-chatbot-id="YOUR_CHATBOT_ID" async></script>
  
  // Create script element
  const script = document.createElement('script')
  
  // Parse the integration code to get attributes
  const parser = new DOMParser()
  const doc = parser.parseFromString(integrationCode, 'text/html')
  const scriptEl = doc.querySelector('script')
  
  script.src = scriptEl.src
  script.setAttribute('data-chatbot-id', scriptEl.getAttribute('data-chatbot-id'))
  script.async = true
  script.id = 'cloudpresser-chat-script'
  
  // Add to document head
  document.head.appendChild(script)
})

onUnmounted(() => {
  // Clean up on component unmount
  const script = document.getElementById('cloudpresser-chat-script')
  if (script) {
    document.head.removeChild(script)
  }
})
</script>

Tip: If you're using Nuxt.js, you can use the head property in nuxt.config.js or the useHead composable in Nuxt 3 to add the chatbot script.

Method 3: Using Vue Meta (Vue 2)

For Vue 2 applications, you can use the vue-meta package:

Get your chatbot code:
- Go to your Cloudpresser AI Chat dashboard
- Select the chatbot you want to integrate
- Click on the "View Code" or "Integration" button
- Copy the provided code snippet
Install vue-meta:
- Install vue-meta in your project:
```
npm install vue-meta
# or
yarn add vue-meta
```

Configure vue-meta in your main.js:

import Vue from 'vue'
import VueMeta from 'vue-meta'
import App from './App.vue'

Vue.use(VueMeta)

new Vue({
  render: h => h(App)
}).$mount('#app')

Add the chatbot to your app:

In your App.vue or main layout component:

<template>
  <div id="app">
    <!-- Your app content -->
  </div>
</template>

<script>
export default {
  metaInfo: {
    script: [
      // Using the integration code from Cloudpresser
      { src="https://cloudpresserai.com/chatbot-widget.js" data-chatbot-id="YOUR_CHATBOT_ID" async}
    ]
  }
}
</script>

Replace "YOUR_CHATBOT_ID" with your actual chatbot ID and update the script src URL if needed.

Vue Framework Considerations

Vue 3

For Vue 3, you can use the onMounted lifecycle hook or a plugin like @vueuse/head.

Vue 2

For Vue 2, the vue-meta package is the recommended approach for managing head tags.

Nuxt.js

For Nuxt.js, you can add the script in the head section of nuxt.config.js:

// nuxt.config.js (Nuxt 2)
export default {
  head: {
    script: [
      // Using the integration code from Cloudpresser
      { src="https://cloudpresserai.com/chatbot-widget.js" data-chatbot-id="YOUR_CHATBOT_ID" async}
    ]
  }
}

// For Nuxt 3, use the useHead composable in your app.vue
// import { generateIntegrationCodeNext } from '@/utils/integration-code'
// useHead({
//   script: [{ src="https://cloudpresserai.com/chatbot-widget.js" data-chatbot-id="YOUR_CHATBOT_ID" async}]
// })

Troubleshooting

Chatbot not appearing in the app

Check the browser console for any errors. Ensure the script is being added to the DOM correctly and that the chatbot ID is correct.

Script loading multiple times

If using the onMounted method, ensure you're adding a unique ID to the script element and properly cleaning it up in onUnmounted.

Issues with Single Page Application (SPA) navigation

The chatbot should persist across page navigations in an SPA. If it disappears, ensure you're adding the script at the application root level, not in individual page components.

Need Help?

If you're experiencing issues with the Vue.js integration, please contact our support team at [email protected].

Vue.js Integration Guide