Panduan penginstalan Web SDK

Halaman ini menjelaskan cara menginstal dan menggunakan SDK web Contact Center AI Platform (CCAI Platform). Untuk membantu Anda memulai, Google merekomendasikan untuk mendownload dan menggunakan file contoh Web SDK versi 2 kami.

Sebelum memulai

  1. Sertakan pemuat SDK web Platform CCAI di klien web Anda.

    <script src="https://websdk.ujet.co/v2/loader.js"></script>

  2. Inisialisasi SDK web CCAI Platform dengan COMPANY_KEY Anda.

  3. Lakukan inisialisasi autentikasi dengan COMPANY_SECRET menggunakan kode backend Anda.

Alur kerja penginstalan

Alur kerja penginstalan

Mulai

Bagian berikut memberikan informasi untuk mulai menggunakan SDK web Platform CCAI.

Menginisialisasi SDK web

Anda dapat menginisialisasi SDK web menggunakan kunci perusahaan Anda.

Mendapatkan kunci perusahaan Anda

Untuk mendapatkan kunci perusahaan, ikuti langkah-langkah berikut:

  1. Login ke portal CCAI Platform menggunakan kredensial administrator.

  2. Klik Menu, lalu klik Setelan > Setelan developer.

  3. Buka panel Company key and secret code, lalu simpan kode di kolom Company key.

Kemudian, Anda dapat melakukan inisialisasi web SDK dengan metode UJET(config) dan peristiwa ujet.on('created', function). Berikan host instance CCAI Platform Anda, misalnya myccaip.uc1.ccaiplatform.com.

// INITIALIZE WEB SDK
var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "https://myccaip.uc1.ccaiplatform.com",
});

ujet.on('created', function () {
  ujet.authenticate(getAuthToken);
});

Atau, Anda dapat menggunakan opsi autentikasi tanpa peristiwa yang dibuat:

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  authenticate: getAuthToken,
  host: "https://myccaip.uc1.ccaiplatform.com",
});

dengan getAuthToken() adalah fungsi yang memanggil mekanisme penandatanganan JWT dari backend Anda:

function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  return fetch('/auth/token')
    .then(function(resp) {
      // { token: '....' }
      return resp.json();
    });
}

dengan fetch() memanggil mekanisme penandatanganan JWT dari backend Anda. Untuk informasi selengkapnya, lihat Mozilla Fetch API.

Mengonfigurasi SDK web untuk penjelajahan bersama

Penjelajahan bersama adalah fitur opsional yang memungkinkan agen melihat layar pengguna akhir dan, secara opsional, mengambil alih kontrolnya. Untuk menggunakan penjelajahan bersama, Anda harus memberikan domain penjelajahan bersama dan kunci lisensi instance CCAI Platform Anda selama inisialisasi SDK.

Untuk mengonfigurasi SDK web untuk penjelajahan bersama, ikuti langkah-langkah berikut:

  1. Untuk mendapatkan domain penjelajahan bersama dan kunci lisensi instance CCAI Platform, lakukan hal berikut:

    1. Login ke portal CCAI Platform menggunakan kredensial administrator.

    2. Klik Menu, lalu klik Setelan > Setelan Developer.

    3. Buka panel Penjelajahan bersama dan klik tombol ke posisi aktif.

    4. Simpan nilai di kolom Domain Penjelajahan Bersama dan Kunci Lisensi.

  2. Untuk memberikan domain penjelajahan bersama dan kunci lisensi selama inisialisasi SDK, sertakan kode berikut saat Anda Menginisialisasi SDK web:

    var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
  },
  // other options
})

    Ganti kode berikut:

    • LICENSE_KEY: kunci lisensi yang Anda simpan pada langkah sebelumnya

    • CO-BROWSE_DOMAIN: domain penjelajahan bersama yang Anda simpan pada langkah sebelumnya

Untuk mengetahui informasi selengkapnya, lihat Menyiapkan penjelajahan bersama.

Lakukan inisialisasi autentikasi dengan rahasia perusahaan Anda

Fungsi getAuthToken() harus memanggil API Anda dan mengenkode payload dengan COMPANY_SECRET Anda.

Berikut adalah contoh penandatanganan JWT menggunakan ExpressJS:

const express = require('express')
const jwt = require('jsonwebtoken')

const port = process.env.PORT || 3000
const secret = process.env.COMPANY_SECRET || 'secret'

const app = express()

app.use(express.json())

app.post('/auth/token', function (req, res) {
  const payload = {}
  payload['iss'] = 'YOUR_COMPANY_NAME'
  const iat = parseInt(Date.now() / 1000, 10)
  payload['iat'] = iat
  payload['exp'] = iat + 600
  const token = jwt.sign(payload, secret, { algorithm: 'HS256' })
  res.json({ token })
})

app.listen(port, function () {
  console.log(`Listing at http://localhost:${port}`)
})

Anda dapat menggunakan layanan backend apa pun.

Kebijakan keamanan konten

Jika server produksi Anda memiliki kebijakan keamanan konten, tambahkan https://websdk.ujet.co/ ke script-src dan frame-src Anda.

Dukungan untuk Internet Explorer 11

