Fitur yang didukung

SDK web dirancang untuk berfungsi di semua browser desktop dan seluler modern, tetapi kami secara resmi mendukung versi terbaru dari browser berikut:

  • Desktop:

    • Chrome

    • Safari

    • Edge

  • Android:

    • Chrome

    • Edge

  • iOS:

    • Chrome

    • Safari

    • Edge

Pemicu proaktif

Pemicu proaktif memungkinkan peluncuran SDK web dan pengiriman pesan ke konsumen secara proaktif. Anda dapat menyiapkan pemicu chat proaktif di Contact Center AI Platform dengan membuka Settings > Chat > Web Proactive Chat Triggers.

Untuk mengetahui informasi selengkapnya, lihat Pemicu Web SDK Proaktif. Widget pemicu dengan opsi untuk menambahkan pemicu baru atau menggunakan pemicu yang sudah ada.

Melacak pengguna

Jika Anda ingin mengidentifikasi pengguna berulang di CRM atau menggunakan respons siap pakai menggunakan informasi pengguna, Anda harus menambahkan identifiers kepada pengguna. Penggunaan respons siap pakai memerlukan CRM.

Otentikasi (memperbarui ID) dapat dilakukan di awal sesi atau di tengah sesi. Untuk mengetahui informasi selengkapnya tentang autentikasi di tengah sesi, lihat Autentikasi di Tengah Sesi oleh API.

ID

Saat memulai panggilan atau chat, sistem kami mengandalkan ID untuk autentikasi pengguna. Anda dapat menentukan nilai pilihan untuk kolom ID selama konfigurasi. Jika sudah memiliki GUID (ID unik global) untuk pengguna, Anda dapat menggunakannya untuk identifikasi pengguna. Namun, jika ID yang Anda miliki untuk pengguna dapat dihitung atau berisi informasi identitas pribadi (PII), Anda harus melakukan hashing untuk meningkatkan keamanan.

