Embed in website
To embed the chatbot into your website, follow these steps based on your web development setup:
For HTML:
Insert a script tag in your HTML with a
chatbotConfig
object containing thechatbotId
.Add the chatbot script source
https://openassistantgpt.io/chatbot.js
in your body tag.
<script>
window.chatbotConfig = {
chatbotId: 'clq5598dc000hrrwzvt6s1m',
}
</script>
<body>
<script src="https://openassistantgpt.io/chatbot.js"></script>
</body>
For Next.js:
Use the "use client" directive.
Import
Script
from 'next/script' anduseEffect
from 'react'.Inside the
useEffect
hook, set thewindow.chatbotConfig
with yourchatbotId
.Use the
Script
tag to include the chatbot script withstrategy="afterInteractive"
in your main component.
"use client"
import Script from 'next/script'
import React, { useEffect } from 'react';
export default function Home() {
useEffect(() => {
// Set your global variable here
window.chatbotConfig = {
chatbotId: "clq5598dc000hrrwh5t6s1m"
};
}, []);
return (
<main>
<Script src="https://openassistantgpt.io/chatbot.js" strategy="afterInteractive" />
</main>
)
}
These steps allow the chatbot to be seamlessly integrated and accessible on your website.
Last updated