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 the chatbotId.
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' and useEffect from 'react'.
Inside the useEffect hook, set the window.chatbotConfig with your chatbotId.
Use the Script tag to include the chatbot script with strategy="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 2 years ago