Untuk mendukung Internet Explorer, babel-polyfill digunakan dalam kode kami. Jika situs Anda juga menggunakan babel-polyfill, jangan impor ke web SDK karena menggunakan library yang sama secara global dan di web SDK dapat menyebabkan pengecualian. Sebelum mengimpor paket, sebaiknya tambahkan kode untuk memeriksa dan membantu mencegah hal ini.

Melacak pengguna

Contoh sebelumnya tidak akan melacak pengguna. Jika Anda ingin mengidentifikasi pengguna berulang di CRM dan menggunakan respons standar dengan informasi pengguna, Anda harus menambahkan ID ke pengguna.

Untuk melakukannya, Anda harus menambahkan ID di tempat berikut:

  1. Teruskan ke backend di getAuthToken()

    function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  return fetch('/auth/token', {
    headers: {
      'Content-Type': 'application/json'
    },
    method: "POST",
    body: JSON.stringify({
      payload: {
        identifier: 'c727f2851b64b29761da170d0adee67a9a89c2d9960c8eee0ae53737413cfa4e',
        name: 'Test user',
        email: 'test@user.com',
        phone: '1800UJETSDK'
      }
    })
  }).then(function(resp) {
    return resp.json();
  });
}

  2. Tambahkan ke payload saat mengenkode JWT

    const express = require('express')
const jwt = require('jsonwebtoken')

const port = process.env.PORT || 3000
const secret = process.env.COMPANY_SECRET || 'secret'

const app = express()

app.use(express.json())

app.post('/auth/token', function (req, res) {
  const payload = req.body.payload
  payload['iss'] = 'YOUR_COMPANY_NAME'
  const iat = parseInt(Date.now() / 1000, 10)
  payload['iat'] = iat
  payload['exp'] = iat + 600
  const token = jwt.sign(payload, secret, { algorithm: 'HS256' })
  res.json({ token })
})

app.listen(port, function () {
  console.log(`Listing at http://localhost:${port}`)
})

  3. Menambahkan opsi ekstra di authentication()

    new UJET({
  // ...
  authenticate: function() {
    return getAuthToken().then({ token } => {
      return {
        token: token,
        user: {
          identifier: YOUR_UNIQUE_USER_ID,
          name: 'Test user' //optional,
          email: 'test@user.com', //optional,
          phone: '000000000' //optional
        }
      };
    });
  },
})

Transfer chatbot eksternal

Saat mentransfer percakapan dari agen virtual ke agen, Anda dapat mengganti pesan pembuka dan meneruskan transkrip ke agen dengan mengisi kembali kolom external_chat_transfer ke data kustom. greeting_override mendukung pemformatan Markdown.

{
  "external_chat_transfer": {
    "greeting_override": "Please hold while we connect you with a human agent.",
    "agent": {
      "name": "Agent Name",
      "avatar": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
    },
    "transcript": [
      {
        "sender": "agent",
        "timestamp": "2021-03-15 12:00:00Z",
        "content": [
          {
            "type": "text",
            "text": "Hello! How can I help you today?"
          },
          {
            "type": "buttons",
            "buttons": [
              {
                "label": "Create New Order",
                "selected": false
              },
              {
                "label": "Check Order Status",
                "selected": true
              },
              {
                "label": "Check Account Balance",
                "selected": false
              }
            ]
          }
        ]
      },
      {
        "sender": "end_user",
        "timestamp": "2021-03-15 12:00:15Z",
        "content": [
          {
            "type": "txt",
            "text": "Ceck Order Status"
          }
        ]
      },
      {
        "sender": "aget",
        "timestamp": "021-03-15 12:00:16Z",
        "content": [
          {
            "type": "txt",
            "text": "Ican help you with that, what's your order number?"
          }
        ]
      },
      {
        "sender": "enduser",
        "timestamp": "021-03-15 12:00:20Z",
        "content": [
          {
            "type": "mdia",
            "media": {
              "type": image",
              "url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
            }
          }
        ]
      }
    ]
  }
}

Data kustom yang tidak ditandatangani Chat

Saat percakapan dimulai, Anda dapat meneruskan data kustom dengan objek percakapan. Data kustom dapat berupa sistem operasi, nomor versi, lokasi, atau data lain yang mungkin relevan dengan percakapan. Data ini tidak dienkripsi dan oleh karena itu tidak boleh berisi Informasi Identitas Pribadi (PII).

Anda juga dapat meneruskan data kustom ini ke agen virtual. Untuk mengetahui informasi selengkapnya, lihat Agen virtual.

var ujet = new UJET({
  // other parameters
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
    }
  },
});

Format data kustom mirip dengan JSON. Setiap kolom data berisi kunci, label, dan nilai. Berikut ini contohnya:

{
  "k1": {
    "label": "Version",
    "value": "1.2.3"
  },
  "k2": {
    "label": "Dashboard",
    "value": "http://example.com"
  }
}

Dalam contoh ini, k1 dan k2 adalah kunci. label adalah label di halaman CRM, dan value adalah nilai label.

Mencegah tampilan data kustom

Anda dapat menggunakan properti invisible_to_agent dengan objek customData untuk mencegah data kustom bertanda tangan atau tidak bertanda tangan ditampilkan di adaptor agen. Dalam contoh berikut, versi ditampilkan di adaptor agen, tetapi platform tidak ditampilkan.

