Menyiapkan tampilan AWS terkelola untuk ruang kerja agen di Amazon Connect - Amazon Connect

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Menyiapkan tampilan AWS terkelola untuk ruang kerja agen di Amazon Connect

Amazon Connect mencakup serangkaian tampilan yang dapat Anda tambahkan ruang kerja agen Anda. Lihat berikut ini untuk detail tentang cara mengonfigurasi tampilan AWS terkelola yang berbeda.

Detail view

Tampilan Detail adalah untuk menampilkan informasi kepada agen dan memberi mereka daftar tindakan yang dapat mereka ambil. Kasus penggunaan umum dari tampilan Detail adalah memunculkan layar pop ke agen pada awal panggilan.

  • Tindakan dalam tampilan ini dapat digunakan untuk membiarkan agen melanjutkan ke langkah berikutnya dalam step-by-step panduan atau tindakan dapat digunakan untuk memanggil alur kerja yang sama sekali baru.

  • Bagian adalah satu-satunya komponen yang diperlukan. Di sinilah Anda dapat mengonfigurasi badan halaman yang ingin Anda tampilkan kepada agen Anda.

  • Komponen opsional seperti AttributeBardidukung oleh tampilan ini.

Dokumentasi interaktif untuk tampilan Detail

Gambar berikut menunjukkan contoh tampilan Detail. Ini memiliki judul halaman, deskripsi, dan empat contoh.

Tampilan detail, dengan judul halaman, deskripsi, dan empat contoh dengan atribut.

Bagian

  • Konten dapat berupa string statis, TemplateString atau pasangan kunci-nilai. Ini bisa berupa titik data tunggal atau daftar. Untuk informasi lebih lanjut, lihat TemplateStringatau AtrributeSection.

AttributeBar (Opsional)

  • Opsional, jika disediakan akan menampilkan bilah Atribut di bagian atas tampilan.

  • Adalah daftar objek dengan properti yang diperlukan, Label, Nilai, dan properti opsional LinkType, ResourceId, Copyable dan Url. Untuk informasi selengkapnya lihat, Atribut.

    • LinkTypebisa eksternal atau menghubungkan aplikasi seperti case.

      • Ketika itu eksternal, pengguna dapat menavigasi ke halaman browser baru, yang dikonfigurasi dengan Url.

      • Jika terjadi, pengguna dapat menavigasi ke detail kasus baru di ruang kerja Agen, yang dikonfigurasi dengannya ResourceId.

    • Copyable memungkinkan pengguna untuk menyalin ResourceId dengan memilihnya dengan perangkat input Anda.

Kembali (Opsional)

  • Opsional, tetapi diperlukan jika tidak ada tindakan yang disertakan. jika disediakan akan menampilkan tautan navigasi belakang.

  • Adalah objek dengan Label yang akan mengontrol apa yang ditampilkan dalam teks tautan.

Judul (Opsional)

  • Opsional, jika disediakan akan menampilkan Teks sebagai judul.

Deskripsi (Opsional)

  • Opsional, jika disediakan akan menampilkan deskripsi teks di bawah judul.

Tindakan (Opsional)

  • Tidak wajib. Jika disediakan, akan menampilkan daftar tindakan di bagian bawah halaman.

Contoh masukan


{
  "AttributeBar": [
    {"Label": "Example", "Value": "Attribute"},
    { "Label": "Example 2", "Value": "Attribute 3", "LinkType": "case", "ResourceId": "123456", "Copyable": true }
  ],
  "Back": {
    "Label": "Back"
  },
  "Heading": "Hello world",
  "Description": "This view is showing off the wonders of a detail page",
  "Sections": [{
    "TemplateString": "This is an intro paragraph"
  }, "abc"],
  "Actions": ["Do thing!", "Update thing 2!"],
}

Contoh keluaran


{
    Action: "ActionSelected",
    ViewResultData: {
        actionName: "Action 2"
    }
}
List view

Tampilan Daftar adalah untuk menampilkan informasi sebagai daftar item dengan judul dan deskripsi. Item juga dapat bertindak sebagai tautan dengan tindakan yang dilampirkan. Ini juga secara opsional mendukung navigasi belakang standar dan header konteks persisten.

Dokumentasi interaktif untuk tampilan Daftar

Gambar berikut menunjukkan contoh tampilan Daftar. Ini memiliki satu kolom dengan tiga item di dalamnya.

Tampilan daftar, satu item daftar dengan tautan, dan dua item tanpa tautan.

