Adding a Chatbot to a Vue Project

A Detailed Guide for Integrating Mingleego Chatbot into Your Vue.js Application

Overview

This section will guide you through integrating the Mingleego chatbot into a Vue.js project. Vue.js (often called just "Vue") is a popular JavaScript framework for building user interfaces. If you're using Vue 2 or Vue 3, these instructions will work for both.

Note for Complete Beginners: If you don't have a Vue project yet, you'll need to create one first. This guide assumes you already have a Vue project set up. To create a new Vue project, follow one of these official guides:

Using Vite (Recommended for Vue 3): Follow the official Vue.js Quick Start guide which provides step-by-step instructions for creating a Vue project with Vite, including installation, project setup, and running your development server.
Using Vue CLI (For Vue 2 or Vue 3): Follow the official Vue CLI guide which explains how to install Vue CLI globally and create a new project, including all the configuration options and setup steps.

Both guides include detailed instructions on how to compile and run your project, so make sure to complete the project creation process before proceeding with the chatbot integration steps below.

Integration Steps

Step 1: Download and Place the Chatbot Script

What you're doing: You need to get the chatbot script file and put it in the right location in your project.

Download the Script File:
- Go to the Web Chat Bots page in your Mingleego dashboard
- Find your chatbot in the table
- Download the script file (it will have a name like mingleego-chatbot-script.js or similar)
- Save it somewhere you can find it (like your Desktop)
Find Your Vue Project's Public Directory:
- Open your Vue project folder in a file explorer (Windows Explorer, Finder on Mac, etc.)
- Look for a folder called public (it should be at the root level of your project, same level as src, node_modules, etc.)
- If you don't see a public folder, look for a static folder instead (older Vue projects might use this name)
Copy the Script File:
- Copy the downloaded mingleego-chatbot-script.js file
- Paste it directly into the public folder (or static folder if that's what you have)
- Your file structure should now look like this:
```
your-vue-project/
├── public/
│   ├── mingleego-chatbot-script.js  ← Your chatbot script goes here
│   └── index.html
├── src/
├── node_modules/
└── package.json
```
Important: Make sure the file is directly inside the public folder, not in a subfolder. The exact name of your script file might be different (like mingleego-web-chat-bot.js or something similar) - that's fine, just remember the exact filename because you'll need it in the next step.

Step 2: Include the Script in Your HTML

What you're doing: You need to tell your Vue app to load the chatbot script when the page loads. This is done in the main HTML file.

Locate the index.html File:
- In your Vue project, find the index.html file
- It's usually located in the root of your project (for Vue 3 + Vite) or inside the public folder (for Vue CLI)
- Open it with any text editor (VS Code, Notepad++, or even Notepad)
Find the <head> Section:
- When you open index.html, you'll see HTML code
- Look for a line that says <head> (it should be near the top, after <!DOCTYPE html> and <html>)
- The <head> section contains metadata about your page and usually has tags like <title>, <meta>, and possibly other <script> tags
Add the Script Tag:
- Inside the <head> section, add this line:
```
1
```
- Important: Replace mingleego-chatbot-script.js with the actual name of your script file (the one you copied to the public folder)
- The / at the beginning means "start from the root of the public folder"
- The defer attribute tells the browser to load the script after the HTML is parsed (this is good for performance)
What Your index.html Should Look Like:
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
```
Troubleshooting: If your script file has a different name (like mingleego-web-chat-bot.js), make sure the src attribute matches exactly, including capitalization. File names are case-sensitive on some systems.

Step 3: Add the Chatbot Component to Your Vue App

What you're doing: Now you need to actually place the chatbot on your page. There are several approaches depending on your project complexity.

Option A: Simple Vue App — Add to `App.vue` (chatbot on all pages)

This is the standard approach for most simple Vue projects.

Locate Your App.vue File:

Go to your src folder

Find App.vue — it should be directly inside the src folder:

your-vue-project/
├── src/
│   ├── App.vue        ← this file
│   ├── main.js
│   └── components/
└── public/

Understand the Vue Component Structure:

A .vue file has three sections. You only need the <template> section for this step:

<template>   ← HTML that gets displayed on screen (edit this)
<script>     ← JavaScript logic
<style>      ← CSS styling

Add the Chatbot Element:

Open App.vue and add <mingleego-webchat></mingleego-webchat> inside the <template> section, at the end just before </template>:
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
```
Important Notes:

The <mingleego-webchat> element is a custom HTML element (also called a Web Component) that the chatbot script creates

You must use both opening and closing tags: <mingleego-webchat></mingleego-webchat>

The element is self-contained - you don't need to add any attributes or content inside it

The chatbot will automatically position itself at the bottom of the screen. The exact position (left or right corner) is determined by the settings you chose when you created the chatbot in the Mingleego dashboard.

If your Vue app has complex UI elements like sidebars, modal dialogs, toast notifications, or navigation with high z-index values, placing the chatbot inside the Vue component tree can cause it to appear visually but be unclickable — it gets buried under other elements.

The solution is to place <mingleego-webchat> directly in index.html, outside of <div id="app"> where Vue renders:

Why this works: When <mingleego-webchat> is inside <div id="app">, it shares the same stacking context as the rest of your app. Other elements like a sidebar or a modal overlay can cover the chatbot button even if it visually appears in the corner. Placing it outside <div id="app"> puts the chatbot at the same level as the Vue app itself — no conflicts possible.

When to use this approach:

Your app has a sidebar or navigation with z-index higher than 1000
Your app has modal dialogs, toast notifications, or overlays
The chatbot button appears on screen but cannot be clicked
You are building an admin dashboard or a complex SPA

Option C: Chatbot only on specific pages

Use this option when you want the chatbot to appear only on certain pages, not everywhere.

Your Vue pages are usually inside the src/views/ folder (sometimes src/pages/):

your-vue-project/
├── src/
│   ├── views/
│   │   ├── HomePage.vue       ← no chatbot here
│   │   ├── ContactPage.vue    ← we want chatbot here ✅
│   │   └── AboutPage.vue      ← no chatbot here
│   └── App.vue

Vue 3 — Use <Teleport> (recommended)

Vue 3 has a built-in <Teleport> component that renders an element directly into document.body, bypassing any z-index stacking issues. No import needed — it works out of the box.

Open the page file where you want the chatbot (e.g. ContactPage.vue) and add <Teleport> at the end of the <template>:

How <Teleport> works: It tells Vue "render this element at the very top of the page HTML (inside <body>), not inside my component". The chatbot appears when this page is open and is removed automatically when the user navigates away.

Important: Do not add the chatbot to App.vue if you are using this option — otherwise it will appear on all pages.

Vue 2 — Use lifecycle hooks

Vue 2 does not have <Teleport>. Instead, use Vue's mounted and beforeDestroy lifecycle hooks to manually add and remove the chatbot element from the page:

What mounted and beforeDestroy mean:

mounted — runs automatically when the page component is opened
beforeDestroy — runs automatically when the user navigates away from this page
This means you never need to manually show or hide the chatbot — Vue handles it for you

Option D: Using TypeScript (`.vue` files with `<script lang="ts">`)

If your Vue project uses TypeScript, you need to tell TypeScript that <mingleego-webchat> is a valid HTML element — otherwise it will show a red error in your .vue files.

Note: If you used Option B (placing the element in index.html), you can skip Option D entirely — index.html is plain HTML and TypeScript does not check it.

1. Create the types folder (if it doesn't exist)

In your src/ folder, create a subfolder called types:

your-vue-project/
├── src/
│   ├── types/       ← create this folder
│   ├── views/
│   └── App.vue

2. Create the declaration file

Inside src/types/, create a new file called custom-elements.d.ts and paste this content exactly as-is:

src/
└── types/
    └── custom-elements.d.ts    ← create this file

What this does: Tells TypeScript that <mingleego-webchat> is a known HTML element so it stops showing the red underline error. You never need to edit this file again.

3. Use the element normally in any .vue file

After saving the declaration file, you can use <mingleego-webchat> in any .vue file with <script lang="ts"> without errors:

Tip: If TypeScript still shows an error after creating the file, try restarting your code editor (VS Code). Sometimes it needs a restart to pick up new declaration files.

Step 4: Test the Integration

What you're doing: Now you need to start your Vue app and make sure everything works correctly.

Start Your Development Server:
- Open a terminal (Command Prompt on Windows, Terminal on Mac/Linux)
- Navigate to your Vue project folder using cd command:
```
1
```
- Run one of these commands depending on how your project was set up:
  - If using Vite (Vue 3 projects usually use this): npm run dev
  - If using Vue CLI (older Vue 2 projects): npm run serve
  - If you're not sure, try npm run dev first, and if that doesn't work, try npm run serve
Open Your App in the Browser:
- After running the command, you should see a message like "Local: http://localhost:5173" or "App running at http://localhost:8080"
- Copy that URL and paste it into your web browser
- Your Vue app should now be running
Verify the Chatbot Appears:
- Look at your webpage - you should see a chatbot widget, usually in the bottom-right corner of the screen (or bottom-left, depending on the position you chose when creating the chatbot)
- It might be a small chat bubble icon that you can click to open
- The chatbot icon should be visible on your page, as shown in the example below:
- Try clicking on the chatbot icon to open it
- When you click it, the chatbot window should open and display the chat interface, as shown below:
- Try sending a test message to make sure it functions properly and responds correctly
Common Issues and Solutions:

Problem: The chatbot doesn't appear at all
- Solution 1: Check the browser's Developer Console (press F12, then click the "Console" tab) for any error messages
- Solution 2: Make sure the script file name in index.html exactly matches the file name in your public folder (check for typos and capitalization)
- Solution 3: Make sure the script tag is inside the <head> section, not the <body>
- Solution 4: Try hard-refreshing the page (Ctrl+F5 on Windows, Cmd+Shift+R on Mac)
Problem: The chatbot button is visible but cannot be clicked
- Cause: This happens in complex Vue apps where other UI elements (sidebar, modals, overlays) have a higher z-index than the chatbot and cover it even though it looks clickable
- Solution: Move <mingleego-webchat> out of the Vue component tree. Use Option B (place directly in index.html after <div id="app">) or Option C with <Teleport to="body"> — both render the chatbot outside the Vue stacking context
Problem: The chatbot appears but doesn't respond to messages
- Solution 1: Check the browser console for JavaScript errors
- Solution 2: Make sure you're using the correct script file for your chatbot (each chatbot has its own unique script file)
- Solution 3: Verify that your internet connection is working (the chatbot needs to connect to Mingleego servers)
Problem: The chatbot appears in the wrong place or looks broken
- Solution: This is usually a CSS conflict. The chatbot should position itself automatically, but if you have global CSS that affects positioning, you might need to adjust it. Check if you have any CSS rules that might interfere with the chatbot's styling.
Build for Production (Optional):
- When you're ready to deploy your app, run npm run build (or npm run build:prod depending on your setup)
- The chatbot script in the public folder will automatically be included in the build
- Make sure to test the production build as well to ensure everything works correctly

Summary

Choose the right approach based on your project:

Your situation	Recommended approach
Simple Vue app, chatbot on all pages	Option A — add to `App.vue`
Complex app with sidebar / modals / high z-index elements	Option B — place in `index.html` outside `<div id="app">`
Chatbot only on specific pages (Vue 3)	Option C — use `<Teleport to="body">` in the page component
Chatbot only on specific pages (Vue 2)	Option C — use `mounted` / `beforeDestroy` lifecycle hooks
TypeScript project	Add type declaration file + use any option above

To recap, integrating the Mingleego chatbot into your Vue project involves:

✅ Placing the chatbot script file in your public folder
✅ Adding a <script> tag in your index.html file's <head> section
✅ Adding the <mingleego-webchat></mingleego-webchat> element using the approach that fits your project
✅ Testing that everything works correctly

Once these steps are complete, your chatbot should be live and ready to interact with your website visitors!