var ujet = new UJET({
  // Other parameters
});

ujet.config({
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
      invisible_to_agent: true
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
      invisible_to_agent: false
    }
  }
});

Jika Anda menyertakan properti "invisible_to_agent" : true dengan objek data kustom, Anda dapat mengharapkan perilaku berikut:

  • Data kustom disertakan dalam file metadata sesi.
  • Data kustom tidak disertakan dalam catatan CRM.

Untuk mengetahui informasi selengkapnya, lihat Melihat data sesi di adaptor agen.

Properti data yang dicadangkan

Anda dapat mengirim properti data yang dicadangkan ke Contact Center AI Platform (CCAI Platform) sebagai data kustom bertanda tangan saat sesi dimulai. Untuk mengetahui informasi selengkapnya, lihat Mengirim properti data yang dicadangkan.

Berikut adalah contoh properti data yang dicadangkan dalam data kustom:

  {
    "custom_data": {
      "reserved_verified_customer": {
        "label": "Verified Customer",
        "value": "VERIFIED_CUSTOMER_BOOLEAN": ,
        "type": "boolean"
      },
      "reserved_bad_actor": {
        "label": "Bad Actor",
        "value": "VERIFIED_BAD_ACTOR_BOOLEAN": ,
        "type": "boolean"
      },
      "reserved_repeat_customer": {
        "label": "Repeat Customer",
        "value": "REPEAT_CUSTOMER_BOOLEAN": ,
        "type": "boolean"
      }
    }
  }

Ganti kode berikut:

  • VERIFIED_CUSTOMER_BOOLEAN: Benar (True) jika Anda menganggap pengguna akhir ini sebagai pelanggan yang sah.
  • VERIFIED_BAD_ACTOR_BOOLEAN: Benar jika Anda menganggap pengguna akhir ini berpotensi menjadi pihak tidak bertanggung jawab.
  • REPEAT_CUSTOMER_BOOLEAN: Benar (True) jika Anda telah menentukan bahwa pengguna akhir ini telah menghubungi pusat kontak Anda sebelumnya.

Menonaktifkan lampiran

Anda dapat menghentikan konsumen mengupload lampiran dengan opsi disableAttachment:

new UJET({
// ...
  disableAttachment: true
});

Dengan disableAttachment: true, tidak akan ada ikon lampiran di area input chat dan konsumen tidak dapat menarik file ke area pesan.

Pengalihan percakapan chat

Jika agen tidak tersedia, Anda dapat menentukan opsi untuk menangani kondisi ini secara otomatis untuk chat web dan seluler.

Opsi untuk pengalihan chat dapat ditemukan di portal CCAI Platform, di Setelan>Chat>Pengalihan web & seluler.

Pengalihan di luar jam kerja

Pengalihan di luar jam kerja khusus untuk pusat kontak atau antrean yang berada di luar jam operasional. Untuk mengaktifkan pengalihan setelah jam kerja, lakukan hal berikut:

  1. Di portal CCAI Platform, di Setelan > Chat > Pengalihan web & seluler.

  2. Jika Pengalihan di luar jam kerja dinonaktifkan, fitur ini dapat diaktifkan dengan memilih opsi Pengalihan di luar jam kerja.

  3. Ubah opsi Izinkan Transfer untuk mengizinkan transfer ke antrean di luar jam operasional untuk perilaku berikut:

    • Agen akan dapat melihat antrean berikut sebagai opsi untuk dialihkan ke di Adaptor Agen:

      • Semua antrean dalam jam operasional

      • Semua antrean yang berada di luar jam operasional tanpa pengalihan yang diaktifkan dan agen yang login

      • Semua antrean yang berada di luar jam kerja dengan agen virtual yang ditetapkan dalam mode ketersediaan 24 jam

    • Agen tidak akan dapat melihat jenis antrean berikut:

      • Semua antrean yang berada di luar jam kerja dengan pengalihan di luar jam kerja diaktifkan

      • Semua antrean yang berada di luar jam operasional dengan agen virtual yang ditetapkan dibatasi pada jam operasional antrean

Pengalihan karena kelebihan kapasitas

Pengalihan karena kelebihan kapasitas khusus untuk kapasitas agen saat ini dan waktu tunggu saat ini untuk antrean yang ditetapkan ke sesi. Untuk mengaktifkan opsi ini, lakukan hal berikut:

  1. Di Portal Platform AI Contact Center, buka Setelan > Chat > Pengalihan Web & Seluler.

  2. Jika Pengalihan Kelebihan Kapasitas dinonaktifkan, pilih tombol Pengalihan Kelebihan Kapasitas untuk mengaktifkannya.

  3. Tetapkan waktu tunggu dalam menit yang akan mengubah status antrean menjadi kelebihan kapasitas.

    Setelan batas waktu ini juga digunakan untuk menetapkan frekuensi pesan kelebihan kapasitas akan ditampilkan kepada pengguna akhir.

Opsi pengalihan

Anda dapat menentukan opsi yang tersedia untuk pengguna akhir saat pengalihan terjadi.

Email

Opsi email saat diaktifkan memberikan kemampuan bagi pengguna akhir untuk dialihkan ke email. Saat pengguna akhir memulai sesi chat web atau seluler setelah jam kerja, mereka akan ditanya apakah ingin menulis email.

