Schritt 3: Betten Sie die Generative Q&A-Erlebnis-URL ein

Im folgenden Abschnitt erfahren Sie, wie Sie die URL für das Generative Q&A-Erlebnis in Ihre Website oder Anwendungsseite einbetten können. Sie tun dies mit dem Amazon QuickSight Embedding SDK (JavaScript). Mit dem SDK können Sie folgende Aktionen ausführen:

• Platzieren Sie das Generative Q&A-Erlebnis auf einer HTML-Seite.

• Passen Sie das Layout und das Erscheinungsbild des eingebetteten Erlebnisses an Ihre Anwendungsanforderungen an.

• Umgang mit Fehlerstatus mit Meldungen, die an Ihre Anwendung angepasst wurden.

Rufen Sie die GenerateEmbedUrlForAnonymousUser-API-Operation auf, um die URL zu generieren, die Sie in Ihre App einbetten können. Diese URL ist für 5 Minuten gültig, die resultierende Sitzung für bis zu 10 Stunden. Die API-Operation stellt die URL mit einem auth_code-Wert bereit, der eine Single-Sign-On-Sitzung unterstützt.

Es folgt eine Beispielantwort von generate-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"
} 

Binden Sie das Generative Q&A-Erlebnis mit dem QuickSighteingebetteten SDK in Ihre Webseite ein oder fügen Sie diese URL in einen Iframe ein. Wenn du eine feste Zahl für Höhe und Breite (in Pixeln) festlegst, werden diese QuickSight verwendet und deine visuelle Darstellung nicht geändert, wenn sich die Größe deines Fensters ändert. Wenn Sie Höhe und Breite in Prozent angeben, QuickSight erhalten Sie ein responsives Layout, das sich an die Fenstergröße anpasst.

Vergewissern Sie sich, dass die Domain, auf der das Generative Q&A-Erlebnis gehostet werden soll, auf der Zulassungsliste steht, der Liste der für Ihr QuickSight Abonnement zugelassenen Domains. Diese Anforderung schützt Ihre Daten, indem sie verhindert, dass nicht genehmigte Domains eingebettete Generative Q&A-Erlebnisse hosten. Weitere Informationen zum Hinzufügen von Domains für ein eingebettetes generatives Q&A-Erlebnis finden Sie unter. Verwaltung und Einbettung von Domains

Sie können das QuickSight Embedding SDK verwenden, um das Layout und das Erscheinungsbild des eingebetteten Generative Q&A-Erlebnisses an Ihre Anwendung anzupassen. Verwenden Sie die panelType Eigenschaft, um den Startstatus des generativen Q&A-Erlebnisses zu konfigurieren, wenn es in Ihrer Anwendung gerendert wird. Stellen Sie die panelType Eigenschaft auf ein, 'FULL' um das gesamte Generative Q&A-Erlebnisfenster zu rendern. Dieses Panel ähnelt der Erfahrung, die QuickSight Benutzer in der Konsole haben. Die Rahmenhöhe des Panels wird aufgrund der Benutzerinteraktion nicht geändert und entspricht dem Wert, den Sie in der frameOptions.height Eigenschaft festgelegt haben. Die Abbildung unten zeigt das Generative Q&A-Erlebnisfenster, das gerendert wird, wenn Sie den panelType Wert auf setzen. 'FULL'

Stellen Sie die panelType Eigenschaft auf ein, 'SEARCH_BAR' um das Generative Q&A-Erlebnis als Suchleiste zu rendern. Diese Suchleiste ähnelt der Art und Weise, wie die Q-Suchleiste gerendert wird, wenn sie in eine Anwendung eingebettet ist. Die generative Q&A-Suchleiste wird zu einem größeren Bereich erweitert, in dem Optionen zur Themenauswahl, die Liste mit Fragenvorschlägen, das Antwortfeld oder die Pinnwand angezeigt werden.

Die standardmäßige Mindesthöhe der Generative Q&A-Suchleiste wird gerendert, wenn das eingebettete Asset geladen wird. Es wird empfohlen, den frameOptions.height Wert auf festzulegen, "38px" um die Darstellung der Suchleiste zu optimieren. Verwenden Sie die focusedHeight Eigenschaft, um die optimale Größe der Dropdownliste zur Themenauswahl und der Liste mit den Fragenvorschlägen festzulegen. Verwenden Sie die expandedHeight Eigenschaft, um die optimale Größe des Antwortfensters und der Pinnwand festzulegen. Wenn Sie 'SEARCH_BAR' diese Option wählen, wird empfohlen, den übergeordneten Container mit Position; Absolute zu formatieren, um unerwünschte Inhaltsverschiebungen in Ihrer Anwendung zu vermeiden. Die Abbildung unten zeigt die Generative Q&A-Suchleiste, die gerendert wird, wenn Sie den panelType Wert auf setzen. 'SEARCH_BAR'

Nachdem Sie die panelType Eigenschaft konfiguriert haben, verwenden Sie das QuickSight eingebettete SDK, um die folgenden Eigenschaften des Generative Q&A-Erlebnisses anzupassen.

• Der Titel des Generative Q&A-Panels (Gilt nur für die panelType: FULL Option).

• Der Platzhaltertext der Suchleiste.

• Ob die Themenauswahl zulässig ist.

• Ob Themennamen ein- oder ausgeblendet werden.

• Ob das Amazon Q-Symbol ein- oder ausgeblendet ist (Gilt nur für die panelType: FULL Option).

• Ob die Pinnwand ein- oder ausgeblendet ist.

• Gibt an, ob Benutzer das Generative Q&A-Panel auf den Vollbildmodus maximieren können.

• Das Thema des Generative Q&A-Panels. Ein benutzerdefinierter Theme-ARN kann im SDK übergeben werden, um das Erscheinungsbild des Frame-Inhalts zu ändern.

Wenn Sie das QuickSight Embedding SDK verwenden, wird die Größe des generativen Q&A-Erlebnisses auf Ihrer Seite je nach Status dynamisch angepasst. Mit dem QuickSight Embedding SDK können Sie auch Parameter innerhalb des Generativen Q&A-Erlebnisses steuern und Rückrufe in Bezug auf den Abschluss des Seitenladevorgangs, Statusänderungen und Fehler erhalten.

Im folgenden Beispiel wird gezeigt, wie Sie die generierte URL nutzen. Dieser Code wird auf Ihrem App-Server generiert.

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>

Damit dieses Beispiel funktioniert, stellen Sie sicher, dass Sie das Amazon QuickSight Embedding SDK verwenden, um das eingebettete Generative Q&A-Erlebnis auf Ihre Website zu laden. JavaScript Führen Sie für den Erhalt dieser Kopie einen der folgenden Schritte aus:

• Laden Sie das Amazon QuickSight Embedding SDK von GitHub herunter. Dieses Repository wird von einer Gruppe von QuickSight Entwicklern verwaltet.

• Laden Sie die neueste Version des Embedded SDK von https://www.npmjs.com/package/ amazon-quicksight-embedding-sdk herunter.

• Wenn Sie npm for JavaScript dependencies verwenden, laden Sie es herunter und installieren Sie es, indem Sie den folgenden Befehl ausführen.

  npm install amazon-quicksight-embedding-sdk