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.

web_messenger_integration

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

web_messenger_integration

Primeiro, baixe a imagem abaixo em seu computador:

Adobe_AEP_logo

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

Adobe_AEP_logo

Por fim, clique em Carregar.

Adobe_AEP_logo

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.

web_messenger_integration

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:

ui_messenger_brand-crunch2

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.

web_messenger_integration

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

web_messenger_integration

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.

web_messenger_integration

Clique no botão Copiar link .

web_messenger_integration

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

web_messenger_integration

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 .

web_messenger_integration

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 .

vs_web-messanger-folder.png

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

demonstração

Digite o comando cd web-messenger e pressione enter.

demonstração

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

demonstração

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

demonstração

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.

demonstração

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

demonstração

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"

demonstração

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:

demonstração

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.

demonstração

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

demonstração

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:

demonstração

  • 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

s3_bucket-setpermissions

Role para baixo e clique em Criar bucket.

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

demonstração

Você verá isso.

demonstração

Clique em Carregar. Você verá isso:

s3_bundlefile-review

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

s3_bundlefile-overview

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).

demonstração

Role para baixo e clique em Carregar.

demonstração

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

demonstração

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 .

s3_bundlefile-overviewdetails

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:

demonstração

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

demonstração

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

demonstração

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.

demonstração

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

demonstração

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.

demonstração

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

demonstração

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

demonstraçã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!.

demonstração

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

demonstração

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

demonstração

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

demonstração

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.

demonstração

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).

demonstração

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

demonstração

Clique em Happy to!

demonstração

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

demonstração

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.

demonstração

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

Nesta página