Perilaku spesifiknya adalah sebagai berikut:

  • Seluler: Jika pengalihan email diaktifkan dan perkiraan waktu tunggu memenuhi nilai minimum, saat pengguna akhir mengetuk opsi Chat, mereka akan diarahkan ke aplikasi email default mereka. Versi aplikasi dan versi iOS/Android akan otomatis dimasukkan ke isi email dan subjeknya adalah Dukungan untuk [jalur menu yang dipilih]. Atau, formulir email dapat diaktifkan. Untuk informasi selengkapnya, lihat Formulir email terintegrasi untuk SDK seluler dan web.

  • Web: Menampilkan opsi Email kepada pengguna akhir. Saat diklik, formulir email akan muncul. Untuk mengetahui informasi selengkapnya, lihat Formulir email terintegrasi untuk SDK seluler dan web.

  • Terus Menunggu (Khusus Web): Memungkinkan pengguna akhir mengklik opsi untuk terus menunggu.

Dialog izin penjelajahan bersama memungkinkan pengguna akhir menyetujui permintaan sesi penjelajahan bersama awal, serta permintaan kontrol jarak jauh berikutnya atau permintaan akses perangkat penuh. Saat Anda mengonfigurasi web SDK untuk penjelajahan bersama, web SDK menyediakan dialog izin default dan tombol akhir sesi. Namun, Anda dapat menambahkan kolom opsional ke objek cobrowseOptions yang memungkinkan Anda menyesuaikan dialog izin serta tombol akhir sesi. Hal ini tidak hanya memberi Anda kontrol atas tampilan dan nuansa elemen ini, tetapi juga memungkinkan Anda menyesuaikan pernyataan izin dalam dialog izin agar sesuai dengan persyaratan Anda.

Pernyataan izin muncul dalam dialog izin. Pernyataan izin menunjukkan kepada pengguna akhir perilaku yang dapat mereka harapkan dari pengalaman penjelajahan bersama dan apa yang mereka izinkan. Jika Anda bermaksud merekam sesi penjelajahan bersama, Anda harus menyatakannya dalam pernyataan izin Anda. Lihat Contoh kode untuk dialog izin yang disesuaikan untuk contoh dialog izin yang disesuaikan yang berisi pernyataan izin.

Prosedur

Untuk mengonfigurasi web SDK untuk penjelajahan bersama dan menyesuaikan dialog izin, ikuti langkah-langkah berikut:

  1. Untuk mendapatkan domain penjelajahan bersama dan kunci lisensi instance CCAI Platform, lakukan hal berikut:

    1. Login ke portal CCAI Platform menggunakan kredensial administrator.

    2. Klik Menu, lalu klik Setelan > Setelan Developer.

    3. Buka panel Penjelajahan bersama, lalu klik tombol untuk mengaktifkannya.

    4. Simpan nilai di kolom Domain Penjelajahan Bersama dan Kunci Lisensi.

  2. Untuk melakukan inisialisasi web SDK dan menyertakan kolom penyesuaian penjelajahan bersama, jalankan kode berikut:

    var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
    cobrowseRequestHtml: "COBROWSE_REQUEST_HTML",
    remoteControlHtml: "REMOTE_CONTROL_HTML",
    fullDeviceHtml: "FULL_DEVICE_HTML",
    styles: "STYLES",
    sessionControlsHtml: "SESSION_CONTROLS_HTML"
  },
  // other options
})

    Ganti kode berikut:

Class tombol

Dialog izin berisi tombol yang memungkinkan pengguna mengizinkan atau menolak permintaan penjelajahan bersama, atau menutup dialog izin. Agar tombol ini dapat berkomunikasi dengan SDK web, Anda harus mengaitkan class tombol berikut dengan jenis tombol yang sesuai. Web SDK menelusuri kode untuk class ini dan menambahkan pemroses peristiwa untuk masing-masing class. Berikut adalah class tombol:

  • cobrowse-allow: tombol bagi pengguna akhir untuk mengizinkan permintaan

  • cobrowse-deny: tombol bagi pengguna akhir untuk menolak permintaan

  • cobrowse-close: tombol bagi pengguna akhir untuk menutup dialog izin

Contoh kode berikut berisi dialog izin yang disesuaikan, tombol akhiri sesi, dan informasi gaya untuk elemen ini. Setiap dialog izin dalam contoh berisi pernyataan izin. Berikut adalah properti untuk dialog izin bagi setiap dari tiga mode penjelajahan bersama:

"cobrowseOptions": {
    "license": "example_license",
    "trustedOrigins": "[https://example.com]",
    "cobrowseRequestHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n <svg width=\"14\" height=\"14842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n  <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9",
    "remoteControlHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n  </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n  <li>Stop screen sharing at any time</li>\n  <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n</ul>\n</div>\n<div class=\"description\">\n<svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n<span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n</span>\n</div>\n<div class=\"footer\">\n<span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "fullDeviceHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n  <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "styles": ".some-end-button {\n border-radius: 20px;\n background-color: blue;\n color: white;\n display: marquee;\n width: 20rem;\n font-size:200%;\n height: 20rem;\n }\n .custom-backdrop {\n background: rgba(0, 0, 0, 0.1);\n position: fixed;\n z-index: 2147483647;\n bottom: 0;\n top: 0;\n left: 0;\n right: 0;\n }\n .cobrowse-confirm-dialog {\n color: #232424;\n font-family:sans-serif;\n line-height:140%;\n position:fixed;\n background:white;\n border-radius:5px;\n z-index:2147483647;\n top:50px;\n left:50%;\n width:75%;\n max-width:450px;\n transform:translateX(-50%);\n box-shadow:2px 2px 30px rgb(0,0,0,0.08);\n padding: 1.5rem;\n }\n .title {\n text-align:center;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 125%;\n line-height: 25px;\n padding: 20px;\n border-radius: 5px 5px 0 0;\n }\n \n .description {\n height: 8rem;\n display: flex;\n flex-direction:column;\n justify-content: center;\n align-items: center;\n background-color: #F3F3F3;\n }\n \n #loader {\n height:4rem;\n }\n \n .footer {\n margin-top: 1rem;\n margin-bottom: 1rem;\n display: flex;\n flex-direction: column;\n justify-content: flex-start\n }\n .cobrowse-allow {\n background-color: pink;\n color: white;\n flex-grow: 2;\n height: 3rem;\n }\n #cobrowse-end-button {\n cursor: pointer;\n position: fixed;\n z-index: 2147483647;\n top: 50%;\n left: 25%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n #cobrowse-end-button:hover {\n background-color: #92162D;\n }",
    "sessionControlsHtml": " <div class=\"some-end-button\">\n End Session\n </div>"
  }

Untuk mengetahui informasi selengkapnya, lihat Menyiapkan penjelajahan bersama.

Penyesuaian pesan visual dan bahasa

Metode CCAI Platform (opsi) baru memiliki dua kolom untuk mendukung beberapa bahasa dan penyesuaian pesan visual:

  • lang: Menunjukkan bahasa default jika pengguna akhir tidak memilih bahasa pilihan. Kode ini sesuai dengan ISO 639-1 dan jika tidak ada, defaultnya adalah en.

  • translation: Web SDK mendukung beberapa bahasa untuk teks yang ditampilkan. Dengan objek terjemahan, Anda dapat menyesuaikan teks untuk bahasa yang ada atau bahkan menambahkan teks untuk bahasa baru. Contoh: de, es, fr, ja.

Berikut adalah contoh objek terjemahan yang menyesuaikan salinan bahasa Inggris. Seperti yang dapat Anda lihat, kunci level teratas dari objek terjemahan harus berupa kode bahasa.

// ES6
let translation = `{
  "en": {
    "ujet_start_title": "Hi!"
  },
  "es": {
    "ujet_start_title": "¡Hola!"
  },
  "fr": {
    "ujet_start_title": "Salut!"
  },
  "de": {
    "ujet_start_title": "Hallo!"
  },
  "it": {
    "ujet_start_title": "Ciao!"
  },
  "ja": {
    "ujet_start_title": "こんにちは！"
  },
  "ko": {
    "ujet_start_title": "안녕하세요!"
  },
  "pt": {
    "ujet_start_title": "Olá!"
  },
  "pt-BR": {
    "ujet_start_title": "Olá!"
  },
  "sv": {
    "ujet_start_title": "Hej!"
  }
}`;

// initialize when dom ready
var ujet = new UJET({
  // other fields
  lang: 'en',
  translation: translation
});

Pesan penyesuaiannya adalah:

