Langkah 3: Sematkan URL pengalaman Tanya Jawab Generatif

Di bagian berikut, Anda dapat menemukan cara menyematkan URL pengalaman Tanya Jawab Generatif di situs web atau halaman aplikasi Anda. Anda melakukan ini dengan Amazon QuickSight embedding SDK ()JavaScript. Dengan SDK, Anda dapat melakukan hal berikut:

• Tempatkan pengalaman Tanya Jawab Generatif pada halaman HTML.

• Sesuaikan tata letak dan tampilan pengalaman yang disematkan agar sesuai dengan kebutuhan aplikasi Anda.

• Menangani status kesalahan dengan pesan yang disesuaikan dengan aplikasi Anda.

Untuk membuat URL yang dapat disematkan di aplikasi, panggil operasi GenerateEmbedUrlForAnonymousUser API. URL ini berlaku selama 5 menit, dan sesi yang dihasilkan berlaku hingga 10 jam. Operasi API menyediakan URL dengan auth_code nilai yang memungkinkan sesi masuk tunggal.

Berikut ini menunjukkan contoh respons darigenerate-embed-url-for-anonymous-user.

//The URL returned is over 900 characters. For this example, we've shortened the string for
//readability and added ellipsis to indicate that it's incomplete.{
     "Status": "200",
     "EmbedUrl": "https://quicksightdomain/embedding/12345/q/search...",
     "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
} 

Sematkan pengalaman Tanya Jawab Generatif di halaman web Anda dengan QuickSightmenyematkan SDK atau dengan menambahkan URL ini ke dalam iframe. Jika Anda menetapkan nomor tinggi dan lebar tetap (dalam piksel), QuickSight gunakan itu dan tidak mengubah visual Anda saat jendela Anda mengubah ukuran. Jika Anda menetapkan tinggi dan lebar persen relatif, QuickSight berikan tata letak responsif yang dimodifikasi saat ukuran jendela Anda berubah.

Pastikan bahwa domain untuk meng-host pengalaman Tanya Jawab Generatif ada di daftar izinkan, daftar domain yang disetujui untuk langganan Anda. QuickSight Persyaratan ini melindungi data Anda dengan menjaga domain yang tidak disetujui dari hosting pengalaman Tanya Jawab Generatif yang disematkan. Untuk informasi selengkapnya tentang menambahkan domain untuk pengalaman Tanya Jawab Generatif yang disematkan, lihat. Mengelola domain dan menyematkan

Anda dapat menggunakan QuickSight Embedding SDK untuk menyesuaikan tata letak dan tampilan pengalaman Tanya Jawab Generatif yang disematkan agar sesuai dengan aplikasi Anda. Gunakan panelType properti untuk mengonfigurasi status pendaratan pengalaman Tanya Jawab Generatif saat dirender dalam aplikasi Anda. Atur panelType properti 'FULL' untuk membuat panel pengalaman Tanya Jawab Generatif lengkap. Panel ini menyerupai pengalaman yang dimiliki QuickSight pengguna di konsol. Tinggi bingkai panel tidak berubah berdasarkan interaksi pengguna dan menghormati nilai yang Anda tetapkan di frameOptions.height properti. Gambar di bawah ini menunjukkan panel pengalaman Tanya Jawab Generatif yang dirender saat Anda menyetel nilainya. panelType 'FULL'

Atur panelType properti 'SEARCH_BAR' untuk membuat pengalaman Tanya Jawab Generatif sebagai bilah pencarian. Bilah pencarian ini menyerupai cara Q Search Bar ditampilkan ketika disematkan ke dalam aplikasi. Bilah pencarian Tanya Jawab Generatif meluas ke panel yang lebih besar yang menampilkan opsi pemilihan topik, daftar saran pertanyaan, panel jawaban, atau papan pin.

Tinggi minimum default dari bilah penelusuran Tanya Jawab Generatif dirender saat aset yang disematkan dimuat. Disarankan agar Anda menetapkan frameOptions.height nilai "38px" untuk mengoptimalkan pengalaman bilah pencarian. Gunakan focusedHeight properti untuk mengatur ukuran optimal dropdown pemilihan topik dan daftar saran pertanyaan. Gunakan expandedHeight properti untuk mengatur ukuran optimal panel jawaban dan pinboard. Jika Anda memilih 'SEARCH_BAR' opsi, disarankan agar Anda menata wadah induk dengan posisi; mutlak untuk menghindari pergeseran konten yang tidak diinginkan dalam aplikasi Anda. Gambar di bawah ini menunjukkan bilah pencarian pengalaman Tanya Jawab Generatif yang dirender saat Anda menyetel nilainya. panelType 'SEARCH_BAR'

Setelah mengonfigurasi panelType properti, gunakan SDK QuickSight penyematan untuk menyesuaikan properti berikut dari pengalaman Tanya Jawab Generatif.

• Judul panel Tanya Jawab Generatif (Berlaku hanya untuk opsi). panelType: FULL

• Teks placeholder bilah pencarian.

• Apakah pemilihan topik diperbolehkan.

• Apakah nama topik ditampilkan atau disembunyikan.

• Apakah ikon Amazon Q ditampilkan atau disembunyikan (Berlaku hanya untuk panelType: FULL opsi).

