Embed Chat ke Website

Pasang agent Qlar Anda di website Anda sendiri, agar pengunjung bisa mengobrol dengannya tanpa meninggalkan halaman. Chat bisa berada di dalam halaman Anda (inline) atau terbuka dari tombol yang menempel di sudut jendela (floating). Keduanya berjalan di halaman HTML biasa maupun aplikasi React, tanpa build step dan tanpa perubahan di backend.

Cara kerjanya

Chat ini adalah Web Component standar bernama <qlar-component>. Anda memuat satu script dari CDN Qlar, lalu menempatkan elemennya di tempat chat harus muncul. Atribut HTML pada elemen tersebut mengatur tampilan dan perilakunya.

<script type="module" crossorigin src="https://app-container.qlar.ai/qlar-component.mjs"></script>

Saat elemen dirender, ia terhubung ke agent Anda dan menjalankan seluruh UI percakapan.

Sudah memakai <pusaka-container>? Itu nama lama elemen ini. Script masih mendaftarkannya, jadi halaman yang sudah ada tetap berfungsi. Pakai <qlar-component> untuk embed baru.

Sebelum memulai

• Anda butuh akun Qlar dengan agent yang sudah di-publish. Situs live Anda selalu terhubung ke agent yang sudah di-publish. Jika belum pernah mem-publish, lihat Preview dan Publish Perubahan.
• Agent Anda sebaiknya sudah menjawab dengan baik di Preview: identitas yang jelas, knowledge yang tepat, dan welcome message.
• Anda harus bisa menambahkan tag <script> ke halaman Anda.
• Setelan kalimat pembuka (lihat Opening lines from websites) baru sampai ke situs live setelah Anda menyimpannya dan mem-publish agent.

Buka halaman Embed

Di Qlar CMS, arahkan pointer ke sidebar ikon di tepi kiri untuk membukanya (di layar sempit, klik tombol menu (☰) di kiri atas), lalu buka Channels → Embed. Semua yang ada di halaman ini berlaku untuk agent yang sedang aktif.

Halaman ini punya tiga blok, dari atas ke bawah:

Tautan lama seperti /widget?tab=introduction masih berfungsi. Tautan itu menggulir ke blok yang sesuai.

Susun di builder

Klik Open builder pada kartu Build your embed. Builder terbuka di tab browser tersendiri, tanpa CMS di sekelilingnya, karena yang Anda lihat di sana adalah contoh website yang memuat chat Anda. Hanya dengan cara ini Anda bisa melihat mode floating seperti yang dilihat pengunjung: menempel di sudut halaman sungguhan.

Di layar lebar, setelan ada di kiri dan contoh halaman di kanan. Di ponsel atau jendela sempit, halaman tetap tampil, sedangkan setelan dan kode terbuka di sheet dari bar navigasi bawah. Sheet itu bisa ditarik antara setengah dan penuh tinggi layar.

Mulai dari preset

Tab Layout dibuka dengan strip preset. Pilih Change untuk melihat tiga titik awal:

Preset hanya menyetel hal yang menjadi urusannya dan mengembalikan field lain ke default. Begitu Anda mengubah satu field, preset menampilkan Modified. Setelah Anda menerapkan preset atau memakai Reset settings, tombol Undo tetap tampil selama beberapa detik.

Tab setelan

Titik pada sebuah tab berarti tab itu berisi perubahan. Nyalakan Show attribute names di bagian bawah setelan untuk melihat atribut data-* di samping setiap field. Field yang tidak berpengaruh pada layout pilihan Anda disembunyikan, bukan dibuat abu-abu.

Chat only juga mematikan top bar. Di builder, memilih Chat only mematikan Show the top bar, dan memilih Full app menyalakannya lagi. Di kode Anda sendiri, top bar hanya diatur oleh data-show-top-bar. Lihat Top bar.

Preview

Tekan Start untuk menjalankan setelan Anda sebagai halaman sungguhan dengan chat yang aktif. Setelah Anda mengubah sesuatu, preview menampilkan "Settings changed. Restart to see them." dan Start berubah menjadi Restart.

