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.

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.

1. 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)

   

2. 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)

3. 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.

1. 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)

2. 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

3. Add the Script Tag:

   • Inside the <head> section, add this line:

     Copy
     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)

4. What Your index.html Should Look Like:

   Copy
   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.

1. 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/
     

2. 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
   

3. Add the Chatbot Element:

   Open App.vue and add <mingleego-webchat></mingleego-webchat> inside the <template> section, at the end just before </template>:

   Copy
   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.

---

Option B: Complex Vue App — Add to index.html outside Vue root (recommended for apps with sidebars, modals, or navigation)

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:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---

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>:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13

---

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:

Copy
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
26

---

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.

---

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:

Copy
1
2
3
4
5

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

---

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:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Step 4: Test the Integration

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

1. Start Your Development Server:

   • Open a terminal (Command Prompt on Windows, Terminal on Mac/Linux)
   • Navigate to your Vue project folder using cd command:

     Copy
     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

2. 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

3. 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

4. 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.

5. 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:

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

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