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.

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

Scaricate prima l'immagine seguente sul computer:

Quindi caricatelo nella finestra a comparsa di Stackchat Studio:

Infine, fate clic su Carica.

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.

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:

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.

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

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.

Fate clic sul pulsante Copia collegamento .

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

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 .

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 .

Aprire un terminale (Visualizza -> Terminal).

Inserisci il comando cd web-messenger e premi Invio.

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

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

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.

Nella schermata Web Messenger, copiate l'ID app:

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"

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:

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.

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

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:

• 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

Scorri verso il basso e fai clic su Crea pacchetto.

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

Vedrete questo.

Fate clic su Carica. Vedrete questo:

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

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

Scorrete verso il basso e fate clic su Carica.

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

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 .

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:

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

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

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.

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

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.

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

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

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

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

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

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

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.

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

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

Fate clic su Happy to!

Fornite un feedback dettagliato aggiuntivo e fate clic su Invia.

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.

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