Overview

This section will guide you through integrating the Mingleego chatbot into an Angular project. Angular is a popular TypeScript-based web application framework developed by Google. This guide works for Angular 2+ (including Angular 15, 16, 17, and later versions).

Before You Start: Check Your Angular Version and App Type

Angular projects come in two types. It is important to know which type your project uses before following the steps below.

How to Check Your Angular Version

Run this command in your terminal (inside your project folder):

Copy
1

You'll see output like:

Angular CLI: 17.3.0
Angular: 17.3.0

Alternatively, open package.json in your project root and look for @angular/core:

Copy
1
2
3

The first number (17 in 17.3.0) is your major version.

NgModule vs Standalone — How to Tell the Difference

Angular 16 and earlier always used NgModule architecture. Angular 17 introduced Standalone as the new default, but older-style projects may still use NgModule.

App Type	How to identify
NgModule	A file called app.module.ts exists at src/app/app.module.ts
Standalone	No app.module.ts file — your app.component.ts has standalone: true

To check, simply open your project in a file explorer or code editor and look inside the src/app/ folder:

src/app/
├── app.module.ts       ← If this file exists → NgModule app
├── app.component.ts
├── app.component.html
└── ...

If there is no app.module.ts, your project is a Standalone app (Angular 17+ default).

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 Angular 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 Angular Project's Assets Directory:

   • Open your Angular project folder in a file explorer
   • Look for a folder called src at the root level of your project
   • Inside the src folder, look for a folder called assets
   • If you don't see an assets folder, create one — it's a standard Angular directory for static files

3. Copy the Script File:

   • Copy the downloaded script file and paste it directly into the src/assets folder

   • Your file structure should now look like this:

     your-angular-project/
     ├── src/
     │   ├── assets/
     │   │   ├── mingleego-chatbot-script.js  ← Your chatbot script goes here
     │   │   └── (other asset files)
     │   ├── app/
     │   └── index.html
     ├── node_modules/
     ├── angular.json
     └── package.json
     

   Important: Make sure the file is directly inside the src/assets folder. Remember the exact filename — you'll need it in the next step.

Step 2: Include the Script in Your Project

What you're doing: You need to tell your Angular app to load the chatbot script when the app loads. Angular provides two ways to do this.

Method 1: Add Script to index.html (Recommended for Beginners)

1. Find the index.html file in src/index.html and open it with a text editor.

2. Add the script tag inside the <head> section:

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

   Note: Replace mingleego-chatbot-script.js with the actual name of your file. The defer attribute loads the script after the HTML is parsed, which is good for performance.

Method 2: Add Script to angular.json (Alternative)

1. Open angular.json in the root of your project.

2. Find "projects" → your project name → "architect" → "build" → "options" → "scripts" array and add your file:

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

3. After saving, restart the dev server (ng serve) for the changes to take effect.

   Note: Use one method or the other — not both.

Step 3: Add the Chatbot Element to Your App

What you're doing: Now place the chatbot element on your page. Choose the option that fits your needs.

---

Which Option Should You Choose?

Option	Best For
Option A — Via app.component.html	Simple apps, or you want the chatbot on every page
Option B — Via index.html (outside <app-root>)	If the chatbot button is visible but not clickable (z-index issue)
Option C — Via a specific component	You want the chatbot only on certain pages
Option D — TypeScript support	You want TypeScript to recognize the element without errors

---

Option A — All Pages (via app.component.html)

This places the chatbot on every page of your app. It requires adding CUSTOM_ELEMENTS_SCHEMA first.

Sub-step 1: Add CUSTOM_ELEMENTS_SCHEMA

You need to do this once to allow Angular to use the <mingleego-webchat> element in templates.

If your project uses NgModule (has app.module.ts):

Open src/app/app.module.ts and add CUSTOM_ELEMENTS_SCHEMA:

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

If your project uses Standalone (no app.module.ts):

Open src/app/app.component.ts and add CUSTOM_ELEMENTS_SCHEMA:

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

Sub-step 2: Add the element to app.component.html

Open src/app/app.component.html and add <mingleego-webchat></mingleego-webchat> at the end:

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

Your file structure:

src/
└── app/
    ├── app.module.ts         ← Edit this (NgModule only)
    ├── app.component.ts      ← Edit this (Standalone only)
    ├── app.component.html    ← Add <mingleego-webchat> here
    └── ...

---

Option B — Place in index.html Outside <app-root> (Safest)

This approach places the chatbot element completely outside the Angular app. It avoids z-index and stacking context issues, and does not require CUSTOM_ELEMENTS_SCHEMA since the element is not inside an Angular template.

Open src/index.html and add <mingleego-webchat></mingleego-webchat> after <app-root></app-root>:

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

Your file structure:

src/
├── index.html    ← Add <mingleego-webchat> here (after <app-root>)
└── app/
    └── ...       ← No changes needed here

---

Option C — Specific Pages Only (via a Specific Component)