Barang

  • Wajib, akan menampilkan item ini sebagai daftar.

  • Setiap item mungkin memiliki Heading, Description, Icon, dan Id.

    • Semua properti adalah opsional.

    • Ketika Id didefinisikan, output akan menyertakan nilai sebagai bagian dari output.

AttributeBar (Opsional)

  • Opsional, jika disediakan akan menampilkan bilah Atribut di bagian atas tampilan.

  • Adalah daftar objek dengan properti yang diperlukan, Label, Nilai, dan properti opsional LinkType, ResourceId, Copyable dan Url. Untuk informasi selengkapnya lihat, Atribut.

    • LinkTypebisa eksternal atau menghubungkan aplikasi seperti case.

      • Ketika itu eksternal, pengguna dapat menavigasi ke halaman browser baru, yang dikonfigurasi dengan Url.

      • Jika terjadi, pengguna dapat menavigasi ke detail kasus baru di ruang kerja Agen, yang dikonfigurasi dengannya ResourceId.

    • Copyable memungkinkan pengguna untuk menyalin ResourceId dengan memilihnya dengan perangkat input Anda.

Kembali (Opsional)

  • Opsional, tetapi diperlukan jika tidak ada tindakan yang disertakan. jika disediakan akan menampilkan tautan navigasi belakang.

  • Adalah objek dengan Label yang akan mengontrol apa yang ditampilkan dalam teks tautan.

Judul (Opsional)

  • Opsional, jika disediakan akan menampilkan Teks sebagai judul.

SubHeading (Opsional)

  • Opsional, jika disediakan akan menampilkan Teks sebagai judul daftar.

Contoh data masukan


                            {
    "AttributeBar": [
        { "Label": "Example", "Value": "Attribute" },
        { "Label": "Example 2", "Value": "Attribute 2" },
    { "Label": "Example 2", "Value": "Attribute 3", "LinkType": "external", "Url": "https://www.amzon.com" }
    ],
    "Back": {
        "Label": "Back"
    },
    "Heading": "José may be contacting about...",
    "SubHeading": "Optional List Title",
    "Items": [
        {
            "Heading": "List item with link",
            "Description": "Optional description here with no characters limit. We can just wrap the text.",
            "Icon": "School",
            "Id": "Select_Car"
        },
        {
            "Heading": "List item not a link",
            "Icon": "School",
            "Description": "Optional description here with no characters limit."
        },
        {
            "Heading": "List item not a link and no image",
            "Description": "Optional description here with no characters limit."
       },
        {
            "Heading": "List item no image and with link",
            "Description": "Optional description here with no characters limit."
        }
    ]
}

Contoh data keluaran


{
    Action: "ActionSelected",
    ViewResultData: {
        actionName: "Select_Car"
    }
}
Form view

Tampilan Formulir memungkinkan Anda memberi agen Anda bidang masukan untuk mengumpulkan data yang diperlukan dan mengirimkan data ke sistem backend. Tampilan ini terdiri dari beberapa Bagian dengan gaya Bagian yang telah ditentukan dengan header. Tubuh terdiri dari berbagai bidang input yang disusun dalam kolom atau format tata letak kisi.

Dokumentasi interaktif untuk tampilan Formulir

Gambar berikut menunjukkan contoh tampilan Formulir untuk reservasi sewa mobil. Ini memiliki bidang lokasi dan tanggal di atasnya.

Tampilan formulir dengan bidang lokasi dan tanggal sebagai contoh.

Bagian

  • Lokasi dalam tampilan Formulir tempat bidang input dan bidang tampilan berada.

  • SectionProps

    • Menuju

      • Judul bagian

    • Jenis

      • Jenis bagian

      • FormSection (formulir yang menangani masukan pengguna) atau DataSection (menampilkan daftar label dan nilai)

    • Barang

      • Daftar data berdasarkan jenisnya. TypeKapanDataSection, data harus berupa atribut. Jika Type yaFormSection, data harus berupa komponen bentuk.

    • isEditable

      • Tampilkan tombol edit di header saat disediakan saat jenis bagianDataSection.

      • Boolean

Wizard (Opsional)

  • Tampilan ProgressTrackerdi sisi kiri tampilan.

  • Setiap item mungkin memiliki Judul, Deskripsi, dan Opsional.

    • Judul diperlukan

Kembali (Opsional)

  • Adalah objek atau string dengan Label yang akan mengontrol apa yang ditampilkan dalam teks tautan.

Berikutnya (Opsional)

  • Tindakan ini digunakan ketika langkah bukan langkah terakhir dalam langkah-langkah.

  • Adalah objek (FormActionProps) atau string. Untuk informasi lebih lanjut, lihat FormActionProps.

