buildship chat widget

Widget obrolan ai buildship

Widget obrolan AI open-source yang dapat dengan mudah tertanam di situs web atau aplikasi Anda. Widget plug-and-play ini dirancang untuk bekerja dengan mulus dengan alur kerja buildship khusus Anda, memungkinkannya untuk terhubung dengan database Anda, repositori pengetahuan, dan alat lain yang Anda gunakan.

Dengan asisten obrolan AI yang kuat ini, Anda dapat meningkatkan pengalaman pengguna situs web atau aplikasi Anda secara signifikan.

Cobalah demo langsung

Ai.Assistant.intro.mp4

Memulai

Langkah 1. Tambahkan widget ke situs web atau aplikasi Anda

• Pertama, muat widget obrolan di halaman Anda dengan menambahkan cuplikan kode berikut. Kemudian hubungkan widget ke alur kerja buildship Anda dengan mengganti URL API sampel dengan URL API yang digunakan Buildship Anda sesuai instruksi pada Langkah 2. Tambahkan opsi kustomisasi sesuai kebutuhan.

   < script src =" https://unpkg.com/@buildshipapp/chat-widget@^1 " defer > </ script >
  < script >
    window . addEventListener ( "load" , ( ) => {
      window . buildShipChatWidget . config . widgetTitle = "Chatbot" ;
      window . buildShipChatWidget . config . greetingMessage =
        "Hello! How may I help you today?" ;
      window . buildShipChatWidget . config . url =
        "https://<project_id>.buildship.run/chat/...." ;
      <!-- Other optional properties, learn more in the `Config Properties` section below -->
    } ) ;
  </ script >

  Anda juga dapat mengimpornya sebagai modul jika Anda bekerja dengan TypeScript atau ES6 (jenis deklarasi disertakan):

   import "@buildshipapp/chat-widget" ;
  
  window . buildShipChatWidget . config . widgetTitle = "Chatbot" ;
  window . buildShipChatWidget . config . greetingMessage =
    "Hello! How may I help you today?" ;
  window . buildShipChatWidget . config . url =
    "https://<project_id>.buildship.run/chat/...." ;
  // ...

• Kedua, tempatkan tombol dengan atribut data berikut di mana saja di situs web atau aplikasi Anda untuk membuka widget:

   < button data-buildship-chat-widget-button > Beep Boop </ button >

Langkah 2. Menghubungkan widget obrolan ke alur kerja buildship Anda

Widget ini dibangun untuk bekerja dengan buildship-pembangun backend lowcode untuk membuat API, pekerjaan terjadwal secara visual dan cepat dengan antarmuka drag-and-drop.

• Mulailah dengan mengkloning salah satu templat widget obrolan ini yang paling dekat dengan usecase Anda
• Tambahkan ID Asisten Openai Anda dan Kunci API dan kemudian kirimkan alur kerja. Anda akan mendapatkan URL API setelah menggunakan alur kerja Anda.
• Colokkan URL titik akhir alur kerja ini ke widget dengan mengatur properti window.buildShipChatWidget.config.url . Lihat Langkah 3 untuk detail lebih lanjut.
• Anda juga dapat menyesuaikan alur kerja templat ini dengan cara apa pun yang Anda inginkan.

Persyaratan untuk alur kerja pembangunan Anda

1. Widget akan membuat permintaan posting ke URL ini. Badan Permintaan akan menjadi objek yang berisi pesan pengguna dan data lain untuk memanfaatkan alur kerja, seperti itu:

   {
     "message" : " The user's message " ,
     "threadId" : " A unique identifier for the conversation (learn more below) " ,
     "timestamp" : " The timestamp of when the POST request was initiated "
   
     ...Other miscellaneous user data (learn more in the 'Config Properties' section below)
   }

   Anda dapat mempelajari lebih lanjut tentang masing -masing properti di bagian selanjutnya.

2. Widget akan mengharapkan respons dari titik akhir dalam bentuk objek JSON yang berisi respons alur kerja ( message ) dan ID utas ( threadId ), seperti itu:

   {
     "message" : " The bot's response " ,
     "threadId" : " The unique identifier for the conversation (learn more below) "
   }

Respons yang streaming

Dalam hal respons yang diatasi, widget tidak akan mengharapkan objek JSON seperti yang dijelaskan di atas, tetapi sebaliknya akan mengharapkan aliran potongan yang pada akhirnya menambah pesan respons. Widget akan mengumpulkan potongan -potongan ini saat mereka diterima dan menampilkan dan memperbarui pesan secara real time, akhirnya berakhir dengan respons penuh.

Mengatur threadId melalui respons

Secara opsional, ada dua cara untuk mengatur threadId melalui respons.

1. Melalui header respons

   Jika respons menyertakan header dengan x-thread-id kunci dengan ID utas sebagai nilainya, widget akan secara otomatis mengambilnya dan mengaturnya sebagai threadId untuk percakapan (jika belum diatur).

   Catatan: Pastikan untuk mengatur header Access-Control-Expose-Headers dalam tanggapan Anda untuk mengekspos header x-thread-id ke widget klien.

2. Melalui aliran itu sendiri

   Jika titik akhir merespons dengan message dan threadId dalam format berikut: message + x1f + threadId , di mana x1f adalah karakter pemisah unit, widget kemudian akan mengekstrak ID utas dari aliran dan mengaturnya sebagai threadId untuk percakapan (jika belum diatur). Misalnya:

    // Simulating what a streamed response might look like where
   // message: "Hello world!"
   // threadId: "tId_123"
   readable . push ( "Hello " ) ;
   readable . push ( "world!" ) ;
   readable . push ( "x1f" + "tId_123" ) ; // No spaces between the end of the message, the unit separator character, and the beginning of the threadId

