Paso 3: Inserte la URL de la experiencia de preguntas y respuestas generativas

En la siguiente sección, encontrarás información sobre cómo insertar la URL de la experiencia de preguntas y respuestas generativas en tu sitio web o en la página de tu aplicación. Esto se hace con el SDK de QuickSight incrustación de Amazon (JavaScript). Con el SDK, puede hacer lo siguiente:

• Coloca la experiencia de preguntas y respuestas generativas en una página HTML.

• Personalice el diseño y la apariencia de la experiencia integrada para adaptarla a las necesidades de su aplicación.

• Resolver los estados de error con mensajes que se personalizan en su aplicación.

Llame a la operación de la API GenerateEmbedUrlForRegisteredUser para generar la dirección URL que puede integrar en la aplicación. Esta URL es válida durante 5 minutos, y la sesión resultante es válida hasta 10 horas. La operación de la API proporciona la URL con un valor auth_code que permite una sesión con inicio único.

El siguiente es un ejemplo de respuesta de generate-embed-url-for-registered-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"
}

Incorpore la experiencia de preguntas y respuestas generativas en su página web mediante el SDK de QuickSight incrustación o añadiendo esta URL a un iframe. Si estableces un número fijo de altura y anchura (en píxeles), QuickSight úsalos y no cambiará la imagen a medida que cambie el tamaño de la ventana. Si estableces un porcentaje relativo de altura y anchura, QuickSight proporciona un diseño adaptable que se modifica a medida que cambia el tamaño de la ventana.

Asegúrese de que el dominio en el que se alojará la experiencia de preguntas y respuestas generativas integrada esté en la lista de dominios permitidos, la lista de dominios aprobados para su suscripción. QuickSight Este requisito protege los datos impidiendo que dominios no aprobados alojen paneles integrados. Para obtener más información sobre cómo añadir dominios para una experiencia de preguntas y respuestas generativas integrada, consulte. Administración de dominios e integración

Puede usar el SDK de QuickSight incrustación para personalizar el diseño y la apariencia de la experiencia de preguntas y respuestas generativas integrada para adaptarla a su aplicación. Utilice la panelType propiedad para configurar el estado inicial de la experiencia de preguntas y respuestas generativas cuando se muestre en su aplicación. Establezca la panelType propiedad en para mostrar el panel completo 'FULL' de la experiencia de preguntas y respuestas generativas. Este panel se parece a la experiencia que tienen QuickSight los usuarios en la consola. La altura del marco del panel no cambia en función de la interacción del usuario y respeta el valor establecido en la frameOptions.height propiedad. La siguiente imagen muestra el panel de experiencia generativa de preguntas y respuestas que se muestra cuando se establece el valor en. panelType 'FULL'

Establezca la panelType propiedad en 'SEARCH_BAR' para representar la experiencia de preguntas y respuestas generativas como una barra de búsqueda. Esta barra de búsqueda se parece a la forma en que se representa la barra de búsqueda Q cuando está integrada en una aplicación. La barra de búsqueda generativa de preguntas y respuestas se expande hasta convertirse en un panel más grande que muestra las opciones de selección de temas, la lista de sugerencias de preguntas, el panel de respuestas o el tablón de anuncios.

La altura mínima predeterminada de la barra de búsqueda de preguntas y respuestas generativas se muestra cuando se carga el recurso integrado. Se recomienda establecer el frameOptions.height valor en para optimizar la experiencia de "38px" la barra de búsqueda. Utilice la focusedHeight propiedad para establecer el tamaño óptimo del menú desplegable de selección de temas y de la lista de sugerencias de preguntas. Utilice la expandedHeight propiedad para establecer el tamaño óptimo del panel de respuestas y del tablón de anuncios. Si elige 'SEARCH_BAR' esta opción, se recomienda diseñar el contenedor principal con una posición (absoluta) para evitar que el contenido no deseado se desplace en la aplicación. La siguiente imagen muestra la barra de búsqueda de experiencias generativas de preguntas y respuestas que aparece cuando se establece el valor en. panelType 'SEARCH_BAR'

Tras configurar la panelType propiedad, utilice el SDK de QuickSight incrustación para personalizar las siguientes propiedades de la experiencia de preguntas y respuestas generativas.

• El título del panel de preguntas y respuestas generativas (solo se aplica a la opción). panelType: FULL

• El texto del marcador de posición de la barra de búsqueda.

• Si se permite la selección de temas.

• Si los nombres de los temas se muestran o se ocultan.

• Si se muestra o se oculta el icono de Amazon Q (solo se aplica a la panelType: FULL opción).

• Si el tablón de anuncios se muestra o se oculta.

• Si los usuarios pueden maximizar el panel de preguntas y respuestas generativas a pantalla completa.

• El tema del panel de preguntas y respuestas generativas. Se puede pasar un ARN de tema personalizado al SDK para cambiar la apariencia del contenido del marco.

Cuando utilizas el SDK de QuickSight incrustación, la experiencia de preguntas y respuestas generativas de tu página cambia de tamaño de forma dinámica en función del estado. Al utilizar el SDK de QuickSight incrustación, también puedes controlar los parámetros de la experiencia de preguntas y respuestas generativas y recibir llamadas en caso de que se complete la carga de la página, de los cambios de estado y de los errores.

En el siguiente ejemplo, se muestra cómo utilizar la URL generada. Este código se genera en el servidor de aplicaciones.

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>

Para que este ejemplo funcione, asegúrate de utilizar el SDK de Amazon QuickSight Embedding para cargar la experiencia de preguntas y respuestas generativas integrada en tu sitio web. JavaScript Para obtener su copia, siga uno de estos pasos:

• Descarga el SDK de QuickSight incrustación de Amazon desde GitHub. Este repositorio lo mantiene un grupo de QuickSight desarrolladores.

• Descargue la última versión del SDK de incrustación desde https://www.npmjs.com/package/ amazon-quicksight-embedding-sdk.

• Si lo usas npm para JavaScript dependencias, descárgalo e instálalo ejecutando el siguiente comando.

  npm install amazon-quicksight-embedding-sdk