• Apakah pinboard ditampilkan tersembunyi.

• Apakah pengguna dapat memaksimalkan panel T&J Genertaive ke layar penuh.

• Tema panel Tanya Jawab Generatif. Tema khusus ARN dapat diteruskan di SDK untuk mengubah tampilan konten frame.

Saat Anda menggunakan QuickSight Embedding SDK, pengalaman Tanya Jawab Generatif di halaman Anda diubah ukurannya secara dinamis berdasarkan status. Dengan QuickSight Embedding SDK, Anda juga dapat mengontrol parameter dalam pengalaman Tanya Jawab Generatif dan menerima panggilan balik dalam hal penyelesaian pemuatan halaman, perubahan status, dan kesalahan.

Contoh berikut menunjukkan cara menggunakan URL yang dihasilkan. Kode ini dibuat di server aplikasi Anda.

SDK 2.0

<!DOCTYPE html>
<html>
    <head>
        <title>Generative Q&A Embedding Example</title>
        <script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.7.0/dist/quicksight-embedding-js-sdk.min.js"></script>
        <script type="text/javascript">
            const embedGenerativeQnA = async() => {    
                const {createEmbeddingContext} = QuickSightEmbedding;

                const embeddingContext = await createEmbeddingContext({
                    onChange: (changeEvent, metadata) => {
                        console.log('Context received a change', changeEvent, metadata);
                    },
                });

                const frameOptions = {
                    url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
                    container: '#experience-container',
                    height: "700px",
                    width: "1000px",
                    onChange: (changeEvent, metadata) => {
                        switch (changeEvent.eventName) {
                            case 'FRAME_MOUNTED': {
                                console.log("Do something when the experience frame is mounted.");
                                break;
                            }
                            case 'FRAME_LOADED': {
                                console.log("Do something when the experience frame is loaded.");
                                break;
                            }
                        }
                    },
                };

                const contentOptions = {
                    // Optional panel settings. Default behavior is equivalent to {panelType: 'FULL'}
                    panelOptions: {
                        panelType: 'FULL',
                        title: 'custom title', // Optional
                        showQIcon: false, // Optional, Default: true
                    },
                    // Use SEARCH_BAR panel type for the landing state to be similar to embedQSearchBar
                    // with generative capability enabled topics
                    /*
                    panelOptions: {
                        panelType: 'SEARCH_BAR',
                        focusedHeight: '250px',
                        expandedHeight: '500px',
                    },
                    */
                    showTopicName: false, // Optional, Default: true
                    showPinboard: false, // Optional, Default: true
                    allowTopicSelection: false, // Optional, Default: true
                    allowFullscreen: false, // Optional, Default: true
                    searchPlaceholderText: "custom search placeholder", // Optional
                    themeOptions: { // Optional
                        themeArn: 'arn:aws:quicksight:<Region>:<AWS-Account-ID>:theme/<Theme-ID>'
                    }
                    onMessage: async (messageEvent, experienceMetadata) => {
                        switch (messageEvent.eventName) {
                            case 'Q_SEARCH_OPENED': {
                                // called when pinboard is shown / visuals are rendered
                                console.log("Do something when SEARCH_BAR type panel is expanded");
                                break;
                            }
                            case 'Q_SEARCH_FOCUSED': {
                                // called when question suggestions or topic selection dropdown are shown
                                console.log("Do something when SEARCH_BAR type panel is focused");
                                break;
                            }
                            case 'Q_SEARCH_CLOSED': {
                                // called when shrinked to initial bar height
                                console.log("Do something when SEARCH_BAR type panel is collapsed");
                                break;
                            }
                            case 'Q_PANEL_ENTERED_FULLSCREEN': {
                                console.log("Do something when panel enters full screen mode");
                                break;
                            }
                            case 'Q_PANEL_EXITED_FULLSCREEN': {
                                console.log("Do something when panel exits full screen mode");
                                break;
                            }
                            case 'CONTENT_LOADED': {
                                console.log("Do something after experience is loaded");
                                break;
                            }
                            case 'ERROR_OCCURRED': {
                                console.log("Do something when experience fails to load");
                                break;
                            }
                        }
                    }
                };
                const embeddedGenerativeQnExperience = await embeddingContext.embedGenerativeQnA(frameOptions, contentOptions);
            };
        </script>
    </head>

    <body onload="embedGenerativeQnA()">
        <div id="experience-container"></div>
    </body>

</html>

Agar contoh ini berfungsi, pastikan untuk menggunakan Amazon QuickSight Embedding SDK untuk memuat pengalaman Tanya Jawab Generatif yang disematkan di situs web Anda. JavaScript Untuk mendapatkan salinan Anda, lakukan salah satu hal berikut:

• Unduh SDK QuickSight penyematan Amazon dari. GitHub Repositori ini dikelola oleh sekelompok pengembang. QuickSight

• Unduh versi SDK penyematan terbaru dari https://www.npmjs.com/package/. amazon-quicksight-embedding-sdk

• Jika Anda menggunakan npm untuk JavaScript dependensi, unduh dan instal dengan menjalankan perintah berikut.

  npm install amazon-quicksight-embedding-sdk