Asyntai AI -chatbotin lisääminen Umbracoon

Vaiheittainen opas Umbraco CMS -verkkosivustoille

Hae upotuskoodi

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: Muokkaa Master-mallitiedostoa (suositeltu)

Helpoin tapa lisätä chatbot kaikille sivuille on muokata Master-mallitiedostoasi:

  1. Kirjaudu Umbraco Backofficeen
  2. Siirry kohtaan Settings vasemmassa sivupalkissa
  3. Laajenna Mallit (Templates)
  4. Napsauta Master-mallitiedostoa (tai sivustosi käyttämää pääasettelumallitiedostoa)
  5. Etsi sulkeva </body>-tagi
  6. Liitä Asyntai-upotuskoodisi juuri ennen </body>-tagia
  7. Napsauta "Save"

Vinkki: Skriptin lisääminen ennen sulkevaa </body>-tagia varmistaa, että se latautuu sivun sisällön jälkeen, mikä on suositeltavaa chat-widgeteille eikä hidasta sivun latautumista.

Vaihtoehto: Sivuston asetukset -dokumenttityypin käyttö

Joustavampaa hallintaa varten voit lisätä mukautetun kentän alatunnisteskriptien hallintaan:

  1. Siirry kohtaan Asetukset → Dokumenttityypit
  2. Muokkaa Sivuston asetukset -dokumenttityyppiä (tai luo se, jos sitä ei ole)
  3. Lisää uusi ominaisuus nimeltä "Footer Scripts" tietotyypillä Textarea
  4. Tallenna dokumenttityyppi
  5. Go to Content and edit your Site Settings node
  6. Liitä Asyntai-upotuskoodisi Footer Scripts -kenttään
  7. Lisää Master-mallitiedostoosi tämä koodi ennen </body>-tagia:
    @Html.Raw(Model.Value("footerScripts"))
  8. Tallenna sekä sisältö että mallitiedosto

Huomautus: @Html.Raw()-funktion käyttö on tärkeää script-tagien oikeaan renderöintiin ilman HTML-koodausta.

Vaihtoehto: Scripts-kansion käyttö

Voit myös luoda JavaScript-tiedoston Umbraco Backofficessa:

  1. Siirry kohtaan Asetukset → Skriptit
  2. Napsauta hiiren oikealla painikkeella Scripts ja valitse "Create"
  3. Luo uusi tiedosto nimeltä asyntai-chatbot.js
  4. Lisää seuraava koodi:
    (function() {
      var script = document.createElement('script');
      script.async = true;
      script.src = 'https://asyntai.com/static/js/chat-widget.js';
      script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
      document.body.appendChild(script);
    })();
  5. Korvaa YOUR_WIDGET_ID todellisella widget-tunnuksellasi
  6. Tallenna tiedosto
  7. Sisällytä tämä skripti Master-mallitiedostoosi ennen </body>-tagia:
    <script src="/scripts/asyntai-chatbot.js"></script>

Vaihtoehto: Sivukohtainen RenderSectionin avulla

Jos haluat chatbotin vain tietyille sivuille:

  1. Lisää Master-mallitiedostoosi ennen </body>-tagia:
    @RenderSection("footerScripts", required: false)
  2. Lisää sivukohtaiseen mallitiedostoon, jossa haluat chatbotin näkyvän:
    @section footerScripts {
      <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
    }

Vaihe 3: Vahvista asennus

Tallenna muutokset ja avaa verkkosivustosi uudessa selainvälilehdessä tai incognito-ikkunassa. Chat-widget-painikkeen pitäisi näkyä oikeassa alakulmassa. Napsauta sitä varmistaaksesi, että se avautuu ja toimii oikein.

Etkö näe widgetiä? Varmista, että tallensit mallitiedoston muutosten jälkeen. Kokeile tyhjentää selaimen välimuisti tai tarkastella incognito-ikkunassa. Jos käytät Umbraco Cloudia, muutosten pitäisi olla automaattisesti käytössä. Itse ylläpidetyssä Umbracossa sinun on ehkä käynnistettävä sovellus uudelleen tai tyhjennettävä välimuisti.