Bar di atas halaman berisi:

• Draft: preview menjalankan agent draft Anda, yaitu simpanan terakhir Anda, meskipun belum di-publish.
• Anonymous: preview mengobrol sebagai pengunjung yang belum sign-in.
• Pemilih lebar: Desktop, Tablet (768px), dan Phone (390px). Di bawah 480px panel floating memenuhi layar, dan lebar Phone memperlihatkan hal itu.
• Live update (Live di layar sempit): membangun ulang preview sesaat setelah Anda berhenti mengubah setelan. Setiap rebuild memulai chat baru. Dengan introduction prompt, setiap rebuild juga memakan satu panggilan model.

Ambil kodenya

• Show code membuka The element for your page dengan tiga tampilan: Element (tag-nya saja), HTML page, dan React. Hanya setelan yang berbeda dari default yang ikut ditulis, jadi kalau Anda mengubah dua hal, elemennya cukup berisi dua atribut.
• Download memberi Anda HTML page (qlar-embed.html, bisa dibuka di browser apa pun) atau React component (QlarChat.tsx, elemen beserta deklarasi TypeScript-nya dan komentar yang meminta Anda memuat script di index.html).
• More actions berisi Copy settings link, yang menyalin tautan untuk membuka builder dengan setelan yang sama, dan Reset settings, yang mengembalikan semua field ke default.

Preview memakai draft, kode memakai versi publish. Preview menjalankan agent draft Anda, jadi perubahan yang sudah disimpan tapi belum di-publish ikut terlihat di sana. Kode dan kedua file unduhan memakai agent Anda yang sudah di-publish, yaitu agent yang semestinya dipakai situs live Anda.

Atau salin snippet dasar

Copy basic snippet pada kartu Build your embed menyalin script dan chat inline di dalam kotak setinggi 600px, dengan agent ID Anda sudah terisi:

<script type="module" crossorigin src="https://app-container.qlar.ai/qlar-component.mjs"></script>

<div style="height: 600px">
  <qlar-component
    data-agent-id="YOUR_AGENT_ID"
  ></qlar-component>
</div>

Tempelkan ke HTML halaman Anda. Pertahankan <div> pembungkusnya, atau beri tinggi pada elemen induk chat dengan cara lain. Chat inline mengikuti ukuran induknya, dan induk tanpa tinggi berarti chat tanpa tinggi.

Pasang secara manual

1. Muat script

Tambahkan script ke halaman Anda, biasanya di dalam <head>. Script ini mendaftarkan elemen <qlar-component>.

<script type="module" crossorigin src="https://app-container.qlar.ai/qlar-component.mjs"></script>

Muat sekali per halaman. Setelah itu Anda bisa menempatkan elemen <qlar-component> sebanyak yang Anda perlukan.

2. Tempatkan elemennya

Ganti YOUR_AGENT_ID dengan agent ID Anda. Anda bisa menemukannya di Developer guide pada halaman Embed: di snippet Install dan di baris Identity pada Attribute reference. Copy basic snippet juga menyertakannya. Bentuknya seperti UUID, misalnya a1b2c3d4-e5f6-7890-abcd-ef1234567890.

Halaman lengkapnya seperti ini:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>
    <script type="module" crossorigin src="https://app-container.qlar.ai/qlar-component.mjs"></script>
  </head>
  <body>
    <!-- Give the parent a height so the chat has room to render -->
    <div style="width: 400px; height: 600px;">
      <qlar-component
        data-agent-id="YOUR_AGENT_ID"
        data-theme="system"
      ></qlar-component>
    </div>
  </body>
</html>

Buka halaman itu di browser. Chat muncul di dalam <div>.

Pakai di React

Secara bawaan React tidak mengenal custom element, jadi Anda memuat script di index.html dan mendeklarasikan elemennya untuk TypeScript sekali saja.