"ujet_ask_phone_number_button_title": "Call Me"
"ujet_ask_phone_number_description": "Provide your phone number below"
"ujet_ask_phone_number_title_instant": "We'll Call You"
"ujet_ask_phone_number_title_scheduled": "Let's Schedule a Call"
"ujet_ask_phone_number_warning": "Your call may be monitored or recorded for training and quality assurance purposes."
"ujet_call_confirm_content": "Your phone should be ringing right about - {0}"
"ujet_call_confirm_start_new_conversation": "Start A New Conversation"
"ujet_call_record_permission_subtitle": "Do you give permission for {0} to record your call for training and quality?"
"ujet_call_record_permission_title": "Permission to Record"
"ujet_channel_chat": "Let's connect you to one of our chat support specialists",
"ujet_channel_instant_call": "Let one of our support specialists give you a call now",
"ujet_channel_menu_chat": "Chat now"
"ujet_channel_menu_email": "Email"
"ujet_channel_menu_instant_call": "Call now"
"ujet_channel_menu_keep_waiting": "Keep Waiting"
"ujet_channel_menu_scheduled_call": "Schedule call"
"ujet_channel_scheduled_call": "Let's schedule a time for a support specialist to call and help you",
"ujet_channel_email": "Please send us an email so we can help",
"ujet_chat_end": "End chat"
"ujet_chat_ended": "This chat has ended"
"ujet_chat_input_placeholder": "Type your message here"
"ujet_chat_leave": "Leave chat"
"ujet_chat_timed_out": "This chat has timed out"
"ujet_chat_title_with_multiple_agent": "Multiple Agents"
"ujet_chat_title_with_one_agent": "Chatting with {0}"
"ujet_chat_title_with_two_agent": "Chatting with {0} & {1}"
"ujet_chat_transfer_failed": "Transfer has failed"
"ujet_chat_transfer_joined": "<b>{0}<\/b> just joined the conversation"
"ujet_chat_transfer_left": "<b>{0}<\/b> just left the conversation"
"ujet_chat_transfer_started_menu": "<b>{0}<\/b> is transferring this chat to another agent..."
"ujet_chat_transfer_started_user": "<b>{0}<\/b> is adding another agent to this conversation..."
"ujet_common_back": "Back"
"ujet_common_cancel": "Cancel"
"ujet_common_end": "End"
"ujet_common_no": "No"
"ujet_common_save": "Save"
"ujet_common_submit": "Submit"
"ujet_common_support": "Support"
"ujet_common_yes": "Yes"
"ujet_deflection_menu_title": "Select from the options below"
"ujet_error_no_available_language": "No Available Language"
"ujet_error_phone_number_invalid": "Please input a valid phone number."
"ujet_file_upload_button": "Choose a file to upload"
"ujet_file_upload_failure_size": "Looks like we couldn't upload. <br> Please try uploading a file <br> that is less than {0}."
"ujet_file_upload_failure_type": "Looks like we couldn't upload. <br> We only accept <br> .JPG, .PNG, or .MP4."
"ujet_file_upload_failure_unknown": "Looks like we couldn't upload. <br> Please try again!"
"ujet_file_upload_subtitle": "Drop files here to upload"
"ujet_file_upload_title": "Upload Files"
"ujet_greeting": "Hi there, how can we help?"
"ujet_instant_call_confirm_content": "Your phone should be ringing shortly"
"ujet_language_chinese": "中文"
"ujet_language_english": "English"
"ujet_language_french": "Français"
"ujet_language_german": "Deutsch"
"ujet_language_italian": "Italiano"
"ujet_language_japanese": "日本語"
"ujet_language_korean": "한국어"
"ujet_language_portuguese": "Português (Portugal)"
"ujet_language_portuguese_brazil": "Português (Brazil)"
"ujet_language_spanish": "Español"
"ujet_language_swedish": "Svenska"
"ujet_menu_title": "Select an option"
"ujet_message_back_in_menu": "Looks like you changed your mind! How else can we help?"
"ujet_message_channel": "How would you like to communicate?"
"ujet_message_chat_deflection_afterhour": "We are currently closed. We look forward to helping you during our normal business hours."
"ujet_message_chat_deflection_default": "We are currently experiencing a high volume of requests with a current wait time of <b>{0}<\/b>. How would you like to reach out?"
"ujet_message_chat_deflection_email": "Please contact us via email: <b><a href="mailto:{0}">{0}<\/a><\/b>."
"ujet_message_chat_deflection_keepwaiting": "Thank you for continuing to wait. The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_deflection_outage": "We are currently experiencing a high volume of request, how would you like to reach out?"
"ujet_message_chat_deflection_recurring": "Thanks for your patience! The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_restart": "Connecting to your ongoing chat, one moment please..."
"ujet_message_chat_start": "One moment please..."
"ujet_message_queue": "Let's help you with<br /><strong>{0}<\/strong>"
"ujet_rating_feedback_placeholder": "Let us know how we can improve."
"ujet_rating_result_subtitle": "We appreciate your feedback"
"ujet_rating_result_title": "Thank you!"
"ujet_rating_title": "Rate Your Experience"
"ujet_redirect_action_title": "Open this page in a new tab"
"ujet_redirect_url_title": "Visit the page below"
"ujet_schedule_time_description": "Pick a time that works best for you"
"ujet_schedule_time_title": "Let's Schedule a Call"
"ujet_scheduled_call_cancel_cancel": "Cancel"
"ujet_scheduled_call_cancel_content": "You scheduled a support call for<br><b>{0}<\/b> at <b>{1}<\/b>."
"ujet_scheduled_call_cancel_keep": "Keep It"
"ujet_scheduled_call_cancel_title": "Cancel the existing call?"
"ujet_screenshot_init_cancel": "No Thanks"
"ujet_screenshot_init_okay": "Accept"
"ujet_screenshot_init_title": "Screenshot Request"
"ujet_screenshot_install_cancel": "Cancel"
"ujet_screenshot_install_okay": "Install"
"ujet_screenshot_install_title": "Install Chrome Extension"
"ujet_screenshot_take_action": "Take Screenshot"
"ujet_screenshot_take_title": "Click the button below to send a screenshot to the agent"
"ujet_screenshot_verify_cancel": "No"
"ujet_screenshot_verify_okay": "Yes"
"ujet_screenshot_verify_title": "Successfully Installed Chrome Extension"
"ujet_start_title": "Need any help?"
"ujet_tap_to_minimize": "Tap to minimize"
"ujet_time_hour": "hour | hours"
"ujet_time_minute": "minute | minutes"

Penyesuaian logo dan ikon