Batalkan (Opsional)

  • Tindakan ini digunakan ketika langkah bukan langkah pertama.

  • Adalah objek (FormActionProps) atau string. Untuk informasi lebih lanjut, lihat FormActionProps.

Sebelumnya (Opsional)

  • Tindakan ini digunakan ketika langkah bukan langkah pertama.

  • Adalah objek (FormActionProps) atau string. Untuk informasi lebih lanjut, lihat FormActionProps.

Edit (Opsional)

  • Tindakan ini ditampilkan ketika jenis bagianDataSection.

  • Adalah objek (FormActionProps) atau string. Untuk informasi lebih lanjut, lihat FormActionProps.

AttributeBar (Opsional)

  • Opsional, jika disediakan akan menampilkan bilah Atribut di bagian atas tampilan.

  • Adalah daftar objek dengan properti yang diperlukan, Label, Nilai, dan properti opsional LinkType, ResourceId, Copyable dan Url. Untuk informasi selengkapnya lihat, Atribut.

    • LinkTypebisa eksternal atau menghubungkan aplikasi seperti case.

      • Ketika itu eksternal, pengguna dapat menavigasi ke halaman browser baru, yang dikonfigurasi dengan Url.

      • Jika terjadi, pengguna dapat menavigasi ke detail kasus baru di ruang kerja Agen, yang dikonfigurasi dengannya ResourceId.

    • Copyable memungkinkan pengguna untuk menyalin ResourceId dengan memilihnya dengan perangkat input Anda.

Judul (Opsional)

  • String yang ditampilkan sebagai judul halaman.

SubHeading (Opsional)

  • Pesan sekunder untuk halaman.

ErrorText (Opsional)

  • Opsional, menampilkan pesan kesalahan sisi server.

  • ErrorProps; Tali

Contoh data masukan


                            {
    "AttributeBar": [{
            "Label": "Queue",
            "Value": "Sales"
        },
        {
            "Label": "Case ID",
            "Value": "1234567"
        },
        {
            "Label": "Case",
            "Value": "New reservation"
        },
        {
            "Label": "Attribute  3",
            "Value": "Attribute"
        }
    ],
    "Back": {
        "Label": "Back Home"
    },
    "Next": {
        "Label": "Confirm Reservation",
        "Details": {
            "endpoint": "awesomecustomer.com/submit",
        }
    },
    "Cancel": {
        "Label": "Cancel"
    },
    "Heading": "Modify Reservation",
    "SubHeading": "Cadillac XT5",
    "ErrorText": {
        "Header": "Modify reservation failed",
        "Content": "Internal Server Error, please try again"
    },
    "Sections": [{
        "_id": "pickup",
        "Type": "FormSection",
        "Heading": "Pickup Details",
        "Items": [{
            "LayoutConfiguration": {
                "Grid": [{
                    "colspan": {
                        "default": "12",
                        "xs": "6"
                    }
                }]
            },
            "Items": [{
                "Type": "FormInput",
                "Fluid": true,
                "InputType": "text",
                "Label": "Location",
                "Name": "pickup-location",
                "DefaultValue": "Seattle"
            }]
        }, {
            "LayoutConfiguration": {
                "Grid": [{
                    "colspan": {
                        "default": "6",
                        "xs": "4"
                    }
                }, {
                    "colspan": {
                        "default": "6",
                        "xs": "4"
                    }
                }]
            },
            "Items": [{
                "Label": "Day",
                "Type": "DatePicker",
                "Fluid": true,
                "DefaultValue": "2022-10-10",
                "Name": "pickup-day"
            }, {
                "Label": "Time",
                "Type": "TimeInput",
                "Fluid": true,
                "DefaultValue": "13:00",
                "Name": "pickup-time"
            }]
        }]
    }, {
        "_id": "dropoff",
        "Heading": "Drop off details",
        "Type": "FormSection",
        "Items": [{
            "LayoutConfiguration": {
                "Grid": [{
                    "colspan": {
                        "default": "12",
                        "xs": "6"
                    }
                }]
            },
            "Items": [{
                "Label": "Location",
                "Type": "FormInput",
                "Fluid": true,
                "DefaultValue": "Lynnwood",
                "Name": "dropoff-location"
            }]
        }, {
            "LayoutConfiguration": {
                "Grid": [{
                    "colspan": {
                        "default": "6",
                        "xs": "4"
                    }
                }, {
                    "colspan": {
                        "default": "6",
                        "xs": "4"
                    }
                }]
            },
            "Items": [{
                "Label": "Day",
                "Type": "DatePicker",
                "Fluid": true,
                "DefaultValue": "2022-10-15",
                "Name": "dropoff-day"
            }, {
                "Label": "Time",
                "Type": "TimeInput",
                "Fluid": true,
                "DefaultValue": "01:00",
                "Name": "dropoff-time"
            }]
        }]
    }]
}

