Chat Widget Integration Guide

Copy

<!-- dataX.ai Chat Widget -->
<script src="https://your-cdn-path.com/chat-widget.js" defer></script>
<script>
  window.ChatWidget.init({
    position:     "right",
    primaryColor: "#0c4af3",
    togglePrompt: "Ask me about this product"
  });
  window.ChatWidget.create();
</script>

Copy

<script src="https://your-cdn-path.com/chat-widget.js" defer></script>

Copy

<script>
  (function () {
    var s = document.createElement("script");
    s.src   = "https://your-cdn-path.com/chat-widget.js";
    s.async = true;
    s.onload = function () {
      window.ChatWidget.init({ primaryColor: "#0c4af3" });
      window.ChatWidget.create();
    };
    document.head.appendChild(s);
  })();
</script>

Copy

window.ChatWidget.init({
  position:     "right",
  primaryColor: "#0c4af3",
  togglePrompt: "Ask me about this product"
});

Copy

window.ChatWidget.create();

Copy

window.ChatWidget.destroy();

Copy

// Step 1: Configure brand settings once on app initialization
window.ChatWidget.init({
  position:     "right",
  primaryColor: "#0c4af3",
  togglePrompt: "Ask about this page"
});

// Step 2: Mount the widget and ingest initial page context
window.ChatWidget.create();

// Step 3: When navigating away from the page/route
window.ChatWidget.destroy();

// Step 4: Re-create the widget on the new route to ingest updated page context
window.ChatWidget.create();

Copy

// components/ChatWidget.tsx
import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ChatWidget() {
  const location = useLocation();

  useEffect(() => {
    // Configure once on initial mount
    window.ChatWidget?.init({
      position: "right",
      primaryColor: "#0c4af3",
      togglePrompt: "Ask about this page"
    });
    window.ChatWidget?.create();

    return () => {
      window.ChatWidget?.destroy();
    };
  }, []);

  // Re-create widget on route changes to capture updated page context
  useEffect(() => {
    window.ChatWidget?.destroy();
    window.ChatWidget?.create();
  }, [location.pathname]);

  return null;
}

Copy

// components/ChatWidget.tsx
"use client";

import { useEffect, useRef } from "react";
import { usePathname } from "next/navigation";

const BUNDLE_URL = "https://your-cdn-path.com/chat-widget.js";

export default function ChatWidget() {
  const pathname = usePathname();
  const isMounted = useRef(false);

  useEffect(() => {
    const script = document.createElement("script");
    script.src = BUNDLE_URL;
    script.async = true;
    script.onload = () => {
      window.ChatWidget.init({
        position: "right",
        primaryColor: "#0c4af3",
        togglePrompt: "Ask about this page"
      });
      window.ChatWidget.create();
      isMounted.current = true;
    };
    document.body.appendChild(script);

    return () => {
      window.ChatWidget?.destroy();
      script.remove();
    };
  }, []);

  useEffect(() => {
    if (!isMounted.current) return;
    window.ChatWidget?.destroy();
    window.ChatWidget?.create();
  }, [pathname]);

  return null;
}

Copy

<!-- components/ChatWidget.vue -->
<script setup>
import { onMounted, onUnmounted, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://your-cdn-path.com/chat-widget.js';
  script.async = true;
  script.onload = () => {
    window.ChatWidget.init({
      position: 'right',
      primaryColor: '#0c4af3',
      togglePrompt: 'Ask about this page'
    });
    window.ChatWidget.create();
  };
  document.head.appendChild(script);
});

// Re-create widget on route changes to capture updated page context
watch(() => route.fullPath, () => {
  window.ChatWidget?.destroy();
  window.ChatWidget?.create();
});

onUnmounted(() => {
  window.ChatWidget?.destroy();
});
</script>

Copy

// src/app/components/chat-widget.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-chat-widget',
  template: ''
})
export class ChatWidgetComponent implements OnInit, OnDestroy {
  private routerSub!: Subscription;

  constructor(private router: Router) {}

  ngOnInit(): void {
    // Initialize configuration & mount initial widget
    window.ChatWidget?.init({
      position: 'right',
      primaryColor: '#0c4af3',
      togglePrompt: 'Ask about this page'
    });
    window.ChatWidget?.create();

    // Re-create widget on NavigationEnd to ingest new page context
    this.routerSub = this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe(() => {
        window.ChatWidget?.destroy();
        window.ChatWidget?.create();
      });
  }

  ngOnDestroy(): void {
    if (this.routerSub) {
      this.routerSub.unsubscribe();
    }
    window.ChatWidget?.destroy();
  }
}

Copy

export {};

declare global {
  interface ChatWidgetConfig {
    position?: "left" | "right";
    primaryColor?: string;
    togglePrompt?: string;
  }

  interface Window {
    ChatWidget: {
      init: (config?: ChatWidgetConfig) => void;
      create: () => void;
      destroy: () => void;
    };
  }
}