1. Muat script di index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React App</title>
    <script type="module" crossorigin src="https://app-container.qlar.ai/qlar-component.mjs"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

2. Deklarasikan elemennya

Ubah src/vite-env.d.ts atau buat src/custom-elements.d.ts:

/// <reference types="vite/client" />
import React from "react";

declare module "react" {
  namespace JSX {
    interface IntrinsicElements {
      "qlar-component": React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement>,
        HTMLElement
      > & {
        "data-agent-id"?: string;
        "data-theme"?: string;
        "data-app-mode"?: string;
        "data-enable-autofocus"?: string;
        "data-thread-ttl"?: string;
        "data-mode"?: string;
        "data-position"?: string;
        "data-offset-x"?: string;
        "data-offset-y"?: string;
        "data-chat-width"?: string;
        "data-chat-height"?: string;
        "data-chat-title"?: string;
        "data-show-title"?: string;
        "data-show-agent-logo"?: string;
        "data-intro-message"?: string;
        "data-intro-prompt"?: string;
        "data-intro-raw-prompt"?: string;
        "data-show-examples"?: string;
        "data-wa-handoff"?: string;
        "data-show-top-bar"?: string;
        "data-show-menu"?: string;
        "data-show-new-chat"?: string;
        "data-show-theme-toggle"?: string;
        "data-show-sign-in"?: string;
        "data-light-title-bg"?: string;
        "data-light-title-fg"?: string;
        "data-dark-title-bg"?: string;
        "data-dark-title-fg"?: string;
      };
    }
  }
}

export {};

3. Render elemennya

Embed React paling sederhana adalah mode floating. Elemen membuka dan menutup panelnya sendiri, jadi tidak perlu komponen pembungkus maupun state. Letakkan di mana saja dalam tree Anda:

export default function App() {
  return (
    <>
      {/* Your app content */}

      <qlar-component
        data-agent-id="YOUR_AGENT_ID"
        data-mode="floating"
        data-position="bottom-right"
        data-chat-title="Your Agent Name"
      ></qlar-component>
    </>
  );
}

Untuk chat inline, beri tinggi pada elemen induknya:

export default function Chat() {
  return (
    <div style={{ height: 600 }}>
      <qlar-component data-agent-id="YOUR_AGENT_ID"></qlar-component>
    </div>
  );
}

Mau tombol launcher atau panel buatan sendiri? Letakkan <qlar-component> inline di dalam container milik Anda, lalu tampilkan atau sembunyikan container itu sendiri. Mode floating tidak diperlukan untuk ini.

Layout: inline atau floating

Secara bawaan chat bersifat inline: ia memenuhi elemen tempatnya berada, jadi elemen induk yang menentukan ukurannya. Beri tinggi pada induknya, atau chat tidak punya tinggi.

<div style="height: 600px">
  <qlar-component data-agent-id="YOUR_AGENT_ID"></qlar-component>
</div>

data-mode="floating" mengganti tampilan menjadi tombol launcher yang menempel di sudut jendela. Tombol itu membuka dan menutup panel chat dan tetap terlihat saat pengunjung menggulir halaman. Elemennya tidak memakan ruang di alur halaman, jadi Anda bisa meletakkannya di mana saja dalam <body> tanpa pembungkus.

<qlar-component
  data-agent-id="YOUR_AGENT_ID"
  data-mode="floating"
  data-position="bottom-right"
  data-chat-title="Your Agent Name"
></qlar-component>

Panel floating

• data-position memilih sudut: bottom-right, bottom-left, top-right, atau top-left.
• data-offset-x dan data-offset-y mengatur jarak tombol dari tepi jendela.
• data-chat-width dan data-chat-height mengatur ukuran panel.

<qlar-component
  data-agent-id="YOUR_AGENT_ID"
  data-mode="floating"
  data-position="bottom-right"
  data-offset-x="24px"
  data-offset-y="24px"
  data-chat-width="400px"
  data-chat-height="600px"
  data-chat-title="Your Agent Name"
></qlar-component>

