Az Asyntai AI Chatbot hozzáadása a Contentfulhoz
Lépésről lépésre útmutató Contentful alapú webhelyekhez
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: A Contentful egy headless CMS, vagyis API-n keresztül biztosítja a tartalmat, de nem tartalmaz beépített frontendet. A chatbot telepítése attól függ, hogy melyik frontend keretrendszert használja a Contentful tartalom megjelenítéséhez. Válassza ki az alábbiakban azt a módszert, amely megfelel a beállításának.
1. lépés: Szerezze be a beágyazási kódját
Először lépjen az Asyntai Irányítópultra és görgessen le a „Beágyazási kód" szekcióhoz. Másolja le az egyedi beágyazási kódját, amely így fog kinézni:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Megjegyzés: A fenti kód csak egy példa. Le kell másolnia saját egyedi beágyazási kódját az Irányítópultról, mivel az tartalmazza személyes widget-azonosítóját.
1. módszer: Next.js Contentfullal (ajánlott)
Ha a Next.js-t használja a Contentful tartalom megjelenítéséhez, adja hozzá a chatbotot a Script komponens segítségével:
- Nyissa meg a fő elrendezési fájlt:
app/layout.tsx(App Router) vagypages/_app.tsx(Pages Router) - Importálja a Script komponenst, és adja hozzá a chatbotot:
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="lazyOnload"
/>
</body>
</html>
)
} - Replace
YOUR_WIDGET_IDwith your actual widget ID - Mentse el a fájlt, és indítsa újra a fejlesztői szervert
Tipp: A strategy="lazyOnload" használata biztosítja, hogy a chatbot azután töltődjön be, hogy az oldal teljesen interaktív, ezzel a legjobb teljesítményt nyújtva.
2. módszer: Gatsby Contentfullal
Contentfulból tartalmat húzó Gatsby webhelyek esetén:
- Telepítse a gatsby-plugin-load-script bővítményt (opcionális, de ajánlott):
npm install gatsby-plugin-load-script - Adja hozzá a
gatsby-config.jsfájlhoz:module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-load-script',
options: {
src: 'https://asyntai.com/static/js/chat-widget.js',
attributes: {
'data-asyntai-id': 'YOUR_WIDGET_ID',
async: true
}
}
}
]
} - Alternatívaként használja a gatsby-ssr.js fájlt:
// gatsby-ssr.js
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"
/>
])
} - Indítsa újra a Gatsby fejlesztői szervert
3. módszer: React Contentfullal
Contentfult használó szabványos React alkalmazásokhoz (Create React App, Vite stb.):
- Nyissa meg a
public/index.htmlfájlt - Adja hozzá a beágyazási kódot a záró
</body>tag elé:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Mentse el a fájlt
Vagy használjon React komponenst useEffect-tel:
// 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
}
4. módszer: Vue/Nuxt Contentfullal
Contentfult használó Vue vagy Nuxt.js alkalmazásokhoz:
Nuxt 3:
- Adja hozzá a
nuxt.config.tsfájlhoz:export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://asyntai.com/static/js/chat-widget.js',
async: true,
'data-asyntai-id': 'YOUR_WIDGET_ID'
}
]
}
}
})
Vue 3:
- Add to your
index.htmlbefore</body>:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
5. módszer: Statikus HTML a Contentful API-val
Ha a Contentful Content Delivery API-ját vanilla JavaScript-tel használja:
- Adja hozzá a beágyazási kódot a HTML fájlhoz a záró
</body>tag elé:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Mentse el a fájlt, és töltse fel a tárhelyére
2. lépés: Telepítés ellenőrzése
Miután hozzáadta a chatbot kódját a Contentful alapú webhelyéhez, telepítse vagy futtassa a fejlesztői szervert. Látogasson el webhelyére egy új böngészőlapon vagy inkognitóablakban. A jobb alsó sarokban meg kell jelennie a chat widget gombnak. Kattintson rá, hogy megbizonyosodjon arról, hogy megfelelően nyílik meg és működik.
Nem látja a widgetet? Győződjön meg arról, hogy a szkriptet a keretrendszerének megfelelő fájlhoz adta hozzá. Ellenőrizze a böngésző fejlesztői konzolját hibák szempontjából. Ha szerver oldali renderelést használ, győződjön meg arról, hogy a szkript az ügyfél oldalon fut. Próbálja meg üríteni a böngésző gyorsítótárát, vagy nézze meg inkognitóablakban.
Környezeti változók: A jobb biztonság és rugalmasság érdekében fontolja meg a widget azonosítójának környezeti változóban való tárolását (pl. NEXT_PUBLIC_ASYNTAI_ID Next.js esetén) a közvetlen beírás helyett.