Chat

يربط منتج Chat منصة Kaleidr Control Tower بخريطة تستخدمها بالفعل. وهو تراكب داخل الصفحة يقرأ خريطة المستخدم ويستجيب لها — فيدير التنقل، ويحدد الأماكن، ويرسم المسارات على مثيل الخريطة الخاص بك.

الحقائق الثلاث التي تحدد ما إذا كان سيعمل

الحقيقة	الإجابة
طريقة الدمج	attach — يتم تركيب اللوحة داخل صفحتك وتتحكم في كائن DOM الخاص بالخريطة الذي تمرره إليها. وليست iframe.
النطاق المطلوب	ai — يجب أن يحمل المفتاح إمكانية ai.
الحد الأدنى للخطة	Pro — مفاتيح الخطة Free لا تسمح بنطاق ai.

يجب أن يكون أصل صفحتك ضمن قائمة الأصول المسموح بها للمفتاح قبل أن يتمكن المتصفح من استبدال المفتاح القابل للنشر برمز جلسة. راجع الحصول على مفتاح API لمعرفة خطوة إعداد قائمة السماح.

أين توجد المكونات

• مرجع SDK — Chat attach — السمات، خيارات التركيب، ومصفوفة المقابض (destroy, setTheme).
• الأدلة — دليل لكل مزود خرائط، وكل منها صفحة عمل كاملة:
  • إرفاق AI بـ Mapbox
  • إرفاق AI بـ Google Maps
  • إرفاق AI بـ MapLibre
• عقد الاتصال — SSE wire contract — الأحداث التي يتم بثها من المنصة. يجب على العملاء تجاهل أسماء الأحداث غير المعروفة.

المقتطف الوحيد

أدنى إعداد عملي لـ BYOM (bring-your-own-map) لإرفاق Chat باستخدام MapLibre. قدّم هذه الصفحة من أصل HTTP(S) موجود في قائمة الأصول المسموح بها للمفتاح — file:// لا يرسل Origin وبالتالي يفشل تبادل الجلسة دائمًا.

<link rel="stylesheet"
      href="https://unpkg.com/maplibre-gl@5.17.0/dist/maplibre-gl.css">
<div id="mapHost" style="height:520px;position:relative">
  <div id="map" style="position:absolute;inset:0"></div>
  <div id="chat" style="position:absolute;inset:0;z-index:1;pointer-events:none"></div>
</div>
<script src="https://unpkg.com/maplibre-gl@5.17.0/dist/maplibre-gl.js"></script>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
  const map = new maplibregl.Map({
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [-0.12, 51.5],
    zoom: 11,
  });
  Kaleidr.mount('#chat', {
    product: 'chat',
    publishableKey: 'kld_pk_live_…',
    map,
    contained: true,
  });
</script>

contained: true يثبت اللوحة داخل عنصر التركيب بدلًا من جعلها عائمة على document.body. وبدونه تخرج اللوحة من حاوية الخريطة وتبدو معطلة فوق تخطيط الصفحة.