Contoh data keluaran


{
    Action: "Submit",
    ViewResultData: { 
        FormData: {
            "dropoff-day": "2022-10-15",
            "dropoff-location": "Lynnwood",
            "dropoff-time": "01:00",
            "pickup-day": "2022-10-10",
            "pickup-location": "Seattle",
            "pickup-time": "13:00"
        },
       StepName:"Pickup and drop off"
    }
}
Confirmation view

Tampilan Konfirmasi adalah halaman untuk menampilkan pengguna setelah formulir dikirimkan atau tindakan telah selesai. Dalam template pra-bangun ini Anda dapat memberikan ringkasan tentang apa yang telah terjadi, setiap langkah selanjutnya, dan petunjuk. Tampilan Konfirmasi mendukung bilah atribut persisten, ikon/gambar, judul, dan sub-judul, bersama dengan tombol navigasi kembali ke rumah.

Dokumentasi interaktif untuk tampilan Konfirmasi

Gambar berikut menunjukkan contoh konfirmasi.

Tampilan konfirmasi, tanda centang dan teks untuk mengonfirmasi penyewaan mobil.

Berikutnya

  • Wajib.

  • Tombol aksi untuk selanjutnya

    • Label - label string untuk tombol navigasi.

AttributeBar (Opsional)

  • Opsional, jika disediakan akan menampilkan bilah Atribut di bagian atas tampilan.

  • Adalah daftar objek dengan properti yang diperlukan, Label, Nilai, dan properti opsional LinkType, ResourceId, Copyable dan Url. Untuk informasi selengkapnya lihat, Atribut.

    • LinkTypebisa eksternal atau menghubungkan aplikasi seperti case.

      • Ketika itu eksternal, pengguna dapat menavigasi ke halaman browser baru, yang dikonfigurasi dengan Url.

      • Jika terjadi, pengguna dapat menavigasi ke detail kasus baru di ruang kerja Agen, yang dikonfigurasi dengannya ResourceId.

    • Copyable memungkinkan pengguna untuk menyalin ResourceId dengan memilihnya dengan perangkat input Anda.

Judul (Opsional)

  • String yang ditampilkan sebagai judul halaman.

SubHeading (Opsional)

  • Pesan sekunder untuk halaman.

Grafis (Opsional)

  • Menampilkan gambar

  • Objek dengan kunci berikut:

    • Sertakan - boolean, jika ini benar maka grafik akan dimasukkan dalam halaman.

Contoh Data Masukan


 {
  "AttributeBar": [
    { "Label": "Attribute1", "Value": "Value1" },
    { "Label": "Attribute2", "Value": "Value2" },
    { "Label": "Attribute3", "Value": "Amazon", "LinkType": "external", "Url": "https://www.amzon.com" }
  ],
  "Next": {
    "Label": "Go Home"
  },
  "Graphic": {
    "Include": true
  },
  "Heading": "I have updated your car rental reservation for pickup on July 22.",
  "SubHeading": "You will be receiving a confirmation shortly. Is there anything else I can help with today?",
}

Contoh Data Keluaran


{
    "Action": "Next",
    "ViewResultData": {
        "Label": "Go Home"
    }
}
Cards view

Tampilan Kartu memungkinkan Anda untuk memandu agen Anda dengan menyajikan kepada mereka daftar topik untuk dipilih segera setelah mereka menerima kontak.

Dokumentasi interaktif untuk tampilan Kartu

Tunjukkan kartu kepada agen Anda. Gambar berikut menunjukkan contoh enam kartu yang disajikan kepada agen: satu untuk membuat reservasi baru, dan yang lainnya untuk meninjau reservasi untuk perjalanan yang akan datang.

Satu set enam kartu.

Ketika agen memilih kartu, info lebih lanjut terungkap. Gambar berikut menunjukkan kartu terbuka yang menampilkan detail untuk reservasi.

Kartu terbuka yang menunjukkan detail untuk reservasi.

Bagian

  • Ini adalah daftar objek dengan Ringkasan dan Detail. Itu harus disediakan untuk membuat Kartu dan Detail.

  • Terdiri dari Ringkasan dan Detail. Untuk informasi lebih lanjut lihat Ringkasan dan Detail.

