20.6 Prova il tuo chatbot sul sito web demo

Il widget per messaggi Web di Stackchat consente di aggiungere il bot Luma al sito dimostrativo Luma. In questa sezione, configurerete l'integrazione in Stackchat Studio, creerete il progetto del sito Web e quindi aggiungete JavaScript al sito dimostrativo Luma per abilitare la chat Web in tempo reale.

  • Ultima versione di Node.js installata. Assicurarsi di eseguire Node v12 o versione successiva
  • Ultima versione di Github per Desktop (o non esitate a utilizzare lo strumento della riga di comando Git, se preferite)
  • Account AWS S3 (o un'altra soluzione di hosting a vostra scelta) per ospitare il vostro Javascript Luma Bot

20.6.1 Configura il tuo messaggio Web

Una volta effettuato l'accesso a Stackchat, andate a Bots nel menu a sinistra, selezionate il Bot Luma e quindi fate clic sul pulsante Integrazioni nel menu bot. Ora fai clic sul pulsante Gestisci per Stackchat Web Messenger.

web_messenger_integration

Vedrete questo. Premi il pulsante + accanto all’input nel campo URL avatar predefinito.

web_messenger_integration

Scaricate prima l'immagine seguente sul computer:

Adobe_AEP_logo

Quindi caricatelo nella finestra a comparsa di Stackchat Studio:

Adobe_AEP_logo

Infine, fate clic su Carica.

Adobe_AEP_logo

Ora effettuate le stesse operazioni per il campo URL icona pulsante (oppure copiate e incollate il nuovo URL dal campo precedente). Lasciate gli altri campi da soli.

web_messenger_integration

Selezionate la scheda Marchio e caricate la stessa immagine per il campo URL icona business (oppure copiate e incollate l’URL dal campo precedente).

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

Ora dovresti avere questo:

ui_messenger_brand-crunch2

Selezionate la scheda Saluti iniziali e aggiungete questo testo al primo campo del messaggio:

Pronti per iniziare?

Quindi aggiungete questo testo al primo campo Risposta rapida:
Andiamo! 🚀

Se siete curiosi, aprite il generatore di bot, modificate il CDML ed eseguite una ricerca per il termine Andiamo! 🚀. Nel flusso di benvenuto è stata configurata come parola chiave. Qui è dove Luma Bot naviga gli utenti se scelgono questa risposta rapida.

Fate clic su Aggiorna integrazione per salvare le modifiche.

web_messenger_integration

Al termine del salvataggio, apri il widget del messaggio Web e visualizza l’anteprima del marchio Luma ora visualizzato!

web_messenger_integration

Tuttavia, vedrete che la risposta rapida configurata nella scheda Saluti iniziali non è visualizzata. Questo perché sarà visibile solo dai nuovi utenti.

Per verificarlo, fate clic sul pulsante Panoramica nel menu dei bot, quindi fate clic sul pulsante Condividi in alto a destra.

web_messenger_integration

Fate clic sul pulsante Copia collegamento .

web_messenger_integration

Quindi aprite una nuova finestra in incognito e incollate l’URL copiato.

web_messenger_integration

A questo punto dovrebbe essere visualizzato il saluto iniziale di risposta rapida. Fai clic su di esso per vedere come il tuo Luma Bot ti porta al flusso di benvenuto .

web_messenger_integration

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

20.6.2 Aggiungi il Web Messenger al tuo sito demo

Torna all'editor di codice di Visual Studio.

Una volta aperto, andate alla pagina ./web-messenger .

vs_web-messanger-folder.png

Aprire un terminale (Visualizza -> Terminal).

demo

Inserisci il comando cd web-messenger e premi Invio.

demo

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

demo

Dedica un momento ad esplorare la cartella src del progetto. Di seguito è elencata una delle due cartelle:

  • luma-api: logica per recuperare informazioni sul marchio Luma dall'API demo
  • messenger: per creare un'istanza del messaggio Web e personalizzarlo

demo

Prima di creare e testare il progetto, è necessario aggiornare la configurazione con l'ID app del bot.

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

demo

Nella schermata Web Messenger, copiate l'ID app:

demo

Tornare a Visual Studio Code, aprire il file di configurazione: src/messenger/config.ts e aggiungi il tuo ID app all'oggetto di configurazione alla riga 4, accertati che si tratti di una stringa, 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", pertanto 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

Salvare le modifiche nel file di configurazione. Ora è possibile creare e testare il progetto. Aprite il terminale (Visualizza -> Terminal) ed eseguite il comando build:

build di esecuzione npm

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

demo

Il progetto avrà ora una cartella dist generata da Webpack. Conterrà un file denominato bundle.js. Dovrete ospitare questo file nel passaggio successivo in modo che possa essere accessibile dal sito Web demo.

20.6.3 Ospita il file JavaScript

Per ottenere il Bot Luma sul sito demo, è necessario ospitare il file 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é questo file deve essere disponibile al pubblico, creiamo un nuovo Bucket. Fate clic su Crea intervallo.

demo

Denominate il bucket aepmodule20LDAP, ad esempio aepmodule20vangeluw e scegliete la regione a voi applicabile.

demo

Scorrete verso il basso fino a visualizzare le impostazioni Blocca accesso pubblico.

  • Deselezionare la casella di controllo Blocca accesso pubblico
  • Selezionare la casella di controllo per confermare che le impostazioni correnti…

A questo punto dovresti avere una vista simile:

demo

  • Fate nuovamente clic su Avanti per mantenere invariate le impostazioni di Nome e Regione .
  • Nella sezione Configura opzioni , deselezionate Blocca tutti gli accessi pubblici. In questo modo verrà resa nota una dichiarazione di riconoscimento che confermerà che qualsiasi cosa presente in questo intervallo potrebbe essere accessibile al pubblico. Toccate la casella per confermare, quindi fate clic su Avanti

s3_bucket-setpermissions

Scorri verso il basso e fai clic su Crea pacchetto.

Ora è stato creato il nuovo Bucket, fare clic su di esso per aprirlo.

demo

Vedrete questo.

demo

Fate clic su Carica. Vedrete questo:

s3_bundlefile-review

Fate clic su Aggiungi file, individuate e selezionate il file bundle.js .

s3_bundlefile-overview

Ora vedete questo. Scorrete verso il basso un oggetto ma nel campo Destinazione e selezionate la casella di controllo per verificare che gli oggetti esistenti con lo stesso nome verranno sovrascritti .

demo

Scorrete verso il basso e fate clic su Carica.

demo

Vedrete questo. Fate clic sul nome di file bundle.js.

demo

A questo punto dovreste essere in grado di visualizzare i dettagli di panoramica del file, incluso un URL ​oggetto. Copiate questo URL come desiderate nel passaggio successivo. Fate clic sul pulsante Rendi pubblico .

s3_bundlefile-overviewdetails

Il file bundle.js è stato ospitato correttamente. Nel passaggio successivo, dovrete incollare l'URL dell' oggetto nella schermata ID configurazione aggiornamento.

20.6.4 Aggiorna l'ID di configurazione del sito demo

Per assicurarsi che il sito demo carichi il vostro chatbot Luma, dovrete 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 impostato nell’ esercizio 20.4.

Passate alla pagina https://public.aepdemo.net/admin_configuration_update.html in una finestra nuova e pulita. Vedrete questo:

demo

Immettete l’ID di configurazione e fate clic sul pulsante Carica configurazione . Avrete quindi questo:

demo

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

demo

Sostituite il valore EventID - Stackchat Journey (vuoto) con l’ID evento di orchestrazione creato nell’ esercizio 20.4.1 e sostituite il valore corrente del tag Stackchat Chatbot con l’URL oggetto del file ospitato bundle.js , che è l’URL dell’oggetto AWS S3 creato nel passaggio precedente.

demo

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

demo

20.6.5 Eseguire uno scenario dimostrativo

Go to https://public.aepdemo.net/. Immettete il vostro ID di configurazione e fate clic su Carica configurazione. Quindi, selezionate il vostro LDAP e il vostro marchio. Selezionate il marchio Luma.

Quando raggiungete la home page di Luma, vedrete il vostro chatbot essere caricato e l'icona verrà visualizzata nella parte inferiore destra dello schermo.

demo

Innanzitutto, andate a LOGIN/REGISTER, compilate i vostri dati personali e create un nuovo account.

demo

Vedrete che il chatbot utilizza il vostro nome nell'invito all'azione:

demo

Questo può essere ottenuto allegando le informazioni utente ai metadati del messaggio in beforeSend delegate nel file helper.ts, in modo che il chatbot non debba chiedere informazioni già note. Per ulteriori informazioni sui metadati dei messaggi, consulta.

Aprite il widget della chat e fate clic su Andiamo!.

demo

Vedrete questo. Quindi, selezionate la voce di menu Idee .

demo

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

demo

Quindi, fate clic sul pulsante ❤️ di alcuni prodotti per generare eventi visualizzati sui prodotti e attivare il vostro viaggio nel Journey Orchestration.

demo

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

demo

La domanda successiva nel chatbot è se desiderate fornire feedback sulla vostra esperienza di chat. Fate clic su Certo.

demo

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

demo

Fate clic su Happy to!

demo

Fornite un feedback dettagliato aggiuntivo e fate clic su Invia.

demo

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

demo

Il vostro chatbot di messaggeria web ora funziona bene. Connettiamo il 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