ID harus ditambahkan 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: '18008675309'
      }
    })
  }).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(`Listening 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.

ccaas.config({
  customData: {
    "external_chat_transfer": {
      "greeting_override": "YOUR GREETING MESSAGE."
    }
  }
"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": "text",
            "text": "Check Order Status"
          }
        ]
      },
      {
        "sender": "agent",
        "timestamp": "2021-03-15 12:00:16Z",
        "content": [
          {
            "type": "text",
            "text": "I can help you with that, what's your order number?"
          }
        ]
      },
      {
        "sender": "end_user",
        "timestamp": "2021-03-15 12:00:20Z",
        "content": [
          {
            "type": "media",
            "media": {
              "type": "image",
              "url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
            }
          }
        ]
      }
    ]
  }
}

Nama perusahaan

Pilih name kustom, bukan nama dari API perusahaan.

ccaas.config({
  name: 'ACME',
})

Pengalihan percakapan chat

Saat agen tidak tersedia, Anda dapat menentukan opsi untuk menangani situasi secara otomatis dengan pengalihan.

Opsi pengalihan chat dapat ditemukan di portal pada bagian Setelan > Chat > Pengalihan Web dan Seluler.

Periode waktu untuk menyiapkan pengalihan web dan seluler serta menentukan kapan pengalihan tersebut akan digunakan.

Titik akses langsung (DAP)

Anda dapat mengarahkan pengguna langsung ke antrean tertentu dalam struktur antrean menggunakan titik akses langsung.

Untuk menggunakan titik akses langsung, Anda harus membuat titik akses langsung di portal terlebih dahulu.

  1. Di portal Platform CCAI, klik Settings > Queue. Jika Anda tidak melihat menu Setelan, klik Menu.

  2. Aktifkan Gunakan untuk menu Web dan buka EDIT / LIHAT.

  3. Pilih antrean apa pun dari struktur antrean.

    Daftar antrean dan opsi untuk tingkat dukungan.

  4. Klik Buat titik akses langsung.

  5. Jenis Titik Akses = Umum.

    Buat Titik Akses Langsung dan tentukan jenis titik akses yang akan dibuat.

  6. Tambahkan data input untuk titik akses langsung dalam dialog. Perhatikan bahwa kolom General Access Point Label sesuai dengan MenuKey yang disebutkan di langkah berikutnya.

  7. Klik BUAT.

Setelah dikonfigurasi menggunakan portal, Anda dapat mengarahkan pengguna ke antrean tertentu menggunakan MenuKey:

ccaas.config({
  menuKey: 'vip'
})

ID tiket

Jika Anda memiliki tiket yang sudah ada untuk konsumen, Anda dapat mengambil ID tiket dari CRM dan meneruskannya ke SDK web:

retrieveTicket().then(ticket => {
  ccaas.config({ ticketId: ticket.id })
})

Pemilihan saluran otomatis

Dengan preferredChannel, Anda dapat otomatis memilih saluran saat konsumen memilih antrean tertentu:

ccaas.config({
  preferredChannel: 'chat'
})

Menonaktifkan lampiran

Secara default, web SDK memungkinkan konsumen mengupload foto dan video selama sesi chat. Anda dapat menonaktifkannya menggunakan skrip berikut:

ccaas.config({
  disableAttachment: false
})

Meneruskan data kustom

Saat percakapan dimulai, data kustom dapat dikirim dengan objek percakapan. Data kustom dapat berupa apa saja mulai dari OS, Versi, lokasi, atau data lain yang mungkin relevan dengan chat masing-masing.

Anda dapat menambahkan data kustom yang tidak bertanda tangan menggunakan konfigurasi customData.

Format data kustom mirip dengan objek JSON dan terdiri dari key, label, dan value.

ccaas.config({
  customData: {
    k1: {
      label: 'Version',
      value: '1.1.0'
    },
    k2: {
      label: 'Platform',
      value: navigator.platform
    }
  }
})

Key: ID unik untuk data. Dalam contoh sebelumnya, k1 dan k2 adalah kunci.

Label: nama tampilan di halaman CRM.

Value: nilai label

Anda dapat menambahkan data kustom bertanda tangan menggunakan konfigurasi signedCustomData:

ccaas.config({
  signedCustomData: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.n...."
})

signedCustomData adalah string JWT dengan algoritma HS256.

SIGN_JWT(
  algorithm='HS256',
  secret=YOUR_COMPANY_SECRET,
  payload={
    custom_data: {
      version: {
        label: 'Version',
        value: '1.0.0'
      },
      ...
    },
    iss: 'YOUR TENANT',
    iat: NOW,
    exp: NOW + 3600,
  }
)

Mendukung beberapa bahasa

Kolom lang dapat digunakan untuk mengontrol bahasa default saat peluncuran, dan untuk mendukung beberapa bahasa. Jika tidak diisi, defaultnya adalah bahasa Inggris (en). Bahasa default dapat dikonfigurasi per halaman situs Anda. Jika bahasa lain sudah aktif di tenant Anda, konsumen akan diberi opsi untuk beralih ke bahasa lain.

client.getMenus(key?: string, lang?: string)

Metode .getMenus menerima parameter lang opsional. Jika tidak meneruskan parameter lang ke .getMenus, metode ini akan menggunakan opsi lang default.

Contoh:

const client = new Client({
  // ...
  lang: 'ja',
})

Opsi ini dapat diakses menggunakan properti berikut:

console.log(client.lang)

Bahasa berikut didukung, dan menggunakan singkatan yang ditunjukkan dalam tabel berikut:

Bahasa Singkatan
Inggris en
Inggris (Kanada) en-CA
Inggris (Britania) en-GB
Inggris (Australia) en-AU
Inggris (India) en-IN
Spanyol (Spanyol) es
Spanyol (Meksiko) es-MX
Prancis (Kanada) fr-CA
Jerman de
Jepang ja
Korea ko
Italia it
China (Aksara Sederhana) zh
China (Aksara Tradisional) zh-Hant
Swedia sv
Portugis pt
Portugis (Brasil) pt-BR
Finlandia fi
Norwegia nb
Denmark da
Belanda nl
Turki tr
Vietnam vi
Thai th
Arab ar
Ceko cs
Polandia pl
Hungaria hu
Rusia ru
Hindi hai
Rumania ro
Kroasia jam
Ukraina uk
Tagalog tl

Untuk mengetahui informasi selengkapnya tentang terjemahan, lihat bagian Menyesuaikan Pesan dan Terjemahan.

Memulai UI web secara terprogram

Langkah ini memungkinkan Anda membuka UI Web secara terprogram dengan metode ccaas.start(options).

Dalam beberapa kasus, Anda mungkin ingin konsumen mengklik tombol tambahan untuk membuka UI Web SDK.

Contoh:

<button id="launcher">Click to open</button>

var ccass = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "HOST_URL",
  authenticate: getAuthToken,
});

ccass.config({disableLauncher: true})

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ccass.visible) {
    ccaas.hide();
    launcher.textContent = 'Click to open';
  } else {
    ccaas.show();
    launcher.textContent = 'Click to close';
  }
});

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

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

Menutup UI web secara terprogram

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

ccass.on('visible', function(visible) {console.log(visible) })

Mendapatkan informasi tentang sesi chat aktif

Anda bisa mendapatkan informasi tentang sesi chat aktif, termasuk ID chat.

Lihat contoh berikut:

ccass.getOngoingChat()

Jika ada sesi chat yang aktif, fungsi ini akan menampilkan metadata chat. Jika tidak ada sesi chat aktif, fungsi ini akan menampilkan null.

Anda dapat menggunakan ini untuk mencegah konsumen membuka beberapa sesi chat dengan menyembunyikan SDK secara kondisional jika ada chat yang sedang berlangsung.

Melacak status terbuka atau tertutup di beberapa tab atau jendela

Anda dapat menyinkronkan status buka atau tutup SDK di beberapa tab atau jendela situs Anda. Gunakan cuplikan kode untuk melacak status SDK di penyimpanan lokal:

ccass.on('visible', (isVisible) => {
 localStorage['ujetOpen'] = isVisible ? 'yes' : 'no'
})
if (localStorage['ujetOpen'] == 'yes') {
 ccass.show()
} else {
 ccass.hide()
}

template

Anda dapat menyesuaikan template dialog berbagi layar dengan opsi ini, template defaultnya adalah:

<dialog open class="cobrowse-dialog">
  <h1>$title</h1>
  <div class="cobrowse-dialog_content">$content</div>
  <div class="cobrowse-dialog_footer">
    <button class="cobrowse-dialog_allow js-cobrowse-allow">$allow</button>
    <button class="cobrowse-dialog_deny js-cobrowse-deny">$deny</button>
  </div>
</dialog>

template ini digunakan untuk:

  • dialog konfirmasi sesi

  • dialog konfirmasi remote control

  • mengonfirmasi dialog perangkat penuh

Parameter dalam template akan diganti dengan konten dalam opsi messages.

confirmSessionTemplate

Opsi ini digunakan untuk menyesuaikan dialog sesi konfirmasi.

confirmRemoteControlTemplate

Opsi ini digunakan untuk menyesuaikan dialog konfirmasi remote control.

confirmFullDeviceTemplate

Opsi ini digunakan untuk menyesuaikan dialog konfirmasi perangkat penuh.

sessionControlsTemplate

Opsi ini digunakan untuk menyesuaikan tombol kontrol sesi. Template defaultnya adalah:

<button class="cobrowse-end js-cobrowse-end">$end</button>

Pesan

Template sebelumnya berisi variabel pesan berikut:

  • $title

  • $content

  • $allow

  • $deny

Variabel ini akan diganti dengan:

{
  confirmSessionTitle: string;  // $title
  confirmSessionContent: string;  // $content
  confirmRemoteControlTitle: string;  // $title
  confirmRemoteControlContent: string;  // $content
  confirmFullDeviceTitle: string;  // $title
  confirmFullDeviceContent: string;  // $content
  allowText: string;  // $allow
  denyText: string;  // $deny
  endSessionText: string;  // $end
}

Kami memiliki pesan Berbagi Layar bawaan, misalnya, pesan untuk lokalitas en:

{
  "confirmSessionTitle": "Screen Share Session Request",
  "confirmSessionContent": "Do you want to share your current screen with the agent?",
  "endSessionText": "End Screen Share Session",
  "confirmRemoteControlTitle": "Remote Access Request",
  "confirmRemoteControlContent": "The agent would like to have access to your currently shared screen to further assist you. Do you want to allow this?",
  "confirmFullDeviceTitle": "Screen Share Request",
  "confirmFullDeviceContent": "Do you want to share your full screen with the agent? The agent will not be able to control anything on the screen.",
  "allowText": "Allow",
  "denyText": "Deny"
}