20.6 Teste seu chatbot no site de demonstração

O widget de mensagem da Stackchat permite que você adicione seu robô Luma ao site de demonstração Luma. Nesta seção, você configurará a integração no Stackchat Studio, criará o projeto do site e adicionará o JavaScript ao seu site de demonstração Luma para ativar o bate-papo na Web em tempo real.

• Versão mais recente do Node.js instalada. Verifique se você está executando o Nó v12 ou superior
• Versão mais recente do Github para Desktop (ou sinta-se à vontade para usar a ferramenta de linha de comando Git, se preferir)
• Conta AWS S3 (ou outra solução de hospedagem de sua escolha) para hospedar seu javascript Luma Bot

20.6.1 Configurar o seu Web Messenger

Depois de conectado ao Stackchat, navegue até Bots no menu esquerdo, selecione o Luma Bot e pressione o botão Integrations (Integrações ) no menu do robô. Agora, clique no botão Gerenciar do Stackchat Web Messenger.

Você verá isso. Pressione o botão + ao lado da entrada no campo URL do Avatar padrão.

Primeiro, baixe a imagem abaixo em seu computador:

Em seguida, carregue-o na janela pop-up no Stackchat Studio:

Por fim, clique em Carregar.

Agora, faça o mesmo para o campo Ícone URL (ou simplesmente copie e cole o novo URL do campo anterior). Deixe os outros campos sozinhos.

Selecione a guia Marca e carregue a mesma imagem para o campo URL do ícone comercial (ou basta copiar e colar o URL do campo anterior).

Para os campos Cor da marca e Cor da conversa, use o valor F3793B. Para o campo Cor de ação, use o valor 26A9E0.

Agora você deve ter isto:

Selecione a guia Saudações ​​iniciais e adicione esse texto ao primeiro campo de mensagem:

Pronto para começar?

Em seguida, adicione esse texto ao primeiro campo Resposta rápida:
Vamos! 🚀

Se estiver curioso, abra o construtor de bots, edite sua CDML e faça uma busca pelo termo Vamos! 🚀. Você verá que ela foi configurada como uma palavra-chave no fluxo de boas-vindas . É aqui que o Luma Bot irá navegar pelos usuários se eles escolherem essa resposta rápida.

Clique em Atualizar integração para salvar suas alterações.

Após a conclusão do salvamento, abra o dispositivo de mensagem da Web e pré-visualização a marca Luma que agora é exibida!

No entanto, você verá que a resposta rápida configurada na guia Saudações ​​iniciais não é exibida. Isso ocorre porque ele só será visto por novos usuários.

Para testá-lo, clique no botão Visão geral no menu do robô e, em seguida, clique no botão Compartilhar na parte superior direita.

Clique no botão Copiar link .

Em seguida, abra uma nova janela cognito e cole o URL copiado.

Agora, sua saudação inicial de resposta rápida será exibida. Clique nele e veja como o seu Luma Bot o leva ao seu fluxo de boas-vindas .

Seu mensageiro da Web está pronto para ser incorporado ao seu site de demonstração Luma!

20.6.2 Adicionar o Web Messenger ao site de demonstração

Volte para seu editor de Código do Visual Studio.

Uma vez aberto, navegue até o .pasta /web-messenger .

Abra um terminal (Visualização -> Terminal).

Digite o comando cd web-messenger e pressione enter.

Execute o comando npm i para instalar as dependências do projeto.

Explore a pasta src do projeto. Esta é uma análise das duas pastas:

• luma-api: lógica para obter informações da marca Luma da API de demonstração
• mensageiro: lógica para instanciar o Web Messenger e personalizá-lo

Antes de criarmos e testarmos o projeto, a configuração precisa ser atualizada com a ID do aplicativo do seu robô.

Vá para o Stackchat Studio, navegue até seu Bot Luma e clique em Integrações no menu do robô. Clique no botão Gerenciar do Web Messenger.

Na tela do Web Messenger, copie a ID do aplicativo:

Agora, retorne ao código do Visual Studio, abra o arquivo de configuração: src/messenger/config.ts e adicione o valor da ID do aplicativo ao objeto de configuração na linha 4, certificando-se de que seja uma string, ou seja, entre aspas:

appId: null, // Replace this null value with your Luma bot's App Id! e.g "k9s9xxxxxx"

Neste exemplo, a ID do aplicativo é "ctduc8z4hn6x03", portanto, a linha atualizada 4 agora deve se parecer com:

appId: "ctduc8z4hn6x03", // Replace this null value with your Luma bot's App Id! e.g "k9s9xxxxxx"

Salve as alterações no arquivo de configuração. Agora você está pronto para construir e testar seu projeto. Abra seu terminal (Visualização -> Terminal) e execute o comando build:

npm run build

Este comando executa o Webpack, que foi configurado para compilar seu projeto TypeScript em um único arquivo JavaScript compatível com navegadores.
A compilação deve ser concluída com êxito:

Seu projeto agora terá uma pasta dist que foi gerada pelo Webpack. Ele conterá um arquivo chamado bundle.js. Você precisará hospedar esse arquivo na próxima etapa para que ele possa ser acessado pelo site de demonstração.

20.6.3 Hospedar seu arquivo JavaScript