Tips: Di layar yang lebih sempit dari 480px, panel floating memenuhi seluruh layar, berapa pun lebar dan tingginya. Panel langsung berfungsi di ponsel tanpa setelan tambahan.

Tema dan warna

• data-theme menerima system (default, mengikuti perangkat pengunjung), light, atau dark.
• data-show-agent-logo="false" menyembunyikan logo agent di atas sapaan.
• data-chat-title mengatur judul panel floating (default "Chat"). data-show-title="false" menyembunyikan header bar panel (judul, tombol perbesar, dan tutup); tombol launcher tetap terlihat untuk menutup panel, dan panel bergeser agar tidak menutupinya. Di layar yang lebih sempit dari 480px, tempat panel memenuhi layar, header bar tetap tampil agar pengunjung bisa menutup panel.
• data-app-mode menerima full-app atau chat. Saat ini keduanya tampil sama. Atribut ini tidak menyembunyikan top bar. Pakai data-show-top-bar untuk itu.

Header bar panel floating memakai warna tema agent Anda, sekitar 18% lebih gelap, kecuali Anda menyetel warnanya sendiri. Mode terang dan gelap masing-masing punya pasangan warna sendiri, jadi panel bisa serasi dengan situs Anda di kedua mode:

<qlar-component
  data-agent-id="YOUR_AGENT_ID"
  data-mode="floating"
  data-light-title-bg="#5651D4"
  data-light-title-fg="#FFFFFF"
  data-dark-title-bg="#2A2850"
  data-dark-title-fg="#FFFFFF"
></qlar-component>

Top bar

Top bar berisi daftar percakapan (menu), new chat, toggle terang/gelap, dan sign-in. data-show-top-bar="false" menyembunyikan seluruh bar. Hanya dengan cara ini top bar bisa disembunyikan.

Untuk mempertahankan bar tapi menyembunyikan item tertentu, biarkan bar menyala dan matikan item yang tidak Anda inginkan:

<qlar-component
  data-agent-id="YOUR_AGENT_ID"
  data-show-menu="false"
  data-show-theme-toggle="false"
  data-show-sign-in="false"
></qlar-component>

Atribut per item hanya berlaku selama data-show-top-bar bernilai true.

Perilaku

Autofocus. Secara bawaan kotak pesan mendapat fokus saat chat dimuat dan setiap kali agent selesai menjawab. Kalau chat berada di tengah halaman yang panjang, lompatan fokus itu terlihat seperti halaman menggulir sendiri. Set data-enable-autofocus="false" untuk menghentikannya.

Resume window. Di mode floating, pengunjung anonim yang me-reload halaman atau pindah ke halaman lain yang memuat chat akan melanjutkan percakapan yang sama. data-thread-ttl mengatur berapa lama hal ini berlaku, dalam milidetik, dihitung dari pesan terakhir. Defaultnya 21600000 (6 jam). Setelah itu, percakapan baru dimulai.

<!-- Resume for 1 day instead of 6 hours -->
<qlar-component
  data-agent-id="YOUR_AGENT_ID"
  data-mode="floating"
  data-thread-ttl="86400000"
></qlar-component>

• Hanya berlaku di mode floating. Chat inline memulai percakapan baru setiap kali halaman dimuat.
• Hanya berlaku untuk pengunjung anonim.
• Disimpan di browser pengunjung. Tidak ada yang dihapus di server saat waktunya habis.

Tautan masuk dari WhatsApp

Bila channel WhatsApp agent Anda memakai Alihkan ke web (mode jembatan), setiap pesan WhatsApp dijawab dengan tautan masuk sekali pakai, bukan dengan balasan di WhatsApp. Tautan itu boleh mengarah ke halaman di situs Anda sendiri yang memasang chat. Lihat WhatsApp → Alihkan ke web untuk setelan channel-nya.

Bentuk tautannya seperti ini. Qlar menambahkan dua parameter terakhir ke URL tujuan yang Anda isi, dengan tetap mempertahankan query yang sudah ada:

https://www.example.com/help?wa_code=K7PQ2XMA&wa_agent=YOUR_AGENT_ID

Tidak ada yang perlu diubah di halaman Anda:

• Terbaca otomatis. Chat membaca wa_code dari alamat halaman, memasukkan pengunjung sebagai akun WhatsApp-nya, lalu menghapus wa_code dan wa_agent dari address bar. Parameter lain tetap ada.
• Panel floating terbuka sendiri, jadi pengunjung langsung berada di percakapan tanpa perlu mencari tombol peluncur.
• Pesan yang mereka tulis di WhatsApp langsung dikirim sebagai pesan pertama begitu chat siap, sehingga agent langsung menjawabnya.
• Beberapa chat di satu halaman. wa_agent adalah ID agent yang sudah di-publish, sama dengan nilai data-agent-id. Hanya chat milik agent itu yang mengambil kodenya.
• Percakapan tamu tidak ikut terbawa. Chat floating tidak melanjutkan percakapan anonim pengunjung sebelumnya, sehingga percakapan tersebut tidak pernah menempel ke akun WhatsApp-nya.
• Tautan kedaluwarsa atau sudah dipakai menampilkan "This link is no longer valid" beserta cara untuk melanjutkan. Pengunjung cukup mengirim pesan WhatsApp lagi untuk mendapat tautan baru.

Agar sebuah chat tidak ikut, set data-wa-handoff="false". Chat itu mengabaikan kode dan membiarkan alamat halaman apa adanya, misalnya bila halaman Anda sendiri yang menangani wa_code:

<qlar-component data-agent-id="YOUR_AGENT_ID" data-wa-handoff="false"></qlar-component>

Opening lines from websites

Secara bawaan setiap pengunjung melihat Welcome Message agent Anda (disetel di Conversation → Introduction). Situs Anda bisa menggantinya per pengunjung, misalnya untuk menyapa seseorang dengan namanya atau membuka dengan ringkasan pesanan yang sedang ia lihat.

Bisa jadi Anda tidak memerlukan route sama sekali: Welcome Message sendiri bisa menyapa pengunjung yang login dengan namanya, menyapa sesuai waktu, atau berubah menurut kondisi, memakai variabel seperti {{user.first_name}} dan {{time.greeting@id}}. Lihat Variabel dan Kondisi. Teks yang dikirim situs Anda lewat route ditampilkan apa adanya: Qlar tidak mengisi {{ … }} di dalamnya, sehingga situs Anda bebas memakai templating sendiri.

Nyalakan route

Di Channels → Embed, cari kartu Opening lines from websites. Setiap switch membuka satu route:

Saat Anda menyalakan Prompt without system prompt, muncul field Guardrail for this route. Field ini wajib diisi. Tulis untuk apa route ini dan perintahkan agar ia menolak permintaan lain, misalnya:

You turn car-rental order data into one short opening line in Indonesian. Refuse any other request.

Guardrail adalah satu-satunya instruksi yang diterima model di route itu. Tanpanya, route akan menjawab apa pun yang dikirim sebuah situs, jadi guardrail yang kosong membuat route tetap mati.

Chip di samping judul kartu menunjukkan route yang terbuka untuk agent yang tersimpan: Welcome Message only, 1 route open, 2 routes open, dan seterusnya. Chip menambahkan incl. no system prompt saat route ketiga menyala.

Simpan, lalu publish

Klik Save, lalu publish agent dengan Publish. Situs live Anda memakai agent yang sudah di-publish, jadi route yang baru disimpan belum berpengaruh di sana sampai Anda mem-publish.

Hati-hati dengan switch ketiga. Route ini melewati persona agent Anda beserta guardrail-nya: model hanya menerima teks dari situs Anda. Nyalakan hanya untuk situs yang Anda kendalikan. Pakai Custom prompt bila sapaan harus terdengar seperti agent Anda.

Cara route bekerja