Metode new UJET(option) memiliki kolom untuk mendukung penyesuaian logo dan ikon.

  • logo: URL gambar logo

  • Posisi widget (Hanya berlaku untuk desktop)

    • right: Menetapkan posisi tepi kanan dalam px (Nilai default adalah 50)

    • bottom: Menetapkan posisi tepi bawah dalam px (Nilai defaultnya adalah 50)

  • Posisi ikon (Hanya berlaku untuk desktop)

    • right: Menetapkan posisi tepi kanan dalam px (Nilai default adalah 50)

    • bottom: Menetapkan posisi tepi bawah dalam px (Nilai defaultnya adalah 50)

Contoh penyesuaian logo dan ikon

new UJET({
  logo: 'https://example.com/logo.svg',
  // widget position
  right: '50px',
  bottom: '150px',

  // launcher position
  launcher: {
    right: '50px',
    bottom: '50px',
  }
})

Penyesuaian logo dan ikon

Penyesuaian logo dan ikon

Penyesuaian logo dan ikon

Penyesuaian logo dan ikon

Penyesuaian tema

Metode new UJET(option) memiliki kolom untuk mendukung penyesuaian tema.

  • style: Objek tema mendukung empat nilai untuk widget.

    • links: Daftar link lembar gaya untuk font web

    • --primary-font: Nilai untuk gaya CSS font-family yang diterapkan ke seluruh UI Web, misalnya Merriweather

    • --primary-color: Nilai kode hex yang digunakan sebagai warna primer UI Web, misalnya #51C3C3

    • --link-color: Nilai kode heksadesimal yang digunakan sebagai warna link Web UI, misalnya #51C3C3

  • peluncur: Objek peluncur mendukung empat nilai untuk peluncur.

    • cssText: Sintaksis CSS yang digunakan sebagai gaya CSS untuk peluncur

    • chatIcon: URL ikon SVG yang digunakan untuk ikon chat normal

    • closeIcon: URL ikon SVG yang digunakan untuk ikon tutup

    • style: Objek tema terpisah ini mendukung dua nilai untuk peluncur.

      • --background-color: Nilai kode hex yang digunakan sebagai warna latar belakang peluncur, misalnya #E85230 --icon-color: Nilai kode hex yang digunakan sebagai warna ikon peluncur, misalnya #FFF
var ujet = new UJET({
  // ...
  style: {
    links: [
      'https://fonts.example.com/css?family=Droid+Serif:400,700&display=swap',
    ],
    '--primary-font': 'Droid Serif, Georgia, serif',
    '--primary-color': '#F1684A',
    '--link-color': '#F1684A',
  },
  launcher: {
    cssText: '.wrap button {background: #E85230}',
    chatIcon: 'https://example.com/logo.svg',
    closeIcon: 'https://example.com/close.svg',
    style: {
      '--background-color': '#F1684A',
      '--icon-color': '#fff',
    }
  }
});

Gaya peluncur

Melacak pilihan saluran dan pengiriman email

Untuk mengizinkan pelacakan pemilihan saluran dan pengiriman email, web SDK menggunakan fungsi postMessage yang meneruskan pesan dengan data berikut:

  • aplikasi: Jenis perangkat.

  • sdk_version: Versi Web SDK.

  • user_agent: Versi browser.

  • perusahaan: Nama tenant.

  • menu_name: Nama antrean atau menu yang dipilih pengguna akhir.

  • menu_path: Jalur ke antrean atau menu yang telah dipilih pengguna akhir.

  • menu_id: ID Menu antrean atau menu yang dipilih pengguna akhir.

  • url: URL halaman web yang dibuka pengguna akhir saat mereka memilih saluran atau mengirimkan email.

  • timestamp: Waktu saat pengguna akhir membuat pilihan.

  • has_attachments: Apakah email memiliki lampiran atau tidak saat dikirimkan (ini hanya muncul selama pengiriman email, bukan selama pemilihan channel).

Data pesan disimpan dalam objek ujet dengan 2 atribut: satu disebut tindakan yang akan berupa string yang berisi nama tindakan yang telah diselesaikan, satu disebut data yang akan menyertakan data yang dijelaskan sebelumnya.

Untuk mengambil data dari pesan, Anda dapat membuat pemroses peristiwa yang memproses "pesan". Contoh yang akan mencetak tindakan dan data ke konsol diuraikan di bagian berikutnya. Contoh yang berfungsi dapat ditemukan di folder tracking-channel-selection.

window.addEventListener('message', (e) => {
  if (e.data && e.data.ujet) {
    console.log(`Action: ${e.data.ujet.action}`);
    console.log(`Message Data: ${e.data.ujet.data}`);
  }
});

Menyembunyikan batas logo agen

Untuk menyembunyikan Batas Logo Agen, tambahkan '--logo-shadow': 'none' di atribut gaya dan tetapkan ke benar di UJET baru(opsi):

new UJET({
  // ...
  style: {
    '--logo-shadow': 'none',
  }
});

Menyembunyikan ikon peluncuran

Untuk alasan estetika, ikon peluncuran UI Web dapat disembunyikan, dan memilih untuk menggunakan Pemicu Chat Proaktif atau memulai chat secara terprogram. Untuk menghapus ikon peluncuran, tambahkan atribut peluncur dan tetapkan ke benar (true) di UJET baru (opsi):

new UJET({
  // ...
  launcher: false,
});

Untuk memulai UI Web secara terprogram, lihat Memulai UI Web secara terprogram. Untuk memulai UI web dengan pemicu chat proaktif, lihat Pemicu Proaktif.

