Logo of CustomGPT.ai, a leader in Generative AI for business.
Try for free
Talk to sales

CustomGPT.ai Blog

How do I Embed a Chatbot in Vue?

To embed a chatbot in Vue, choose one of three patterns: iframe, script snippet, or Vue-compatible widget/SDK. Mount the widget from a root layout or shell component and initialize it in lifecycle hooks so it loads once, avoids duplicate scripts, and stays active as users navigate between SPA routes.

Scope:
Last updated: December 2025. Applies globally; confirm embed usage, cookies, and tracking with local privacy laws like GDPR in the EU and CCPA/CPRA in California before deploying chat widgets.

Prerequisites and high-level options in Vue

Before adding a chatbot, you should already have:

  • A Vue 2 or Vue 3 app (Vue CLI, Vite, or Nuxt).
  • A chatbot provider that gives you embed code (iframe, script snippet, or Vue SDK).

In Vue, third-party UI usually fits into one of three patterns:

  1. Inline iframe: you paste <iframe> into a template.
  2. Script snippet: you load a remote <script> and let it inject its own widget.
  3. Vue component / SDK: you install a package and use a provided component or API.

Whichever pattern you choose, you typically initialize the widget in a lifecycle hook like mounted or onMounted, when the component is in the DOM. 

Option 1 – Embed a chatbot iframe in Vue

If your provider gives you an iframe URL, you can wrap it in a Vue component.

Example ChatbotIframe.vue:

<template>
<section class=“chatbot-container”>
<iframe
:src=“src”
title=“Support chatbot”
class=“chatbot-iframe”
:style=“iframeStyle”
loading=“lazy”
sandbox=“allow-scripts allow-same-origin allow-forms”
allow=“microphone; clipboard-read; clipboard-write”
/>
</section>
</template>

<script setup>
const props = defineProps({
src: { type: String, required: true },
height: { type: String, default: ‘600px’ },
width: { type: String, default: ‘100%’ }
})

const iframeStyle = computed(() => ({
border: ‘none’,
width: props.width,
height: props.height
}))
</script>

<style scoped>
.chatbot-container {
max-width: 1200px;
margin: 0 auto;
}
.chatbot-iframe {
display: block;
}
</style>

Then use it anywhere:

<ChatbotIframe src=“https://example.com/my-chatbot-iframe” />

Iframe pros: very simple, isolation from your app, easy to drop into any page. Cons: fewer styling hooks and limited control over deep behavior, since the chatbot lives in a separate document.

Option 2 – Load a chatbot script snippet in Vue

Many chat providers give you a <script> snippet that injects a floating chat bubble. You can place that script in index.html or load it dynamically in a component.

  1. Add snippet in index.html (simple, loads on every page):
<!– public/index.html or root HTML template –>
<body>
<div id=“app”></div>

<script
src=“https://cdn.example-chat.com/widget.js”
data-chatbot-id=“YOUR_BOT_ID”
defer
></script>
</body>

This works, but you don’t control when it initializes beyond page load.

  1. Load snippet in a Vue component (more control):
<script setup>
import { onMounted, onBeforeUnmount } from ‘vue’

const WIDGET_SRC = ‘https://cdn.example-chat.com/widget.js’

function loadScriptOnce() {
if (document.querySelector(`script[src=”${WIDGET_SRC}”]`)) return

const s = document.createElement(‘script’)
s.src = WIDGET_SRC
s.async = true
s.dataset.chatbotId = ‘YOUR_BOT_ID’
document.body.appendChild(s)
}

function removeScriptIfNeeded() {
// Optional: only if you really want to unmount the widget
}
onMounted(loadScriptOnce)
onBeforeUnmount(removeScriptIfNeeded)
</script>

Using lifecycle hooks ensures the script runs after the component is mounted and lets you avoid duplicate loads. 

Option 3 – Use a Vue-compatible chatbot component or SDK

Some chatbot vendors ship a Vue wrapper or JS SDK. In that case you:

  1. Install the package with npm or yarn.
  2. Import a component or register a plugin. 
  3. Pass configuration props (API key, agent ID, theme, language).

Example with a fictional package:

npm install awesome-chatbot-vue

 

// main.js
import { createApp } from ‘vue’
import App from ‘./App.vue’
import AwesomeChatbot from ‘awesome-chatbot-vue’

const app = createApp(App)