• Hanya satu yang menang. Bila halaman mengisi lebih dari satu atribut, teks menang atas prompt, dan prompt menang atas prompt tanpa system prompt.
• Mati berarti diabaikan. Bila switch sebuah route mati, atributnya diabaikan dan pengunjung melihat Welcome Message. Tidak ada error yang muncul.
• Tagihan. Kedua route berbasis prompt memanggil model satu kali per percakapan, dan ditagih sebagai pemakaian AI. Kalimat pembuka yang di-generate juga dibatasi per agent per jam, jadi banjir permintaan tidak bisa membuat tagihan membengkak tanpa batas. Setelah batas itu tercapai, pengunjung melihat Welcome Message sebagai gantinya.
• Privasi. Atribut dikirim ke chat secara privat, bukan lewat URL halaman. Prompt yang berisi data pelanggan tidak tersimpan di riwayat browser pengunjung maupun di access log server.

Kirim dari kode Anda

<qlar-component
  data-agent-id="YOUR_AGENT_ID"
  data-intro-message="Welcome back, Sarah. Your order #4821 is out for delivery."
></qlar-component>

Atribut dibaca satu kali, saat chat dimulai. Memanggil setAttribute pada elemen yang sudah berjalan tidak berpengaruh apa pun dan tidak menampilkan error. Isi nilainya sebelum elemen masuk ke halaman, atau ganti elemennya untuk memulai lagi.

Render bersama halaman. Cara paling sederhana dan aman. Server Anda sudah tahu siapa pengunjungnya, jadi server menuliskan atributnya ke HTML yang dikirim:

<!-- server-rendered, e.g. from a template -->
<qlar-component
  data-agent-id="YOUR_AGENT_ID"
  data-intro-prompt="Greet {{ customer.name }} and mention their open order {{ order.id }}."
></qlar-component>

Bangun elemen setelah data tiba. Bila kalimat pembuka bergantung pada data yang Anda ambil di browser, jangan taruh elemennya di HTML lalu mengisinya belakangan. Buat elemennya setelah data tersedia, isi atributnya, lalu tambahkan ke halaman:

<div id="chat-slot" style="height: 600px"></div>

<script type="module">
  const order = await fetch("/api/orders/latest").then((r) => r.json());

  const chat = document.createElement("qlar-component");
  chat.setAttribute("data-agent-id", "YOUR_AGENT_ID");
  chat.setAttribute(
    "data-intro-prompt",
    `Greet the customer and summarise this order in one sentence: ${JSON.stringify(order)}`
  );

  // Attributes first, page second.
  document.getElementById("chat-slot").appendChild(chat);
</script>

Mulai lagi dengan kalimat pembuka baru. Untuk memulai percakapan baru dengan kalimat pembuka yang berbeda, misalnya saat pengunjung berpindah pesanan, ganti elemennya alih-alih mengubahnya:

function restartChat(slot, introPrompt) {
  slot.replaceChildren();

  const chat = document.createElement("qlar-component");
  chat.setAttribute("data-agent-id", "YOUR_AGENT_ID");
  chat.setAttribute("data-intro-prompt", introPrompt);
  slot.appendChild(chat);
}

Di React, jangan render apa pun sampai data siap, dan beri elemen sebuah key dari data itu. React lalu mengganti elemennya alih-alih memperbaruinya:

function OrderChat({ order }: { order?: Order }) {
  if (!order) return null;

  return (
    <div style={{ height: 600 }}>
      <qlar-component
        key={order.id}
        data-agent-id="YOUR_AGENT_ID"
        data-intro-prompt={`Greet the customer and summarise this order: ${order.summary}`}
      ></qlar-component>
    </div>
  );
}

Uji di builder

Write and test an opening in the builder pada kartu Opening lines from websites membuka builder. Bila ada perubahan yang belum disimpan di kartu itu, Anda akan ditanya dulu, karena builder memakai route yang sudah tersimpan.

