SDK Widget

SDK-ul Widget Chatim va permite sa incorporati si sa controlati programatic widget-ul de chat Chatim pe site-ul dvs. web.

Instalare

Adaugati urmatorul cod pe site-ul dvs., chiar inainte de eticheta de inchidere </body>:

<script>
  window.chatim = window.chatim || {};
  window.chatim.cmd = window.chatim.cmd || [];
  window.chatim.settings = { projectId: "YOUR_PROJECT_ID" };
</script>
<script src="https://widget.chatim.app/widget.js" async></script>

Inlocuiti YOUR_PROJECT_ID cu ID-ul real al proiectului din panoul de control Chatim.

Optiuni de configurare

Configurati widget-ul setand proprietati pe window.chatim.settings:

window.chatim.settings = {
  projectId: "YOUR_PROJECT_ID",  // Required
  params: {                       // Optional: Custom parameters
    userId: "user-123",
    utm_source: "google",
    utm_campaign: "summer_sale"
  }
};

API JavaScript

Deschiderea Widget-ului

window.chatim.widget.open();

Inchiderea Widget-ului

window.chatim.widget.close();

Setarea configuratiei Widget-ului

window.chatim.widget.setConfig(config);

Actualizeaza configuratia widget-ului dinamic in timpul executiei.

Obtinerea configuratiei Widget-ului

const config = window.chatim.widget.getConfig();

Returneaza obiectul de configuratie curent, sau null daca widget-ul nu este inca initializat.

Setarea parametrilor personalizati

window.chatim.widget.setParams({
  lastPage: "/checkout",
  cartValue: 99.99,
  isPremium: true
});

Actualizeaza parametrii personalizati dupa ce widget-ul a fost initializat. Parametrii sunt imbinati cu valorile existente (nu inlocuiti).

Repornirea Chat-ului

window.chatim.widget.restartChat();

Sterge toate datele si istoricul de chat stocate, inchide widget-ul si reinitializeaza cu o sesiune noua. Util cand un utilizator se deconecteaza sau doriti sa resetati conversatia.

Referinta API

window.chatim.settings

window.chatim.widget

Parametri personalizati

Parametrii personalizati va permit sa trimiteti date suplimentare despre vizitatorii dvs. catre Chatim. Aceste date sunt stocate cu sesiunile de chat si afisate in panoul de Vizitatori al tabloului de bord de administrare.

Cazuri de utilizare

• Identificarea utilizatorului - Transmiteti ID-uri de utilizator, email sau identificatori de cont
• Atribuire marketing - Urmariti parametrii UTM si sursele campaniilor
• Date e-commerce - Trimiteti valoarea cosului, categoriile de produse sau istoricul achizitiilor
• Segmentarea utilizatorilor - Includeti tipul de plan, statusul abonamentului sau nivelul utilizatorului

Setarea parametrilor la initializare

window.chatim.settings = {
  projectId: "YOUR_PROJECT_ID",
  params: {
    userId: "user-123",
    email: "[email protected]",
    utm_source: "google",
    planType: "premium",
    isPremium: true
  }
};

Actualizarea parametrilor in timpul executiei

// Update params when user logs in
window.chatim.widget.setParams({
  userId: user.id,
  email: user.email,
  planType: user.subscription
});

// Track page-specific data
window.chatim.widget.setParams({
  lastPage: window.location.pathname,
  productViewed: "SKU-12345"
});

Tipuri de date suportate

Nesuportat: Obiecte, array-uri, functii, undefined

Reguli de denumire a parametrilor

• Incepeti cu o litera sau underscore
• Doar alfanumerice + underscore
• Maximum 50 caractere
• Nume rezervate: projectId, demo, __proto__, constructor, prototype

Limite

Vizualizarea parametrilor

Parametrii personalizati apar in panoul de control Chatim sub Vizitatori - faceti clic pe un vizitator pentru a vedea sectiunea Parametri personalizati.

Parametri URL automatici

Widget-ul poate captura automat parametrii URL de pe paginile vizitatorilor fara nicio modificare de cod. Configurati acest lucru in Setarile Widget-ului > Parametri URL.

• Captureaza tot - Captureaza fiecare parametru URL valid
• Doar lista alba - Captureaza doar parametrii specificati (implicit: utm_source, utm_medium, utm_campaign, utm_term, utm_content, ref)

Prioritatea imbinarii

1. Parametrii URL (prioritate cea mai scazuta)
2. window.chatim.settings.params (suprascrie parametrii URL)
3. window.chatim.widget.setParams() (prioritate cea mai inalta)

Coada de comenzi

SDK-ul include o coada de comenzi care va permite sa apelati metodele widget-ului inainte ca widget-ul sa fie complet incarcat. Comenzile sunt executate automat odata ce widget-ul este gata.

