20.6 Testare il vostro chatbot sul sito web demo

Stackchat widget messaggio web consente di aggiungere il bot Luma al sito dimostrativo Luma. In questa sezione, configurerai l’integrazione in Stackchat Studio, creerai il progetto del sito web e quindi aggiungi JavaScript al tuo sito dimostrativo Luma per abilitare la chat web in tempo reale.

  • Versione più recente di Node.js installato. Assicurati di eseguire Node v12 o versione successiva
  • Versione più recente di Github per desktop (o puoi usare liberamente lo strumento della riga di comando Git, se lo desideri)
  • Account AWS S3 (o altra soluzione di hosting a tua scelta) per ospitare il tuo JavaScript Luma Bot

20.6.1 Configura il tuo Web Messenger

Una volta effettuato l'accesso a Stackchat, accedi a Bots nel menu a sinistra, seleziona il tuo bot Luma e premi il pulsante Integrazioni sul vostro menu bot. Ora fai clic su Gestisci pulsante per Stackchat Web Messenger.

web_messenger_integration

Vedrete questo. Hit + accanto all'ingresso URL avatar predefinito campo .

web_messenger_integration

Scarica prima l'immagine seguente sul tuo computer:

Adobe_AEP_logo

Quindi caricalo nella finestra a comparsa in Stackchat Studio:

Adobe_AEP_logo

Infine, fai clic su Carica.

Adobe_AEP_logo

Ora fai lo stesso per il campo URL icona pulsante (o semplicemente copia e incolla il nuovo URL dal campo precedente). Lasciare in pace gli altri campi.

web_messenger_integration

Seleziona la Brand e carica la stessa immagine per il campo URL icona business (o semplicemente copia e incolla l’URL dal campo precedente).

Per i campi Colore marchio e Colore conversazione, utilizza il valore F3793B. Per il campo Colore azione, utilizzare il valore 26A9E0.

Ora dovresti avere questo:

ui_messenger_brand-crunch2

Seleziona la Saluti iniziali e aggiungi questo testo al primo campo messaggio:

Pronti per iniziare?

Quindi aggiungi questo testo al primo campo Risposta rapida:
Andiamo! ?

Se sei curioso, apri il generatore di bot, modifica il CDML ed esegui una ricerca del termine Andiamo! ?. Vedrai che è stato configurato come parola chiave nel Benvenuto flusso. Qui è dove Luma Bot naviga gli utenti se scelgono questa risposta rapida.

Fai clic su Aggiorna integrazione per salvare le modifiche.

web_messenger_integration

Una volta completato il salvataggio, apri il widget web messenger e visualizza in anteprima il branding Luma ora visualizzato.

web_messenger_integration

Tuttavia, vedrai che la risposta rapida configurata nel Saluti iniziali la scheda non viene visualizzata. Questo perché verrà visualizzato solo dai nuovi utenti.

Per eseguire il test, fai clic sul pulsante Panoramica dal menu bot, quindi fai clic su Condividi in alto a destra.

web_messenger_integration

Fai clic sul pulsante Copia collegamento pulsante .

web_messenger_integration

Quindi apri una nuova finestra in incognito e incolla l’URL copiato.

web_messenger_integration

Ora dovresti vedere il tuo saluto iniziale di risposta rapida. Fai clic su di esso e scopri come il tuo bot Luma ti porta al tuo Benvenuto flusso.

web_messenger_integration

Il tuo messenger web è ora pronto per essere incorporato sul tuo sito dimostrativo Luma!

20.6.2 Aggiungi Web Messenger al tuo sito demo

Torna all'editor di codice di Visual Studio.

Una volta aperta, passa alla ./web-messenger cartella.

vs_web-messanger-folder.png

Apri un terminale (Visualizza -> Terminale).

demo

Inserisci il comando cd web-messenger e hit enter.

demo

Esegui il comando npm i per installare le dipendenze del progetto.

demo

Dedica un momento all'esplorazione del src cartella del progetto. Di seguito è riportato un riepilogo delle due cartelle:

  • luma-api: logica per recuperare informazioni sul brand Luma dall’API demo
  • messaggero: logica per creare un'istanza del messaggio web e personalizzarlo

demo

Prima di generare e testare il progetto, è necessario aggiornare la configurazione con l’App Id del bot.

Vai a Stackchat Studio, accedi al tuo bot Luma e fai clic su Integrazioni nel menu bot. Fai clic sul pulsante Gestisci pulsante per Web Messenger.

demo

Nella schermata Web Messenger, copia l'ID app:

demo

Ora torna a Codice di Visual Studio e apri il file di configurazione: src/messenger/config.ts e aggiungi il valore App ID all'oggetto di configurazione alla riga 4, assicurandoti che sia un string, ovvero tra virgolette:

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

In questo esempio, l'ID app è "ctduca8z4hn6x03", quindi la riga 4 aggiornata dovrebbe ora essere simile alla seguente:

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

demo

Salva le modifiche nel file di configurazione. Ora puoi creare e testare il progetto. Porta il terminale (Visualizza -> Terminale) ed esegui il comando build:

npm run build

Questo comando esegue Webpack, configurato per compilare il progetto TypeScript in un singolo file JavaScript compatibile con i browser.
La build deve essere completata correttamente:

demo

Il progetto avrà ora una sciocco cartella generata da Webpack. Conterrà un file denominato bundle.js. Devi ospitare questo file nel passaggio successivo in modo che sia accessibile dal sito web demo.

20.6.3 Hosting del file JavaScript

Per ottenere il tuo Luma Bot sul sito demo, è necessario ospitare il tuo bundle.js da qualche parte e renderlo accessibile al pubblico. In Esercizio 5.1 - Configurazione di un bucket AWS S3 hai già configurato un bucket AWS che possiamo sfruttare.