AttributeBar (Opsional)

  • Opsional, jika disediakan akan menampilkan bilah Atribut di bagian atas tampilan.

  • Adalah daftar objek dengan properti yang diperlukan, Label, Nilai, dan properti opsional LinkType, ResourceId, Copyable dan Url. Untuk informasi selengkapnya, lihat Atribut.

    • LinkTypebisa eksternal atau menghubungkan aplikasi seperti case.

      • Ketika itu eksternal, pengguna dapat menavigasi ke halaman browser baru, yang dikonfigurasi dengan Url.

      • Jika terjadi, pengguna dapat menavigasi ke detail kasus baru di ruang kerja Agen, yang dikonfigurasi dengannya ResourceId.

    • Copyable memungkinkan pengguna untuk menyalin ResourceId dengan memilihnya dengan perangkat input Anda.

Judul (Opsional)

  • String yang ditampilkan sebagai judul halaman

Kembali (Opsional)

  • Ini adalah objek atau string dengan Label yang akan mengontrol apa yang ditampilkan dalam teks tautan. Untuk informasi lebih lanjut, lihat ActionProps.

NoMatchFound (Opsional)

  • Ini adalah string yang menampilkan tombol yang ada di bawah Kartu. Untuk informasi lebih lanjut lihat ActionProps.

Contoh Data Masukan


{
    "AttributeBar": [{
            "Label": "Queue",
            "Value": "Sales"
        },
        {
            "Label": "Case ID",
            "Value": "1234567"
        },
        {
            "Label": "Case",
            "Value": "New reservation"
        },
        {
            "Label": "Attribute  3",
            "Value": "Attribute"
        }
    ],
    "Back": {
        "Label": "Back"
    },
    "Heading": "Customer may be contacting about...",
    "Cards": [{
              "Summary": {
                "Id": "lost_luggage",
                "Icon": "plus",
                "Heading": "Lost luggage claim"
              },
              "Detail": {
                "Heading": "Lost luggage claim",
                "Description": "Use this flow for customers that have lost their luggage and need to fill a claim in order to get reimbursement. This workflow usually takes 5-8 minutes",
                "Sections": {
                  "TemplateString": "<TextContent>Steps:<ol><li>Customer provides incident information</li><li>Customer provides receipts and agrees with amount</li><li>Customer receives reimbursement</li></ol></TextContent>"
                },
                "Actions": [
                  "Start a new claim",
                  "Something else"
                ]
              }
            },
            {
              "Summary": {
                "Id": "car_rental",
                "Icon": "Car Side View",
                "Heading": "Car rental - New York",
                "Status": "Upcoming Sept 17, 2022"
              },
              "Detail": {
                "Heading": "Car rental - New York",
                "Sections": {
                  "TemplateString": "<p>There is no additional information</p>"
                }
              }
            },
            {
              "Summary": {
                "Id": "trip_reservation",
                "Icon": "Suitcase",
                "Heading": "Trip to Mexico",
                "Status": "Upcoming Aug 15, 2022",
                "Description": "Flying from New York to Cancun, Mexico"
              },
              "Detail": {
                "Heading": "Trip to Mexico",
                "Sections": {
                  "TemplateString": "<p>There is no additional information</p>"
                }
              }
            },
            {
              "Summary": {
                "Id": "fligh_reservation",
                "Icon": "Airplane",
                "Heading": "Flight to France",
                "Status": "Upcoming Dec 5, 2022",
                "Description": "Flying from Miami to Paris, France"
              },
              "Detail": {
                "Heading": "Flight to France",
                "Sections": {
                  "TemplateString": "<p>There is no additional information</p>"
                }
              }
            },
            {
              "Summary": {
                "Id": "flight_refund",
                "Icon": "Wallet Closed",
                "Heading": "Refund flight to Atlanta",
                "Status": "Refunded July 10, 2022"
              },
              "Detail": {
                "Heading": "Refund trip to Atlanta",
                "Sections": {
                  "TemplateString": "<p>There is no additional information</p>"
                }
              }
            },
            {
              "Summary": {
                "Id": "book_experience",
                "Icon": "Hot Air Balloon",
                "Heading": "Book an experience",
                "Description": "Top experience for european travellers"
              },
              "Detail": {
                "Heading": "Book an experience",
                "Sections": {
                  "TemplateString": "<p>There is no additional information</p>"
                }
              }
            }],
    "NoMatchFound": {
        "Label": "Can't find match?"
    }

}

Contoh Data Keluaran


{
    Action: "ActionSelected",
    ViewResultData: {
        actionName: "Update the trip"
    }
}