Format functie (Recomandat)

window.chatim.cmd.push(function() {
  window.chatim.widget.close();
});

window.chatim.cmd.push(() => {
  window.chatim.widget.open();
  console.log('Widget opened!');
});

Puneti comenzi in coada inainte de incarcarea Widget-ului

<script>
  window.chatim = window.chatim || {};
  window.chatim.cmd = window.chatim.cmd || [];
  window.chatim.settings = { projectId: "YOUR_PROJECT_ID" };

  // Queue a function to run when widget is ready
  window.chatim.cmd.push(() => {
    console.log('Widget is ready!');
    window.chatim.widget.close();
  });
</script>
<script src="https://widget.chatim.app/widget.js" async></script>

Cazuri de utilizare comune

Deschideti Widget-ul la clic pe buton

<button onclick="window.chatim.widget.open()">
  Chat with us
</button>

Deschideti Widget-ul la derulare in jos

window.addEventListener('scroll', function() {
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    window.chatim.widget.open();
  }
});

Restartati Chat-ul la deconectare

function onUserLogout() {
  window.chatim.widget.restartChat();
}

Deschideti Widget-ul dupa o intarziere

setTimeout(function() {
  window.chatim.widget.open();
}, 5000);

Exemple de integrare SPA

React

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    window.chatim = window.chatim || {};
    window.chatim.cmd = window.chatim.cmd || [];
    window.chatim.settings = {
      projectId: 'YOUR_PROJECT_ID',
      params: { userId: getCurrentUserId() }
    };

    const script = document.createElement('script');
    script.src = 'https://widget.chatim.app/widget.js';
    script.async = true;
    document.body.appendChild(script);

    return () => document.body.removeChild(script);
  }, []);

  return <button onClick={() => window.chatim.widget.open()}>Open Chat</button>;
}

Next.js

'use client';

import { useEffect } from 'react';
import Script from 'next/script';

export default function ChatWidget() {
  useEffect(() => {
    window.chatim = window.chatim || {};
    window.chatim.cmd = window.chatim.cmd || [];
    window.chatim.settings = { projectId: 'YOUR_PROJECT_ID' };
  }, []);

  return (
    <Script
      src="https://widget.chatim.app/widget.js"
      strategy="lazyOnload"
    />
  );
}

Vue.js

export default {
  mounted() {
    window.chatim = window.chatim || {};
    window.chatim.cmd = window.chatim.cmd || [];
    window.chatim.settings = { projectId: 'YOUR_PROJECT_ID' };

    const script = document.createElement('script');
    script.src = 'https://widget.chatim.app/widget.js';
    script.async = true;
    document.body.appendChild(script);
  },
  methods: {
    openChat() {
      window.chatim.widget.open();
    }
  }
}

Exemplu de integrare e-commerce

// On page load
window.chatim.settings = {
  projectId: "YOUR_PROJECT_ID",
  params: {
    userId: getUserId(),
    userType: isLoggedIn() ? "registered" : "guest",
    utm_source: getUrlParam("utm_source")
  }
};

// On product view
function trackProductView(product) {
  window.chatim.widget.setParams({
    lastProductViewed: product.name,
    lastProductPrice: product.price
  });
}

// On add to cart
function trackAddToCart(cart) {
  window.chatim.widget.setParams({
    cartValue: cart.total,
    cartItems: cart.items.length
  });
}

Suport mostenit

Pentru compatibilitate cu versiuni anterioare, aceste API-uri mosenite sunt inca suportate:

// Legacy settings (still works)
window.chatimSettings = { projectId: "YOUR_PROJECT_ID" };

// Legacy widget methods (still works)
window.chatimWidget.open();
window.chatimWidget.close();

Recomandam folosirea noului namespace window.chatim pentru toate implementarile noi.

Depanare

Widget-ul nu apare

1. Verificati ca projectId este corect
2. Verificati consola browserului pentru erori
3. Asigurati-va ca scriptul se incarca (verificati fila Retea)
4. Verificati ca niciun blocant de reclame nu interfereaza

Comenzile nu se executa

1. Asigurati-va ca window.chatim si window.chatim.cmd sunt initializate inainte de apelarea metodelor
2. Verificati ca URL-ul scriptului widget-ului este corect
3. Verificati ca scriptul s-a incarcat cu succes

getConfig returneaza Null

getConfig() returneaza null inainte ca widget-ul sa fie complet initializat. Folositi o abordare de interogare:

const checkWidget = setInterval(() => {
  const config = window.chatim.widget.getConfig();
  if (config) {
    clearInterval(checkWidget);
    console.log('Widget config:', config);
  }
}, 100);

Aveti nevoie de ajutor?

Daca aveti nevoie de ajutor cu integrarea SDK, contactati [email protected].