Accedi al tuo account AWS S3: https://console.aws.amazon.com/s3. Poiché hai bisogno che questo file sia disponibile pubblicamente, creiamo un nuovo Bucket. Fai clic su Crea bucket.

demo

Denomina il bucket aepmodule20LDAP, ad esempio aepmodule20vangeluw e scegliere la regione applicabile.

demo

Scorri verso il basso fino a visualizzare Impostazioni bucket per Blocco accesso pubblico.

  • Deseleziona la casella di controllo per Blocca tutti gli accessi pubblici
  • Seleziona la casella di controllo per Riconosco che le impostazioni correnti…

Ora dovresti avere una visualizzazione simile:

demo

  • Fai clic su Successivo di nuovo mantenendo Nome e area geografica le impostazioni così come sono.
  • In Configurare le opzioni sezione, deseleziona Blocca tutti gli accessi pubblici. Questo porterà a una dichiarazione di riconoscimento che confermerà che qualsiasi cosa in questo secchio può essere pubblicamente accessibile. Seleziona la casella di conferma, quindi fai clic su Successivo

s3_bucket-setpermissions

Scorri verso il basso e fai clic su Crea bucket.

Ora viene creato il nuovo bucket, fai clic su di esso per aprirlo.

demo

Vedrete questo.

demo

Fai clic su Carica. Vedrai questo:

s3_bundlefile-review

Fai clic su Aggiungi file, vai a e seleziona la tua bundle.js file.

s3_bundlefile-overview

Ora vedete questo. Scorri verso il basso verso l’alto Destinazione e controlla la casella di controllo Riconosco che gli oggetti esistenti con lo stesso nome verranno sovrascritti.

demo

Scorri verso il basso e fai clic su Carica.

demo

Vedrete questo. Fai clic sul nome del file bundle.js.

demo

Ora dovresti essere in grado di visualizzare i dettagli della panoramica del file, tra cui un URL oggetto. Copia questo URL così come ne avrai bisogno nel passaggio successivo. Fai clic sul pulsante Rendi pubblico pulsante .

s3_bundlefile-overviewdetails

L'hosting della bundle.js file. Nel passaggio successivo, dovrai incollare URL oggetto in Aggiorna ID configurazione schermo.

20.6.4 Aggiorna l'ID di configurazione del sito demo

Per assicurarti che il sito di dimostrazione carichi il tuo chatbot Luma, devi aggiornare l’ID di configurazione del sito web demo per includere:

  • Stackchat bundle.js URL JavaScript appena creato tramite il bucket S3
  • ID evento Journey Orchestration per attivare il percorso configurato in Esercizio 20.4.

Vai a https://public.aepdemo.net/admin_configuration_update.html in una finestra in incognito fresca e pulita. Vedrai questo:

demo

Immetti l'ID di configurazione e premi il pulsante Carica configurazione pulsante . A quel punto avrai questo:

demo

Scorri verso il basso fino a visualizzare i campi EventID - Percorso Stackchat e Tag Stackchat Chatbot.

demo

Sostituisci il EventID - Percorso Stackchat Valore (vuoto) con l'EventID orchestrazione creato in Esercizio 20.4.1 e sostituire l'attuale Tag Stackchat Chatbot con l’URL oggetto del file ospitato bundle.js, URL dell’oggetto AWS S3 creato nel passaggio precedente.

demo

Scorri verso il basso e fai clic sul pulsante Aggiorna ID configurazione pulsante . Ora è pronto per il test!

demo

20.6.5 Eseguire uno scenario demo

Vai a https://public.aepdemo.net/. Immetti l'ID di configurazione e fai clic su Carica configurazione. Quindi, seleziona il tuo LDAP e quindi il tuo marchio. Seleziona il marchio Luma.

Quando raggiungi la home page di Luma, vedrai il tuo chatbot caricato e l'icona apparirà nella parte in basso a destra dello schermo.

demo

Per prima cosa, vai a ACCESSO/REGISTRO, compila le tue informazioni personali e crea un nuovo account.

demo

Vedrai che il chatbot utilizza il tuo nome nell'invito all'azione:

demo

A tal fine è possibile allegare le informazioni utente ai metadati del messaggio beforeSend delegare nel file helper.ts, in modo che il chatbot non debba chiedere informazioni che già conosciamo. Ulteriori informazioni metadati del messaggio qui.

Apri il widget chat e fai clic su Andiamo!.

demo

Vedrete questo. Quindi, seleziona la Ho bisogno di idee voce di menu.

demo

Vedrete che i prodotti Luma vengono visualizzati all’interno del chatbot.

demo

Quindi, fai clic sul pulsante ❤️ su alcuni prodotti per generare eventi di visualizzazione dei prodotti e per attivare il tuo percorso nel Journey Orchestration.

demo

Un paio di secondi dopo, dovresti ricevere un'e-mail da Adobe Experience Platform e Journey Orchestration con una promozione per l'elemento che ti è piaciuto.

demo

La domanda successiva nel chatbot è se vi dispiacerebbe dare un feedback sulla vostra esperienza di chat. Fai clic su Sicuro.

demo

Fai la tua scelta, in questo caso la scelta è Grande.

demo

Fai clic su Felice!

demo

Fornisci un feedback dettagliato aggiuntivo e fai clic su Invia.

demo

Infine, apri il pannello a raggi X e fai clic sul pulsante di aggiornamento. La visualizzazione del prodotto verrà visualizzata nel pannello a raggi X.

demo

Il tuo chatbot del messaggero web ora funziona bene. Colleghiamo il tuo chatbot a Facebook Messenger.

Passaggio successivo: 20.7 Collegare il chatbot a Facebook Messenger

Torna al modulo 20

Torna a tutti i moduli

In questa pagina