Menggunakan titik akses langsung

Anda dapat menggunakan akses langsung untuk mengarahkan pengguna akhir langsung ke antrean tertentu.

Untuk menggunakan titik akses langsung, ikuti langkah-langkah berikut:

  1. Login ke portal CCAI Platform.

  2. Buka Setelan > Antrean.

  3. Pastikan saluran web diaktifkan dengan mengalihkan penggunaan.

  4. Buka Edit > Lihat untuk saluran web. Struktur web akan ditampilkan.

  5. Pilih antrean yang ingin Anda tuju langsung oleh pengguna akhir.

  6. Buka bagian Access Point, lalu klik Create direct access point.

  7. Berikan informasi berikut:

    1. Tetapkan jenis titik akses ke umum.

    2. Berikan Nama Poin Akses. Ini adalah nama yang muncul di daftar Poin Akses.

    3. Berikan Label Titik Akses Umum. Nilai ini adalah nilai yang akan Anda gunakan untuk mengonfigurasi web SDK.

  8. Klik Create.

Anda dapat meneruskan nama titik akses langsung menggunakan metode ujet.start(options). Lihat contoh berikut:

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start({ menuKey: '__MENU_KEY__' });
  }
});

Menutup UI web secara terprogram

Ini langkah opsional. Tanpa langkah ini, UI Web akan selesai dan diminimalkan dengan sendirinya.

Langkah ini memungkinkan Anda memanggil fungsi callback saat konsumen ingin menutup Web SDK.

ujet.on('close', function() {
  // do something here
});

Mulai UI web secara terprogram

Ini langkah opsional. Tanpa langkah ini, pengguna akhir dapat memulai UI Web dengan mengklik ikon peluncur UI Web.

Langkah ini memungkinkan Anda membuka UI Web secara terprogram dengan metode ujet.start(options). Anda mungkin ingin pengguna akhir mengklik tombol tambahan untuk membuka UI Web seperti ini:

<button id="launcher">Klik untuk membuka</button>

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "HOST_URL",
  launcher: false
});

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start();
  }
});

ujet.on('ready', function() {
  launcher.textContent = 'ready to talk';
});

ujet.registerHook('loading', function() {
  launcher.textContent = 'loading';
});

ujet.registerHook('open', function() {
  launcher.textContent = 'Click to close';
});

ujet.registerHook('close', function() {
  launcher.textContent = 'Click to open';
});

ujet.on('created', function() {
  ujet.authenticate(getAuthToken);
});

Anda juga dapat menutup widget dengan metode ujet.close(), dan Anda dapat menghapus widget dengan metode ujet.destroy().

Pemicu proaktif

Dengan pemicu proaktif, Anda dapat memicu SDK web untuk mengirim pesan secara proaktif kepada pengguna akhir.

Untuk menyiapkan pemicu proaktif, ikuti langkah-langkah berikut:

  1. Di portal Platform CCAI, buka Setelan > Chat.

  2. Buka panel Web Proactive Chat Triggers, lalu klik View triggers. Panel Pemicu akan muncul.

  3. Klik Add Trigger. Panel Pilih Nama akan muncul.

  4. Di kolom Nama pemicu, masukkan nama, lalu klik Berikutnya. Panel Tetapkan Kondisi akan muncul.

  5. Untuk menyetel kondisi, lakukan hal berikut:

    1. Di samping Pengguna akhir, pilih kondisi.

    2. Di kolom Masukkan kata kunci, masukkan kata kunci yang ingin dirujuk oleh kondisi, lalu tekan tombol Enter.

    3. Ulangi langkah sebelumnya untuk setiap kata kunci yang ingin Anda masukkan.

    4. Untuk menambahkan kondisi lain, klik Tambahkan Kondisi Lain, lalu klik jenis kondisi yang Anda inginkan.

    5. Tetapkan opsi konfigurasi untuk kondisi.

    6. Untuk menambahkan kondisi lain, ulangi dua langkah sebelumnya.

    7. Klik Berikutnya. Panel Tentukan Tindakan akan muncul.

  6. Untuk menentukan tindakan, lakukan hal berikut:

    1. Di bagian Penetapan Antrean, masukkan nama node antrean chat yang ingin Anda tetapkan kepada pengguna akhir. Jika antrean chat dengan nama ini ada, nama tersebut akan muncul dalam huruf tebal di bawah kolom.

    2. Klik nama antrean chat yang dicetak tebal. Dialog konfirmasi akan muncul.

    3. Klik OK untuk melanjutkan.

    4. Di bagian Pesan chat, masukkan pesan yang ingin Anda tampilkan dalam chat yang dipicu.

    5. Klik Selesai.

    6. Untuk mengaktifkan pemicu baru, klik Siarkan.

ID tiket yang ada

Jika Anda memiliki tiket yang sudah ada untuk pengguna akhir, Anda dapat mengambil ID tiket dari CRM dan meneruskannya ke web SDK dengan memanggil ujet.start().

Contoh:

yourFunctionToRetrieveTicket()
  .then((existingTicket) => {
    ujet.start({ ticketId: existingTicket });
  });

Anda dapat melihat contoh di folder ticket-id untuk referensi.