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.

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

Scarica prima l'immagine seguente sul tuo computer:

Quindi caricalo nella finestra a comparsa in Stackchat Studio:

Infine, fai clic su Carica.

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.

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:

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.

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

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.

Fai clic sul pulsante Copia collegamento pulsante .

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

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.

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.

Apri un terminale (Visualizza -> Terminale).

Inserisci il comando cd web-messenger e hit enter.

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

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

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.

Nella schermata Web Messenger, copia l'ID app:

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"

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:

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.

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

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:

• 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

Scorri verso il basso e fai clic su Crea bucket.

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

Vedrete questo.

Fai clic su Carica. Vedrai questo:

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

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.

Scorri verso il basso e fai clic su Carica.

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

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 .

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:

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

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

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.

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

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.

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

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

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

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

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

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

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.

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

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

Fai clic su Felice!

Fornisci un feedback dettagliato aggiuntivo e fai clic su Invia.

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.

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