innovatiq-chatbot

Reusable chatbot Web Component for all Innovatiq projects. Works with React, Angular, Vue, Plain HTML — any framework!

📦 Installation

npm install innovatiq-chatbot

⚡ Usage

React / Vite Project — index.html

<script type="module">
  import 'innovatiq-chatbot';
</script>
<innovatiq-chatbot
  email-to="[email protected]"
  api-url="https://YOUR_BACKEND_URL">
</innovatiq-chatbot>

Angular Project — src/index.html

Step 1 — Copy chatbot file to assets:

copy "node_modules\innovatiq-chatbot\dist\chatbot.mjs" "src\assets\chatbot.mjs"

Step 2 — Add to src/index.html before </body>:

<script type="module" src="/assets/chatbot.mjs"></script>
<innovatiq-chatbot
  email-to="[email protected]"
  api-url="https://YOUR_BACKEND_URL">
</innovatiq-chatbot>

Step 3 — Add schema in app.module.ts:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

⚙️ Props / Attributes

| Attribute | Default | Description | |-----------|---------|-------------| | email-to | [email protected] | Email address to receive inquiries | | api-url | http://localhost:5000 | Your backend server URL |

🖥️ Backend Setup (Node.js) — Required Once Per Project

Step 1 — Create the route file

Create src/routes/chatbot.js and add the following code:

const express = require("express");
const router = express.Router();
const nodemailer = require("nodemailer");

const transporter = nodemailer.createTransport({
  host: process.env.SMTP_HOST || "smtp.gmail.com",
  port: process.env.SMTP_PORT || 465,
  secure: true,
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASS,
  },
});

router.post("/send-email", async (req, res) => {
  const { emailTo, interest, userType, name, email, phone, company, message, chatHistory, numUsers, numCustomers, enquiryType } = req.body;

  if (!name || !email || !message) {
    return res.status(400).json({ error: "Name, email and message are required." });
  }

  const htmlBody = `
    <div style="font-family: Segoe UI, sans-serif; max-width: 600px; margin: auto; border: 1px solid #eee; border-radius: 12px; overflow: hidden;">
      <div style="background: #E8174B; padding: 20px 24px;">
        <h2 style="color: white; margin: 0;">New Chatbot Inquiry</h2>
        <p style="color: rgba(255,255,255,0.8); margin: 4px 0 0;">Innovatiq Support Chatbot</p>
      </div>
      <div style="padding: 24px;">
        <table style="width: 100%; border-collapse: collapse;">
          <tr><td style="padding: 8px 0; color: #888; width: 120px;">Interest</td><td style="padding: 8px 0; color: #E8174B; font-weight: 600;">${interest || "N/A"}</td></tr>
          ${userType && userType !== "others" ? `<tr><td style="padding: 8px 0; color: #888;">Type</td><td style="padding: 8px 0; color: #E8174B; font-weight: 600;">${userType === "customer" ? "👤 Customer" : "🤝 Partner"}</td></tr>` : ""}
          ${userType === "customer" && numUsers ? `<tr><td style="padding: 8px 0; color: #888;">No. of Users</td><td style="padding: 8px 0;">${numUsers}</td></tr>` : ""}
          ${userType === "partner" && numCustomers ? `<tr><td style="padding: 8px 0; color: #888;">No. of Customers</td><td style="padding: 8px 0;">${numCustomers}</td></tr>` : ""}
          ${enquiryType ? `<tr><td style="padding: 8px 0; color: #888;">What to Discuss</td><td style="padding: 8px 0;">${enquiryType}</td></tr>` : ""}
          <tr><td style="padding: 8px 0; color: #888;">Name</td><td style="padding: 8px 0;">${name}</td></tr>
          <tr><td style="padding: 8px 0; color: #888;">Email</td><td style="padding: 8px 0;">${email}</td></tr>
          <tr><td style="padding: 8px 0; color: #888;">Phone</td><td style="padding: 8px 0;">${phone || "Not provided"}</td></tr>
          <tr><td style="padding: 8px 0; color: #888;">Company</td><td style="padding: 8px 0;">${company || "Not provided"}</td></tr>
          <tr><td style="padding: 8px 0; color: #888; vertical-align: top;">Message</td><td style="padding: 8px 0;">${message}</td></tr>
        </table>
        <hr style="margin: 20px 0;" />
        <h4>Chat History</h4>
        <pre style="background: #f9f9f9; padding: 14px; border-radius: 8px; font-size: 12px; white-space: pre-wrap;">${chatHistory}</pre>
      </div>
      <div style="background: #f9f9f9; padding: 14px 24px; text-align: center; font-size: 12px; color: #aaa;">
        Sent from Innovatiq Website Chatbot · ${new Date().toLocaleString()}
      </div>
    </div>
  `;

  try {
    await transporter.sendMail({
      from: `"Innovatiq Chatbot" <${process.env.SMTP_USER}>`,
      to: emailTo,
      replyTo: email,
      subject: `[Chatbot Inquiry] ${interest} - ${name}`,
      html: htmlBody,
    });
    res.json({ success: true });
  } catch (err) {
    console.error("Chatbot email error:", err);
    res.status(500).json({ error: "Failed to send email." });
  }
});

module.exports = router;

Step 2 — Register the route in server.js

const chatbotRoute = require("./routes/chatbot");
app.use("/api/chatbot", chatbotRoute);

Step 3 — Add SMTP credentials to .env

SMTP_HOST=smtp.gmail.com
SMTP_PORT=465
[email protected]
SMTP_PASS=your_app_password

Step 4 — Install nodemailer (if not already installed)

npm install nodemailer

✅ Features

| Feature | Details | |---------|---------| | Auto popup | Opens automatically after 50 seconds | | Rotating messages | 10 messages, changes every 30 seconds | | Main menu | Products / Services / Careers / Others | | Services | 7 Innovatiq services listed | | Products | SKillEra, LearnPro, LMP, SecurOn | | Customer / Partner flow | After product selection, user chooses Customer or Partner | | Customer form | Includes "How many users?" field | | Partner form | Includes "How many customers?" field | | Others form | Includes "What would you like to discuss?" field | | Lead form | Name, Email, Phone, Company, Message | | Email notification | Chat summary with all details sent to email | | Reset button | Restart chat at any point | | Branding | Innovatiq Red theme + Logo |

🔄 How to Update

npm install innovatiq-chatbot@latest

Made with ❤️ by Innovatiq Dev Team