app.use(AwesomeChatbot, {
apiKey: import.meta.env.VITE_CHATBOT_API_KEY,
agentId: ‘support-bot’
})
app.mount(‘#app’)

 

<!– App.vue –>
<template>
<div class=“app-shell”>
<Navbar />
<RouterView />
<!– global floating widget –>
<AwesomeChatbotWidget position=“bottom-right” />
</div>
</template>

This plugin-style approach is ideal if you want a persistent widget across the whole SPA and a typed API instead of manually injecting scripts.

How to do it with CustomGPT.ai

Here’s how to embed a CustomGPT.ai chatbot into your Vue app using the documented website/iframe embeds and widgets.

1. Create and train your CustomGPT.ai agent

  1. Sign in to CustomGPT.ai.
  2. Create a New Agent and choose a Website (or another data source). 
  3. Enter your docs, FAQ, or sitemap URL so CustomGPT.ai can crawl and index your site.
  4. Customize its behavior and appearance (name, avatar, colors) in the agent settings. 

2. Choose how you want to embed it

CustomGPT.ai supports:

  • Live chat widget (floating bubble or window) and embedded widget you can drop into any page.
  • Iframe embeds, useful when your site builder expects iframe HTML. 
  • Open-source widget UIs (including Vue-based frontends) that talk to the CustomGPT RAG API. 

All of these can be integrated into a Vue app, because Vue ultimately renders HTML and can host external scripts or iframes.

3. Get the embed code from your agent

  1. In the CustomGPT.ai dashboard, open your agent.
  2. Click Deploy (or Deploy Agent).
  3. Use the Embed / Widget / Integration options to:
    • Make the agent public so it can be embedded externally.
    • Choose a live chat widget position (bubble or window) or embedded style.
    • Copy the HTML script snippet or iframe code generated by CustomGPT.ai. 

4. Embed the widget in your Vue app

Option A — Global widget via index.html:

Paste the CustomGPT.ai embed snippet just before </body> in your main HTML template so it appears on every route: 

<body>
<div id=“app”></div>

<!– CustomGPT.ai live chat widget –>
<script
src=“https://app.customgpt.ai/embed.js”
data-agent-id=“YOUR_AGENT_ID”
></script>
</body>

Option B — Vue component that loads the snippet:

Wrap the snippet with the same loadScriptOnce pattern from Option 2 so you can control when it loads (e.g., only on certain routes).

Option C — Inline iframe embed:

If you copied an iframe embed from the iframe section of your agent’s Integration tab, drop it into a Vue component template (similar to ChatbotIframe above). 

5. Advanced: Vue-based widget using CustomGPT.ai starter kit

CustomGPT.ai also documents an open-source chat widget and starter kit that interacts with the RAG API and can be embedded or floated as a widget.

You can:

  1. Use the “Widget – Embed on Site” reference to see how the starter-kit widget is embedded. 
  2. Adapt the Vue portions of the Chat Widget – Python + Vue reference, which demonstrates a Vue-based UI talking to CustomGPT.ai. 

This route is best if you need a fully custom Vue UI rather than the default hosted widget.

Handling routing, lifecycle & chatbot cleanup in a Vue SPA

In a Vue SPA, the URL changes via Vue Router, but the page usually doesn’t fully reload. That means:

  • If you put the chatbot in index.html or your root layout (App.vue), it will persist across route changes.
  • If you mount it per-page, you risk re-initializing the widget on every navigation.

Recommended pattern:

  • Render the chatbot component in a root layout (e.g., AppShell.vue or App.vue) so it mounts once.
  • Use onMounted to load any scripts, and guard against duplicate insertion. 
  • If you only want the widget on specific routes, conditionally show/hide it based on $route.name instead of destroying and recreating the script.

If you truly need to unmount it (for secure/limited areas), call any cleanup APIs exposed by the provider in onBeforeUnmount/onUnmounted. 

For CustomGPT.ai, private agent deployment controls who can access an embedded agent even when it’s present in the page. 

Example — Vue 3 SPA with a support chatbot widget

Here’s a minimal Vue 3 + Vue Router setup that loads a third-party or CustomGPT.ai widget once, at the root of the app.

main.js:

import { createApp } from ‘vue’
import { createRouter, createWebHistory } from ‘vue-router’
import App from ‘./App.vue’
import HomeView from ‘./views/HomeView.vue’
import DocsView from ‘./views/DocsView.vue’

const routes = [
{ path: ‘/’, name: ‘home’, component: HomeView },
{ path: ‘/docs’, name: ‘docs’, component: DocsView }
]

const router = createRouter({
history: createWebHistory(),
routes
})

createApp(App).use(router).mount(‘#app’)

App.vue (root layout):

<template>
<div class=“app-shell”>
<header><h1>My Vue App</h1></header>

<RouterView />

<!– Global chatbot widget –>
<ChatWidget />
</div>
</template>

<script setup>
import ChatWidget from ‘./components/ChatWidget.vue’
</script>

ChatWidget.vue implementing the script-snippet pattern:

<script setup>
import { onMounted } from ‘vue’

const SCRIPT_SRC = ‘https://app.customgpt.ai/embed.js’
const AGENT_ID = ‘YOUR_AGENT_ID’

onMounted(() => {
if (document.querySelector(`script[src=”${SCRIPT_SRC}”]`)) return

const s = document.createElement(‘script’)
s.src = SCRIPT_SRC
s.async = true
s.dataset.agentId = AGENT_ID
document.body.appendChild(s)
})
</script>

<template>
<!– Widget injects itself; nothing to render here –>
<div aria-hidden=“true”></div>
</template>

This pattern cleanly keeps router logic separate from chatbot initialization, while ensuring the widget loads exactly once and stays active across navigation—whether it’s a CustomGPT.ai embed or another vendor. 

Conclusion

In the end, the real choice isn’t whether to add a chatbot to your Vue app, but whether you want to own a fragile script hack or a scalable support channel.

Customgpt.ai resolves that tradeoff with production-ready embed options, from drop-in widgets to Vue-based chat UIs powered directly by your docs and website.

If you’re ready to turn your frontend into a smart support layer, embed a CustomGPT.ai chatbot in your Vue app today.

FAQ’s

How do I embed a CustomGPT.ai chatbot in a Vue app?

You can embed a CustomGPT.ai chatbot in Vue by creating an agent in customgpt.ai, then copying its script or iframe embed code from the Deploy/Embed settings into your Vue app. Add the snippet to index.html for a global widget or load it once from a root layout component using Vue lifecycle hooks so it persists across SPA routes.

What is the best way to load a chatbot script in a Vue SPA?

The most robust pattern is to wrap the chatbot script in a dedicated Vue component and load it in a mounted or onMounted hook, checking first whether the script tag already exists. Mount that component in a root layout such as App.vue so the widget initializes once and remains active as users navigate between routes.

3x productivity.
Cut costs in half.

Launch a custom AI agent in minutes.

Instantly access all your data.
Automate customer service.
Streamline employee training.
Accelerate research.
Gain customer insights.
Start free trial

Try 100% free. Cancel anytime.