View a markdown version of this page

Penyiapan AWS tampilan terkelola untuk ruang kerja agen di Connect Customer - Pelanggan Amazon Connect

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

Penyiapan AWS tampilan terkelola untuk ruang kerja agen di Connect Customer

Connect Customer menyertakan sekumpulan tampilan yang dapat Anda tambahkan ruang kerja agen Anda. Lihat berikut untuk detail tentang cara mengonfigurasi tampilan terkel AWS ola yang berbeda.

Detail view

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

  • Tindakan dalam tampilan ini dapat digunakan untuk membiarkan agen melanjutkan ke langkah berikutnya dalam panduan langkah demi langkah 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 AttributeBar didukung 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 selengkapnya, lihat TemplateString atau 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, Dapat Dis alin dan Url. Untuk informasi selengkapnya lihat, A tribut.

    • LinkTypedapat berupa aplikasi eksternal atau menghubungkan seperti case.

      • Ketika eksternal, pengguna dapat menavigasi ke halaman browser baru, yang dikonfigurasi dengan Ur l.

      • Jika ada kasus, pengguna dapat menavigasi ke detail kasus baru di ruang kerja Agen, yang dikonfigurasi dengan 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 kembali.

  • 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 teks deskripsi 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

T ampilan Daftar adalah untuk menampilkan informasi sebagai daftar item dengan judul dan deskripsi. Item juga dapat bertindak sebagai tautan dengan tindakan terlampir. Ini juga secara opsional mendukung navigasi kembali 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

  • Diperlukan, akan menampilkan item ini sebagai daftar.

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

    • Semua properti bersifat 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, Dapat Dis alin dan Url. Untuk informasi selengkapnya lihat, A tribut.

    • LinkTypedapat berupa aplikasi eksternal atau menghubungkan seperti case.

      • Ketika eksternal, pengguna dapat menavigasi ke halaman browser baru, yang dikonfigurasi dengan Ur l.

      • Jika ada kasus, pengguna dapat menavigasi ke detail kasus baru di ruang kerja Agen, yang dikonfigurasi dengan 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 kembali.

  • 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

Dengan tampilan Formulir, Anda dapat menyediakan kolom input kepada agen Anda 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 grid.

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 Formu lir tempat bidang input dan bidang tampilan berada.

  • SectionProps

    • Judul

      • Judul bagian

    • Jenis

      • Jenis bagian

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

    • Barang

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

    • Dapat diedit

      • Tampilkan tombol edit di header saat disediakan saat jenis bagian adaDataSection.

      • Boolean

Wizard (Opsional)

  • Tampilan ProgressTracker di sisi kiri tampilan.

  • Setiap item mungkin memiliki Heading, 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 tersebut bukan langkah terakhir dalam langkah.

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

Batalkan (Opsional)

  • Tindakan ini digunakan ketika langkah tersebut bukan langkah pertama.

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

Sebelumnya (Opsional)

  • Tindakan ini digunakan ketika langkah tersebut bukan langkah pertama.

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

Sunting (Opsional)

  • Tindakan ini ditampilkan ketika tipe bagian adalahDataSection.

  • Adalah objek (FormActionProps) atau string. Untuk informasi selengkapnya, 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, Dapat Dis alin dan Url. Untuk informasi selengkapnya lihat, A tribut.

    • LinkTypedapat berupa aplikasi eksternal atau menghubungkan seperti case.

      • Ketika eksternal, pengguna dapat menavigasi ke halaman browser baru, yang dikonfigurasi dengan Ur l.

      • Jika ada kasus, pengguna dapat menavigasi ke detail kasus baru di ruang kerja Agen, yang dikonfigurasi dengan 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

T ampilan Konfirmasi adalah halaman untuk menampilkan pengguna setelah formulir dikirimkan atau tindakan telah diselesaikan. Dalam template pra-build ini, Anda dapat memberikan ringkasan tentang apa yang telah terjadi, langkah selanjutnya, dan petunjuk. T ampilan Kon firmasi mendukung bilah atribut persisten, an icon/image, judul, dan sub-judul, bersama dengan tombol navigasi kembali ke beranda.

Dokumentasi interaktif untuk tampilan Konfirmasi

Gambar berikut menunjukkan contoh konfirmasi.

Tampilan konfirmasi, tanda centang dan teks untuk mengkonfirmasi sewa 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, Dapat Dis alin dan Url. Untuk informasi selengkapnya lihat, A tribut.

    • LinkTypedapat berupa aplikasi eksternal atau menghubungkan seperti case.

      • Ketika eksternal, pengguna dapat menavigasi ke halaman browser baru, yang dikonfigurasi dengan Ur l.

      • Jika ada kasus, pengguna dapat menavigasi ke detail kasus baru di ruang kerja Agen, yang dikonfigurasi dengan 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": {
        "actionName": "Next",
        "Label": "Go Home"
    }
}
Cards view

Dengan tampilan Kartu, Anda dapat memandu agen Anda dengan memberi mereka daftar topik untuk dipilih segera setelah mereka menerima kontak.

Dokumentasi interaktif untuk tampilan Kartu

Berikan 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 mendatang.

Satu set enam kartu.

Ketika agen memilih kartu, informasi 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, Dapat Dis alin dan Url. Untuk informasi selengkapnya, lihat A tribut.

    • LinkTypedapat berupa aplikasi eksternal atau menghubungkan seperti case.

      • Ketika eksternal, pengguna dapat menavigasi ke halaman browser baru, yang dikonfigurasi dengan Ur l.

      • Jika ada kasus, pengguna dapat menavigasi ke detail kasus baru di ruang kerja Agen, yang dikonfigurasi dengan 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 selengkapnya, lihat ActionProps.

NoMatchFound (Opsional)

  • Ini adalah string yang ditampilkan untuk tombol yang ada di bawah Kartu. Untuk mengetahui informasi selengkapnya, 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 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"
    }
}