Utilisation avancée

<script id="companin-widget-script-sales" src="https://widget.companin.tech/widget.js" data-client-id="YOUR_CLIENT_ID" data-assistant-id="YOUR_ASSISTANT_ID" data-config-id="YOUR_CONFIG_ID" data-instance-id="sales-widget"></script><script>  // Ensure the widget has loaded before calling methods  window.addEventListener('load', () => {    const salesWidget = window.CompaninWidgets?.get('sales-widget') || window.CompaninWidget;    if (salesWidget) {      salesWidget.show();      salesWidget.sendMessage && salesWidget.sendMessage('Hello from page');    }  });</script>

<script>window.addEventListener('message', (event) => {  if (event.origin !== 'https://widget.companin.tech') return;  const { type, data } = event.data || {};  switch (type) {    case 'WIDGET_READY':      console.log('Widget is ready');      break;    case 'WIDGET_OPENED':      console.log('Widget was opened');      break;    case 'MESSAGE_SENT':      console.log('User sent message:', data?.message);      break;  }});</script>

/* Target the widget container */.companin-widget-container {  /* Custom styles */}/* Style the collapsed button */.companin-widget-container button {  border-radius: 50% !important;  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;}/* Custom message bubble styles */.companin-widget-container .message-bubble {  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%) !important;}/* Hide the default close button */.companin-widget-container .close-button {  display: none !important;}

:root {  /* Override widget theme variables */  --companin-primary: #ff6b6b;  --companin-secondary: #4ecdc4;  --companin-background: #2d3748;  --companin-text: #e2e8f0;  --companin-border-radius: 12px;}/* Dark theme variant */@media (prefers-color-scheme: dark) {  :root {    --companin-background: #1a202c;    --companin-text: #f7fafc;  }}

Enregistrez les interactions du widget comme des événements personnalisés dans Google Analytics. Cela s'intègre parfaitement à votre configuration d'analytique existante :

// Track widget eventswindow.addEventListener('message', (event) => {  if (event.origin !== 'https://widget.companin.tech') return;  const { type, data } = event.data;  switch (type) {    case 'WIDGET_OPENED':      gtag('event', 'widget_opened', {        event_category: 'engagement',        event_label: 'chat_widget'      });      break;    case 'MESSAGE_SENT':      gtag('event', 'message_sent', {        event_category: 'engagement',        event_label: data.messageLength > 50 ? 'long_message' : 'short_message'      });      break;    case 'CONVERSATION_STARTED':      gtag('event', 'conversation_started', {        event_category: 'engagement',        event_label: 'chat_widget'      });      break;  }});

// Custom analytics trackingconst trackWidgetEvent = (eventName, properties = {}) => {  fetch('/api/analytics/track', {    method: 'POST',    headers: { 'Content-Type': 'application/json' },    body: JSON.stringify({      event: eventName,      properties: { widget: 'companin', ...properties }    })  });};window.addEventListener('message', (event) => {  if (event.origin !== 'https://widget.companin.tech') return;  const { type, data } = event.data;  switch (type) {    case 'WIDGET_OPENED':      trackWidgetEvent('widget_opened');      break;    case 'MESSAGE_SENT':      trackWidgetEvent('message_sent', { length: data.message?.length || 0 });      break;  }});

Webhooks d'événements

Configurez des URL de webhook dans votre tableau de bord pour recevoir des requêtes HTTP POST lorsque des événements spécifiques se produisent. Chaque payload de webhook inclut les données de l'événement et des métadonnées :

{  "event": "message_received",  "timestamp": "2024-01-09T10:30:00Z",  "data": {    "session_id": "sess_123456",    "message": {      "id": "msg_789",      "content": "Hello, I need help",      "sender": "user",      "timestamp": "2024-01-09T10:30:00Z"    },    "metadata": {      "user_agent": "Mozilla/5.0...",      "ip_address": "192.168.1.1",      "locale": "en"    }  }}

widget_opened - L'utilisateur a ouvert le widget
widget_closed - L'utilisateur a fermé le widget
conversation_started - Une nouvelle conversation a été démarrée
message_received - L'utilisateur a envoyé un message
message_sent - L'assistant a envoyé un message
flow_triggered - Un flux de conversation a été déclenché
session_ended - La session de conversation a pris fin

# nginx.confadd_header Content-Security-Policy "  default-src 'self';  script-src 'self' https://widget.companin.tech;  style-src 'self' 'unsafe-inline' https://widget.companin.tech;  frame-src https://widget.companin.tech;  connect-src 'self' https://app.companin.tech;" always;

// Validate message contentfunction validateMessage(message) {  if (message.length > 2000) {    return { valid: false, error: 'Message too long' };  }  const dangerousPatterns = [/<script/i, /javascript:/i, /onw+s*=/i];  for (const pattern of dangerousPatterns) {    if (pattern.test(message)) {      return { valid: false, error: 'Invalid content' };    }  }  return { valid: true };}const validation = validateMessage(userInput);if (!validation.valid) {  showError(validation.error);  return;}

// Load widget only when neededfunction loadWidget() {  if (window.CompaninWidget) return; // Already loaded  const script = document.createElement('script');  script.src = 'https://widget.companin.tech/widget.js';  script.setAttribute('data-client-id', 'YOUR_CLIENT_ID');  script.setAttribute('data-assistant-id', 'YOUR_ASSISTANT_ID');  script.setAttribute('data-config-id', 'YOUR_CONFIG_ID');  document.head.appendChild(script);}// Load on user interactiondocument.addEventListener('click', () => {  loadWidget();}, { once: true });// Or load after page loadwindow.addEventListener('load', () => {  setTimeout(loadWidget, 2000);});

← Retour