Para colocar o Luma Bot no site de demonstração, é necessário hospedar o arquivo bundle.js em algum lugar e torná-lo acessível ao público. No Exercise 5.1 - Configure um bucket AWS S3 que você já configurou um bucket AWS que podemos aproveitar.

Faça logon na sua conta AWS S3: https://console.aws.amazon.com/s3. Como você precisa que esse arquivo esteja disponível publicamente, vamos criar um novo Bucket. Clique em Criar bucket.

Nomeie o bucket aepmodule20LDAP, por exemplo aepmodule20vangeluw , e escolha a região aplicável a você.

Role para baixo até ver Configurações de bucket para Bloquear acesso público.

• Desmarque a caixa de seleção para Bloquear todo o acesso público
• Marque a caixa de seleção para confirmar que as configurações atuais…

Você deve ter uma visualização semelhante agora:

• Clique em Avançar novamente para manter as configurações de Nome e Região como estão.
• Na seção Configurar opções , desmarque Bloquear todo o acesso público. Isso apresentará uma declaração de confirmação confirmando que qualquer item neste grupo pode ser acessível ao público. Marque a caixa para confirmar e clique em Avançar

Role para baixo e clique em Criar bucket.

Agora seu novo Bucket é criado, clique nele para abri-lo.

Você verá isso.

Clique em Carregar. Você verá isso:

Clique em Adicionar arquivos, navegue até o arquivo bundle.js e selecione-o.

Agora vocês veem isso. Role para baixo um mas até o campo Destino e marque a caixa de seleção em I accept that atual objects with the same name will be overwrite (Reconheço que objetos existentes com o mesmo nome serão substituídos).

Role para baixo e clique em Carregar.

Você verá isso. Clique no nome do arquivo bundle.js.

Agora você pode visualização os detalhes de visão geral do arquivo, incluindo um URL ​​de objeto. Copie este URL, pois ele será necessário na próxima etapa. Clique no botão Tornar público .

Agora você hospedou com êxito seu arquivo bundle.js . Na próxima etapa, é necessário colar o URL do objeto na tela Atualizar ID de configuração.

20.6.4 Atualizar a ID de configuração do site de demonstração

Para garantir que o site de demonstração carregue seu chatbot Luma, é necessário atualizar a ID de configuração do site de demonstração para incluir:

• URL JavaScript bundle.js do Stackchat que você acabou de criar por meio do bucket S3
• ID do Evento de Journey Orchestration para acionar a jornada configurada no Exercício 20.4.

Vá para a página https://public.aepdemo.net/admin_configuration_update.html em uma janela incognito nova e limpa. Você verá isso:

Insira a ID de configuração e pressione o botão Load Configuration (Carregar configuração ). Você terá isto:

Role para baixo até ver os campos EventID - Stackchat Journey e Stackchat Chatbot Tag.

Substitua o valor EventID - Stackchat Journey (que está vazio) por sua ID do Evento de orquestração que você criou no Exercise 20.4.1 e substitua o valor atual da tag Chatbot Stackchat pelo URL do objeto do arquivo hospedado bundle.js, que é o URL do objeto AWS S3 criado na etapa anterior.

Role para baixo e clique no botão Update Configuration ID (Atualizar ID de configuração). Agora você está pronto para testar!

20.6.5 Executar um cenário de demonstração

Go to https://public.aepdemo.net/. Digite a ID de configuração e clique em Carregar configuração. Em seguida, selecione seu LDAP e sua marca. Selecione a marca Luma.

Ao chegar à página inicial Luma, você verá seu chatbot sendo carregado e o ícone será exibido na parte inferior direita da tela.

Primeiro, vá para LOGIN/REGISTRAR, preencha suas informações pessoais e crie uma nova conta.

Em seguida, você verá que o chatbot está usando seu nome na chamada para ação:

Isso pode ser feito anexando informações do usuário aos metadados da mensagem no delegado beforeSend no arquivo helper.ts, para que o chatbot não precise solicitar informações que já conhecemos. Você pode saber mais sobre metadados de mensagem aqui.

Abra o widget de bate-papo e clique em Vamos!.

Você verá isso. Em seguida, selecione o item de menu Preciso de ideias .

Você verá que os produtos Luma são exibidos no chatbot.

Em seguida, pressione o botão ❤️ em alguns produtos para gerar eventos visualizados de produtos e para acionar sua jornada no Journey Orchestration.

Alguns segundos depois, você deve receber um email da Adobe Experience Platform e do Journey Orchestration com uma promoção para o item que acabou de gostar.

A próxima questão no chatbot é se você se importa em dar feedback sobre a sua experiência de bate-papo. Clique em Sure (Claro).

Faça sua escolha, neste caso a escolha é ótima.

Clique em Happy to!

Dê seus comentários detalhados adicionais e clique em Enviar.

Por fim, abra o painel de raios X e clique no botão atualizar. Você verá a visualização do seu produto aparecer no painel de raios X.

Seu chatbot do mensageiro da Web está funcionando bem. Vamos agora conectar seu chatbot ao Facebook Messenger.

Próxima etapa: 20.7 Conecte seu chatbot ao Facebook Messenger

Voltar ao módulo 20

Voltar para todos os módulos