Asyntai AI -chatbotin lisääminen DatoCMS-alustalle
Vaiheittainen opas DatoCMS-pohjaisille verkkosivustoille
HTML/Custom
WordPress
Shopify
WooCommerce
BigCommerce
Ecwid
Wix
Squarespace
Webflow
Weebly
HubSpot
Tilda
Adobe Experience Manager
Duda
Google Sites
Bludit
Plesk
Concrete CMS
Craft CMS
Contentful
Docusaurus
Strapi
Joomla
Kentico
Drupal
Magento
Blogger
Bitrix
TYPO3
PrestaShop
OpenCart
Ghost
Hugo
Statamic
Umbraco
Volusion
Moodle
SilverStripe
Grav
October CMS
ProcessWire
Sanity
ExpressionEngine
Sylius
Backdrop CMS
MODX
Bagisto
PayloadCMS
e107
CrafterCMS
Kirby
MedusaCMS
DatoCMS
GoDaddy
Framer
Bubble
Carrd
Jimdo
Strikingly
Kajabi
Teachable
Thinkific
ClickFunnels
Hostinger
Unbounce
Leadpages
Systeme.io
Instapage
Headless CMS: DatoCMS on headless CMS, joka toimittaa sisältöä API:en kautta. Chatbot-koodi on lisättävä frontend-sovellukseesi (Next.js, Gatsby, Nuxt jne.), ei DatoCMS:n hallintapaneeliin.
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ää Next.js-frontendiin (yleisin)
Next.js on suosituin DatoCMS:n kanssa käytetty frontend-kehys. Lisää chatbot Script-komponentin avulla:
App Router (app/layout.tsx):
- Avaa juuriasettelutiedostosi:
app/layout.tsx - Tuo Script-komponentti ja lisää chatbot:
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Script
src="https://asyntai.com/static/js/chat-widget.js"
data-asyntai-id="YOUR_WIDGET_ID"
strategy="afterInteractive"
/>
</body>
</html>
)
} - Korvaa
YOUR_WIDGET_IDtodellisella widget-tunnuksellasi - Tallenna tiedosto ja käynnistä kehityspalvelin uudelleen
Pages Router (pages/_app.tsx):
- Avaa
pages/_app.tsx-tiedosto - Lisää Script-komponentti:
import Script from 'next/script'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<Script
src="https://asyntai.com/static/js/chat-widget.js"
data-asyntai-id="YOUR_WIDGET_ID"
strategy="afterInteractive"
/>
</>
)
}
Vinkki: Käyttämällä strategy=\"afterInteractive\" varmistetaan, että chatbot latautuu heti sivun muututtua interaktiiviseksi, mikä tarjoaa hyvän tasapainon suorituskyvyn ja saatavuuden välillä.
Vaihtoehtoinen tapa 1: Gatsby-frontend
Gatsby-sivustoille, jotka hakevat sisältöä DatoCMS:stä gatsby-source-datocms-lisäosan kautta:
- Luo tai muokkaa
gatsby-ssr.js-tiedostoa projektisi juuressa:import React from 'react'
export const onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<script
key="asyntai-chatbot"
async
src="https://asyntai.com/static/js/chat-widget.js"
data-asyntai-id="YOUR_WIDGET_ID"
/>
])
} - Korvaa
YOUR_WIDGET_IDtodellisella widget-tunnuksellasi - Käynnistä Gatsby-kehityspalvelin uudelleen
Vaihtoehtoinen tapa 2: Nuxt.js-frontend
Nuxt.js-sovelluksille, jotka käyttävät DatoCMS-sisältöä:
- Lisää
nuxt.config.ts-tiedostoosi:export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://asyntai.com/static/js/chat-widget.js',
async: true,
'data-asyntai-id': 'YOUR_WIDGET_ID'
}
]
}
}
}) - Korvaa
YOUR_WIDGET_IDtodellisella widget-tunnuksellasi - Käynnistä Nuxt-kehityspalvelin uudelleen
Vaihtoehtoinen tapa 3: Tavallinen HTML / staattinen sivusto
Jos käytät DatoCMS:n Content Delivery API:a staattisen HTML-sivuston tai staattisen sivustogeneraattorin kanssa:
- Lisää upotuskoodi HTML-tiedostoosi ennen sulkevaa
</body>-tagia:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Korvaa
YOUR_WIDGET_IDtodellisella widget-tunnuksellasi - Tallenna tiedosto ja lataa se hosting-palveluusi
Vaihtoehtoinen tapa 4: React (Vite/CRA)
Tavallisille React-sovelluksille (Create React App, Vite jne.), jotka käyttävät DatoCMS API:a:
Vaihtoehto A: Lisää public/index.html-tiedostoon
- Avaa
public/index.html-tiedosto (CRA) taiindex.html(Vite) - Lisää upotuskoodi ennen sulkevaa
</body>-tagia:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Tallenna tiedosto
Vaihtoehto B: useEffect juurikomponentissa
- Luo chatbot-komponentti tai lisää juurikomponenttiisi:
// components/Chatbot.jsx
import { useEffect } from 'react'
export default function Chatbot() {
useEffect(() => {
const script = document.createElement('script')
script.src = 'https://asyntai.com/static/js/chat-widget.js'
script.async = true
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID')
document.body.appendChild(script)
return () => document.body.removeChild(script)
}, [])
return null
} - Tuo ja renderöi komponentti
App.jsx-tiedostossasi tai juuriasettelussa
Vaihe 3: Julkaise ja vahvista
Kun olet lisännyt chatbot-koodin DatoCMS-pohjaiselle sivustollesi, julkaise tai käynnistä kehityspalvelin. Avaa verkkosivustosi uudessa selaimen välilehdessä tai incognito-ikkunassa. Chat-painikkeen pitäisi näkyä oikeassa alakulmassa. Napsauta sitä varmistaaksesi, että se avautuu ja toimii oikein.
Etkö näe widgetiä? Varmista, että olet lisännyt skriptin oikeaan tiedostoon kehyksellesi. Tarkista selaimen kehittäjäkonsolista mahdolliset virheet. Jos käytät palvelinpuolen renderöintiä, varmista, että skripti suoritetaan asiakaspuolella. Kokeile tyhjentää selaimen välimuisti tai katsella sivua incognito-ikkunassa.
Ympäristömuuttujat: Paremman tietoturvan ja joustavuuden vuoksi harkitse widget-tunnuksen tallentamista ympäristömuuttujaan (esim. NEXT_PUBLIC_ASYNTAI_ID Next.js:lle tai VITE_ASYNTAI_ID Vitelle) sen sijaan, että kovakoodaisit sen.