This places the chatbot only on certain pages. It requires adding CUSTOM_ELEMENTS_SCHEMA to the component (or its module) that you want to show the chatbot on.

Example: Show the chatbot only on the Contact page.

Sub-step 1: Add CUSTOM_ELEMENTS_SCHEMA to the component's module or decorator

If your project uses NgModule (has app.module.ts):

Find the module that declares your target component. If the Contact component is declared in contact.module.ts:

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

If your project uses Standalone (no app.module.ts):

Open the component TypeScript file and add CUSTOM_ELEMENTS_SCHEMA:

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

Sub-step 2: Add the element to the component's HTML template

Open the component's HTML file and add <mingleego-webchat></mingleego-webchat>:

Copy
1
2
3
4
5
6
7
8
9

Your file structure:

src/
└── app/
    ├── app.module.ts              ← No changes needed (NgModule — if editing per-module instead)
    └── contact/
        ├── contact.module.ts      ← Edit this (NgModule — add CUSTOM_ELEMENTS_SCHEMA)
        ├── contact.component.ts   ← Edit this (Standalone — add CUSTOM_ELEMENTS_SCHEMA)
        ├── contact.component.html ← Add <mingleego-webchat> here
        └── contact.component.css

---

Option D — TypeScript Type Declarations

Angular already uses TypeScript, but you may see TypeScript errors when referencing the chatbot element in component code (for example, with document.querySelector('mingleego-webchat')). This option silences those errors by declaring the element as a known type.

Create a type declaration file:

Create a new file called custom-elements.d.ts inside a src/types/ folder (create the types folder if it doesn't exist):

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

Make sure TypeScript includes this file. Open tsconfig.app.json (or tsconfig.json) and check that the include array covers src/**/*.d.ts:

Copy
1
2
3
4
5
6

Your file structure:

src/
├── types/
│   └── custom-elements.d.ts  ← Create this file
├── app/
│   └── ...
└── index.html

Step 4: Test the Integration

What you're doing: Start your Angular app and verify the chatbot works correctly.

1. Start Your Development Server:

   Copy
   1
   2
   

   Wait for the compilation to complete — you should see "Compiled successfully" or "Application bundle generation complete".

2. Open Your App in the Browser:

   • Navigate to http://localhost:4200
   • You should see a chatbot widget in the corner of the screen (bottom-right or bottom-left, depending on settings you chose when creating the chatbot in Mingleego)

3. Verify the Chatbot Works:

   • Click the chatbot icon — the chat window should open
   • Send a test message to confirm it responds correctly

4. Common Issues and Solutions:

   Problem: Angular build error — 'mingleego-webchat' is not a known element

   • Cause: Angular's template compiler does not recognize custom HTML elements by default
   • Solution: Add CUSTOM_ELEMENTS_SCHEMA to the module or component that uses <mingleego-webchat>. See Step 3 (Option A or C) for detailed instructions

   Problem: The chatbot button is visible but cannot be clicked

   • Cause: The chatbot widget (z-index: 1000) is being covered by other elements in your Angular app that have a higher z-index or stacking context
   • Solution: Use Option B — place <mingleego-webchat> in index.html outside <app-root>. This removes it from Angular's stacking context entirely and makes it always accessible

   Problem: The chatbot doesn't appear at all

   • Check the browser console (F12 → Console tab) for error messages
   • Make sure the script filename in index.html (or angular.json) exactly matches the actual filename in src/assets/ — it's case-sensitive
   • If you used the angular.json method, restart the dev server after making changes
   • Try a hard refresh: Ctrl+F5 on Windows, Cmd+Shift+R on Mac

   Problem: The chatbot appears but doesn't work

   • Check the browser console for JavaScript errors
   • Make sure you're using the correct script file for your chatbot (each chatbot has its own unique script file)
   • Verify your internet connection (the chatbot connects to Mingleego servers)

   Problem: Angular angular.json build error after adding the script

   • Check that the JSON syntax is valid (no trailing commas, proper quotes)
   • Verify that the file path is correct and the file exists at that location
   • Consider using the index.html method instead, which is simpler

5. Build for Production (Optional):

   Copy
   1
   

   The chatbot script in src/assets/ is automatically included in the build output.

Summary

To integrate the Mingleego chatbot into your Angular project:

1. ✅ Place the chatbot script in src/assets/
2. ✅ Add a <script> tag in src/index.html (or add to scripts in angular.json)
3. ✅ Add CUSTOM_ELEMENTS_SCHEMA to the module or component that uses the element
4. ✅ Add <mingleego-webchat></mingleego-webchat> using the option that fits your needs:

Option	When to use
Option A — app.component.html	Chatbot on every page, simple setup
Option B — index.html outside <app-root>	Chatbot on every page, avoids z-index issues
Option C — specific component HTML	Chatbot on specific pages only
Option D — TypeScript declarations	Silence TypeScript errors in .ts files

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