Asyntai AI -chatbotin lisääminen Adobe Experience Manageriin

Vaiheittainen opas AEM-verkkosivustoille

Alusta:

Vaihe 1: Hanki upotuskoodisi

Siirry ensin Asyntai-hallintapaneeliin ja vieritä alas "Upotuskoodi"-osioon. Kopioi yksilöllinen upotuskoodisi, joka näyttää tältä:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Huomautus: Yllä oleva koodi on vain esimerkki. Sinun on kopioitava oma yksilöllinen upotuskoodisi Hallintapaneelistasi, sillä se sisältää henkilökohtaisen widget-tunnuksesi.

Vaihe 2: Lisää koodi sivukomponentin avulla (Suositeltu)

Suositeltu tapa on lisätä chatbot-koodi AEM-sivukomponenttisi head-osioon koko sivuston kattavaa asennusta varten:

Kirjaudu AEM Author -instanssiisi
Siirry CRXDE Liteen (yleensä osoitteessa http://your-aem-instance:4502/crx/de)
Etsi sivukomponenttisi malli (yleensä kohdassa /apps/your-project/components/page)
Etsi tai luo head.html- tai headerlibs.html-tiedosto
Lisää Asyntai-upotuskoodisi tähän tiedostoon
Napsauta "Save All" ylävalikossa
Replikoi muutokset julkaisu-instanssiisi

Vinkki: Koodin sijoittaminen head.html-tiedostoon varmistaa, että chatbot näkyy kaikilla kyseistä mallia käyttävillä sivuilla. Tämä on siistein tapa koko sivuston kattavaan asennukseen.

Vaihtoehtoinen tapa 1: Client Libraries (ClientLibs)

Jäsennellymmän lähestymistavan saamiseksi voit käyttää AEM:n Client Library -järjestelmää:

Luo uusi client library -kansio kohtaan /apps/your-project/clientlibs
Aseta cq:clientLibraryFolder-solmutyyppi
Luo js.txt-tiedosto, joka listaa JavaScript-tiedostosi
Lisää Asyntai-upotuskoodisi JavaScript-tiedostoon tässä kansiossa
Sisällytä client library sivukomponenttiisi käyttämällä:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

Huomautus: Tämä menetelmä on suositeltava projekteille, joissa on olemassa oleva ClientLib-rakenne, ja se tarjoaa paremman organisoinnin suuremmille toteutuksille.

Vaihtoehtoinen tapa 2: Tag Management (Adobe Launch)

Jos käytät Adobe Launchia (aiemmin DTM) tai muuta tag manageria:

Kirjaudu Adobe Experience Platform Launchiin
Siirry ominaisuuteesi
Siirry kohtaan Rules ja luo uusi sääntö
Aseta tapahtumaksi "Page Bottom" tai "DOM Ready"
Lisää toiminto: Custom Code
Liitä Asyntai-upotuskoodisi
Tallenna ja julkaise kirjasto

Vinkki: Adobe Launch on Adoben suosittelema tapa lisätä kolmannen osapuolen skriptejä. Se tarjoaa paremman hallinnan, testausmahdollisuudet eikä vaadi koodijulkaisuja.

Vaihtoehtoinen tapa 3: Experience Fragment

Joustavaa, sisällöntuottajaystävällistä toteutusta varten:

Siirry Experience Fragments -osioon AEM:ssä
Luo uusi Experience Fragment
Lisää Text-komponentti tai HTML-komponentti
Vaihda HTML-lähdekooditilaan
Liitä Asyntai-upotuskoodisi
Sisällytä tämä Experience Fragment sivumallisi alatunnisteeseen

Tärkeää: Varmista, että sinulla on asianmukaiset AEM-oikeudet mallien ja komponenttien muokkaamiseen. AEM as a Cloud Service -palvelussa muutokset saattavat edellyttää CI/CD-putken käyttöä.

Vaihe 3: Vahvista asennus

Muutosten käyttöönoton jälkeen tyhjennä selaimen välimuisti ja siirry verkkosivustollesi. Chat-widget-painikkeen pitäisi näkyä oikeassa alakulmassa. Napsauta sitä varmistaaksesi, että se avautuu ja toimii oikein.

Etkö näe widgetiä? Tarkista selaimesi konsoli (F12) JavaScript-virheiden varalta. Varmista, että koodi on oikein otettu käyttöön julkaisu-instanssissasi. AEM as a Cloud Service -palvelussa varmista, että muutokset on onnistuneesti viety käyttöönottoputken läpi.