Etapa 3: incorporar o URL generativo da experiência de perguntas e respostas

Na seção a seguir, você pode descobrir como incorporar o URL da experiência generativa de perguntas e respostas em seu site ou página de aplicativo. Você faz isso com o Amazon QuickSight embedding SDK ()JavaScript. Com o SDK, você pode fazer o seguinte:

• Coloque a experiência generativa de perguntas e respostas em uma página HTML.

• Personalize o layout e a aparência da experiência incorporada para atender às necessidades do seu aplicativo.

• Corrija os estados de erro com mensagens que são personalizados para seu aplicativo.

Para gerar o URL que você pode incorporar à aplicação, chame a operação de API GenerateEmbedUrlForAnonymousUser. Esse URL é válido por cinco minutos e a sessão resultante é válida por, no máximo, dez horas. A operação de API fornece ao URL um valor auth_code que possibilita uma sessão de logon único.

Veja a seguir uma resposta de exemplo de 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"
} 

Incorpore a experiência generativa de perguntas e respostas em sua página da web com o SDK QuickSight incorporado ou adicionando esse URL a um iframe. Se você definir um número fixo de altura e largura (em pixels), use-os QuickSight e não altere seu visual à medida que a janela é redimensionada. Se você definir uma porcentagem relativa de altura e largura, QuickSight fornece um layout responsivo que é modificado à medida que o tamanho da janela muda.

Certifique-se de que o domínio para hospedar a experiência de perguntas e respostas generativas esteja na lista de permissões, a lista de domínios aprovados para sua assinatura. QuickSight Esse requisito protege seus dados impedindo que domínios não aprovados hospedem experiências de perguntas e respostas generativas incorporadas. Para obter mais informações sobre a adição de domínios para uma experiência de perguntas e respostas generativas incorporada, consulte. Gerenciar domínios e incorporação

Você pode usar o SDK QuickSight de incorporação para personalizar o layout e a aparência da experiência de perguntas e respostas generativas incorporada de acordo com seu aplicativo. Use a panelType propriedade para configurar o estado inicial da experiência generativa de perguntas e respostas quando ela é renderizada em seu aplicativo. Defina a panelType propriedade como para 'FULL' renderizar o painel completo da experiência de perguntas e respostas generativas. Esse painel se assemelha à experiência que QuickSight os usuários têm no console. A altura do quadro do painel não é alterada com base na interação do usuário e respeita o valor definido na frameOptions.height propriedade. A imagem abaixo mostra o painel de experiência generativa de perguntas e respostas que é renderizado quando você define o valor como. panelType 'FULL'

Defina a panelType propriedade como 'SEARCH_BAR' para renderizar a experiência generativa de perguntas e respostas como uma barra de pesquisa. Essa barra de pesquisa se assemelha à forma como a Barra de Pesquisa Q é renderizada quando é incorporada a um aplicativo. A barra de pesquisa de perguntas e respostas generativas se expande para um painel maior que exibe as opções de seleção de tópicos, a lista de sugestões de perguntas, o painel de respostas ou o quadro de avisos.

A altura mínima padrão da barra de pesquisa de perguntas e respostas generativas é renderizada quando o ativo incorporado é carregado. É recomendável que você defina o frameOptions.height valor para otimizar "38px" a experiência da barra de pesquisa. Use a focusedHeight propriedade para definir o tamanho ideal do menu suspenso de seleção de tópicos e da lista de sugestões de perguntas. Use a expandedHeight propriedade para definir o tamanho ideal do painel de respostas e do quadro de avisos. Se você escolher a 'SEARCH_BAR' opção, é recomendável estilizar o contêiner principal com position; absolute para evitar a mudança indesejada de conteúdo em seu aplicativo. A imagem abaixo mostra a barra de pesquisa da experiência generativa de perguntas e respostas que é renderizada quando você define o valor como. panelType 'SEARCH_BAR'

Depois de configurar a panelType propriedade, use o SDK de QuickSight incorporação para personalizar as seguintes propriedades da experiência generativa de perguntas e respostas.

• O título do painel de perguntas e respostas generativas (aplica-se somente à panelType: FULL opção).

• O texto do espaço reservado da barra de pesquisa.

• Se a seleção de tópicos é permitida.

• Se os nomes dos tópicos são exibidos ou ocultos.

• Se o ícone Amazon Q está exibido ou oculto (aplica-se somente à panelType: FULL opção).

• Se o quadro de avisos está visível ou oculto.

• Se os usuários podem maximizar o painel Generative de perguntas e respostas para tela cheia.

• O tema do painel de perguntas e respostas generativas. Um ARN de tema personalizado pode ser passado no SDK para alterar a aparência do conteúdo do quadro.

Quando você usa o SDK de QuickSight incorporação, a experiência generativa de perguntas e respostas em sua página é redimensionada dinamicamente com base no estado. Com o SDK QuickSight de incorporação, você também pode controlar os parâmetros na experiência generativa de perguntas e respostas e receber retornos de chamada em termos de conclusão do carregamento da página, alterações de estado e erros.

O exemplo a seguir mostra como usar o URL gerado. Este código é gerado no seu servidor de aplicações.

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 esse exemplo funcione, certifique-se de usar o Amazon QuickSight Embedding SDK para carregar a experiência de perguntas e respostas generativas incorporada em seu site com. JavaScript Para obter sua cópia, siga um destes procedimentos:

• Baixe o SDK de QuickSight incorporação da Amazon em. GitHub Esse repositório é mantido por um grupo de QuickSight desenvolvedores.

• Baixe a versão mais recente do SDK incorporado em https://www.npmjs.com/package/. amazon-quicksight-embedding-sdk

• Se você usa npm para JavaScript dependências, faça o download e instale-o executando o comando a seguir.

  npm install amazon-quicksight-embedding-sdk