Langkah 3. Konfigurasi Properti dan Kustomisasi

Widget dapat disesuaikan dengan mengedit properti yang ada di objek window.buildShipChatWidget.config .

Milik	Jenis	Keterangan
window.buildshipchatwidget.config.url	Diperlukan	URL titik akhir tempat widget akan membuat permintaan pos ketika pengguna mengirim pesan. Titik akhir harus mengharapkan objek JSON di badan permintaan dan harus merespons dengan objek JSON yang berisi respons bot dan ID utas.
window.buildshipchatwidget.config.threadid	Opsional	Pengidentifikasi unik untuk percakapan. Ini dapat digunakan untuk mempertahankan konteks percakapan di beberapa pesan/sesi. Jika tidak diatur, widget akan mengirim pesan pengguna pertama tanpa ID utas. Jika Anda kemudian merancang alur kerja Anda untuk mengembalikan ID utas sebagai bagian dari responsnya (seperti yang dijelaskan dalam permintaan dan respons), widget akan secara otomatis menggunakannya untuk sisa percakapan sampai skrip tetap dimuat - misalnya, ID utas akan dibuang jika halaman disegarkan. Catatan: ID utas yang dikembalikan dalam respons tidak akan digunakan jika properti threadId sudah ditetapkan.
window.buildshipchatwidget.config.user	Opsional	Objek yang berisi data pengguna. Ini dapat digunakan untuk mengirim nama pengguna, email, atau data lain yang mungkin dibutuhkan alur kerja. Contoh: window.buildShipChatWidget.config.user = { name: "Some User", email: "[email protected]", // ...Other user data};
window.buildshipchatwidget.config.widgettitle	Opsional	Judul widget. Ini akan ditampilkan di bagian atas widget. Default ke Chatbot .
window.buildshipchatwidget.config.greetingmessage	Opsional	Pesan yang akan ditampilkan (seolah -olah dikirim oleh sistem) ketika widget pertama kali dibuka. Default untuk tidak menampilkan pesan ucapan apa pun.
window.buildshipchatwidget.config.disableerrororert	Opsional	Menonaktifkan peringatan kesalahan jika tidak ada URL yang diatur, jika permintaan gagal, dll. Default ke false .
window.buildshipchatwidget.config.closeonoutsideclick	Opsional	Tutup widget saat pengguna mengklik di luar badan widget. Jika diatur ke false , Anda perlu menggunakan metode close() (disediakan di window.buildShipChatWidget objek) untuk dapat menutup widget secara terprogram (misalnya, dengan menempelkannya ke tombol). Default ke true .
window.buildshipchatwidget.config.openonload	Opsional	Secara otomatis membuka widget ketika halaman selesai memuat (memerlukan tombol dengan atribut data-buildship-chat-widget-button yang akan hadir di halaman). Default ke false .
window.buildshipchatwidget.config.responseisastream	Opsional	Jika diatur ke true , widget akan mengharapkan respons akan dialirkan kembali dari titik akhir. Titik akhir harus merespons dengan serangkaian potongan yang akhirnya menambah tanggapan titik akhir. Widget akan mengumpulkan potongan -potongan ini saat mereka diterima dan menampilkan dan memperbarui pesan, akhirnya berakhir dengan respons penuh. Pelajari lebih lanjut di sini. Default ke false .

Menyesuaikan penampilan widget (opsional)

Gaya widget dapat disesuaikan dengan mengesampingkan variabel CSS dan/atau aturan. (Lihat di sini untuk daftar variabel dan pemilih).

Misalnya, variabel dapat ditimpa seperti itu:

 : root {
  --buildship-chat-widget-primary-color : # 0000ff ;
}

/* Explicitly targeting the light theme is necessary in case the user's system theme is set to 'dark', but the body's `data-theme` attribute is set to `light` (perhaps via a theme toggle on the page). */
[ data-theme *= "light" ] {
  ...;
}

Mode gelap diaktifkan saat itu:

• Tema sistem pengguna diatur ke dark (yaitu @media (prefers-color-scheme: dark) benar) dan itulah yang digunakan halaman, atau

• Tubuh memiliki atribut data-theme yang diatur ke dark , seperti itu:

   < body data-theme =" dark " > </ body >

Gaya mode gelap juga bisa ditimpa:

 @media ( prefers-color-scheme : dark) {
  : root {
    ...;
  }
}

[ data-theme *= "dark" ] {
  ...;
}

Font diwarisi dari tubuh.

Cara kerjanya

Ketika skrip dimuat, ia mencari elemen apa pun dengan atribut data-buildship-chat-widget-button dan membuka widget ketika salah satu elemen tersebut diklik.

Selain objek config , objek window.buildShipChatWidget juga memperlihatkan metode open() , close() dan init() , yang dapat dipanggil secara langsung.

Metode open() menerima event Klik, dan menggunakan event.target untuk menghitung posisi widget menggunakan UI mengambang.

Metode close() menutup widget.

Metode init() menginisialisasi widget, dan dipanggil secara otomatis ketika jendela selesai memuat. Ini dapat disebut secara manual untuk memulai kembali widget jika diperlukan (sangat berguna jika ada spa, di mana widget mungkin perlu diinisialisasi ulang setelah perubahan rute).