Di builder, buka tab Intro, pilih route di What your site sends, tulis kalimat pembukanya (atau pakai Fill in a sample), lalu tekan Start. Preview menjalankan agent draft Anda, jadi route yang baru saja disimpan sudah berfungsi di sana sebelum Anda mem-publish.

Route yang tidak diizinkan agent tampil abu-abu. Nyalakan di Opening lines from websites, simpan, lalu klik Check again di builder. Tombol itu membaca ulang switch tanpa reload, jadi setelan Anda tidak hilang.

Kedua route berbasis prompt memanggil model setiap kali preview dimulai, dan itu ditagihkan ke agent.

Referensi atribut

Hanya data-agent-id yang wajib. Bila sebuah atribut tidak diisi, nilai default-nya yang berlaku.

Identity

Layout

Appearance

Header colors

Top bar

Opening line

Behavior

Periksa hasilnya

1. Buka halaman Anda di browser (jendela private lebih baik, agar Anda melihat apa yang dilihat pengunjung baru).
2. Pastikan chat muncul di tempat yang Anda pasang, atau tombol floating tampil di pojok yang Anda pilih.
3. Kirim pertanyaan yang sudah Anda uji di Preview. Jawabannya harus sama dengan jawaban agent yang sudah di-publish saat Anda mengklik View di CMS.
4. Jika Anda mengubah setelan sejak publish terakhir dan situs belum menampilkannya, publish agent lalu muat ulang halaman.

Jika ada yang tidak sesuai, lihat Troubleshooting di bawah.

Troubleshooting

Chat tidak muncul, atau hanya berupa garis tipis. Chat inline mengikuti tinggi induknya. Beri tinggi pada induknya (misalnya height: 600px), atau pakai data-mode="floating". Pastikan juga script dimuat sekali dan data-agent-id berisi agent ID Anda.

Kalimat pembuka diabaikan dan Welcome Message yang tampil. Periksa dengan urutan ini:

1. Switch route-nya menyala di Opening lines from websites, dan Anda sudah mengklik Save.
2. Anda sudah mem-publish agent setelah menyimpan. Situs live memakai agent yang sudah di-publish.
3. Untuk Prompt without system prompt, guardrail sudah diisi.
4. Atribut sudah ada di elemen sebelum elemen masuk ke halaman. Mengisinya belakangan tidak berpengaruh.
5. Hanya satu atribut yang diisi, atau yang Anda harapkan memang yang menang (teks, lalu prompt, lalu prompt tanpa system prompt).

Top bar tetap tampil dengan data-app-mode="chat". Itu memang begitu. App mode tidak menyembunyikan top bar. Tambahkan data-show-top-bar="false".

Percakapan tidak berlanjut setelah reload. Resume hanya berlaku untuk pengunjung anonim di mode floating, dalam resume window (data-thread-ttl, default 6 jam, dihitung dari pesan terakhir). Chat inline selalu mulai dari awal.

Halaman melompat ke chat saat dimuat. Autofocus memindahkan fokus ke kotak pesan. Set data-enable-autofocus="false".

Tautan WhatsApp membuka halaman, tapi pengunjung tidak masuk. Pastikan wa_agent di tautan sama dengan data-agent-id chat (ID agent yang sudah di-publish), dan chat tidak memakai data-wa-handoff="false". Tautan yang sudah dipakai, atau lebih dari 30 menit, menampilkan "This link is no longer valid".

Preview di builder berfungsi, tapi situs live tidak. Preview menjalankan agent draft Anda, sedangkan situs Anda memakai agent yang sudah di-publish. Publish agent untuk menerapkan perubahan yang sudah disimpan.

Langkah berikutnya

• Berikutnya dalam alur belajar: Menghubungkan ke Instagram, untuk menjawab direct message Instagram juga.
• Belum di WhatsApp? Menghubungkan ke WhatsApp agar orang bisa menghubungi agent Anda dari ponsel.
• Uji agent Anda: pakai Test Automation (Simulation di Qlar CMS) untuk memeriksa jawaban agent dalam jumlah banyak.
• Atur Welcome Message: lihat Introduction.