Cara Menambahkan Chatbot AI Asyntai ke DatoCMS
Panduan langkah demi langkah untuk situs web berbasis DatoCMS
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
CMS Headless: DatoCMS adalah CMS headless yang mengirimkan konten melalui API. Kode chatbot perlu ditambahkan ke aplikasi frontend Anda (Next.js, Gatsby, Nuxt, dll.), bukan ke dashboard DatoCMS.
Langkah 1: Dapatkan Kode Embed Anda
Pertama, buka Dasbor Asyntai dan gulir ke bawah ke bagian "Kode Embed". Salin kode embed unik Anda yang akan terlihat seperti ini:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Catatan: Kode di atas hanya contoh. Anda harus menyalin kode embed unik Anda sendiri dari Dasbor karena berisi ID widget personal Anda.
Langkah 2: Tambahkan ke Frontend Next.js (Paling Umum)
Next.js adalah framework frontend paling populer yang digunakan dengan DatoCMS. Tambahkan chatbot menggunakan komponen Script:
App Router (app/layout.tsx):
- Buka file layout root Anda:
app/layout.tsx - Impor komponen Script dan tambahkan 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>
)
} - Ganti
YOUR_WIDGET_IDdengan ID widget Anda yang sebenarnya - Simpan file dan mulai ulang server pengembangan Anda
Pages Router (pages/_app.tsx):
- Buka file
pages/_app.tsxAnda - Tambahkan komponen Script:
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"
/>
</>
)
}
Tip: Menggunakan strategy="afterInteractive" memastikan chatbot dimuat segera setelah halaman menjadi interaktif, memberikan keseimbangan yang baik antara performa dan ketersediaan.
Metode Alternatif 1: Frontend Gatsby
Untuk situs Gatsby yang mengambil konten dari DatoCMS melalui gatsby-source-datocms:
- Buat atau edit
gatsby-ssr.jsdi root proyek Anda: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"
/>
])
} - Ganti
YOUR_WIDGET_IDdengan ID widget Anda yang sebenarnya - Mulai ulang server pengembangan Gatsby Anda
Metode Alternatif 2: Frontend Nuxt.js
Untuk aplikasi Nuxt.js yang mengonsumsi konten DatoCMS:
- Tambahkan ke
nuxt.config.tsAnda:export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://asyntai.com/static/js/chat-widget.js',
async: true,
'data-asyntai-id': 'YOUR_WIDGET_ID'
}
]
}
}
}) - Ganti
YOUR_WIDGET_IDdengan ID widget Anda yang sebenarnya - Mulai ulang server pengembangan Nuxt Anda
Metode Alternatif 3: HTML Biasa / Situs Statis
Jika Anda menggunakan Content Delivery API DatoCMS dengan situs HTML statis atau generator situs statis:
- Tambahkan kode embed ke file HTML Anda sebelum tag penutup
</body>:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Ganti
YOUR_WIDGET_IDdengan ID widget Anda yang sebenarnya - Simpan file dan unggah ke hosting Anda
Metode Alternatif 4: React (Vite/CRA)
Untuk aplikasi React standar (Create React App, Vite) yang menggunakan API DatoCMS:
Opsi A: Tambahkan ke public/index.html
- Buka file
public/index.htmlAnda (CRA) atauindex.html(Vite) - Tambahkan kode embed sebelum tag penutup
</body>:<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> - Simpan file
Opsi B: useEffect di Komponen Root
- Buat komponen chatbot atau tambahkan ke komponen root Anda:
// 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
} - Impor dan render komponen di
App.jsxatau layout root Anda
Langkah 3: Deploy dan Verifikasi
Setelah menambahkan kode chatbot ke situs berbasis DatoCMS Anda, deploy atau jalankan server pengembangan Anda. Kunjungi situs web Anda di tab browser baru atau jendela penyamaran. Anda akan melihat tombol widget obrolan di pojok kanan bawah. Klik untuk memastikan widget terbuka dan berfungsi dengan benar.
Tidak melihat widget? Pastikan Anda telah menambahkan skrip ke file yang benar untuk framework Anda. Periksa konsol pengembang browser Anda untuk kesalahan apa pun. Jika menggunakan rendering sisi server, pastikan skrip berjalan di sisi klien. Coba bersihkan cache browser Anda atau lihat di jendela penyamaran.
Variabel Lingkungan: Untuk keamanan dan fleksibilitas yang lebih baik, pertimbangkan untuk menyimpan ID widget Anda dalam variabel lingkungan (misalnya, NEXT_PUBLIC_ASYNTAI_ID untuk Next.js atau VITE_ASYNTAI_ID untuk Vite) daripada menulisnya secara langsung di kode.