How to Add Asyntai AI Chatbot to Discourse

Step-by-step guide for Discourse communities

플랫폼:

1단계: 임베드 코드 가져오기

먼저 Asyntai 대시보드로 이동하여 "임베드 코드" 섹션까지 아래로 스크롤하십시오. 다음과 같은 형태의 고유 임베드 코드를 복사하십시오:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

참고: 위의 코드는 예시일 뿐입니다. 개인 위젯 ID가 포함된 고유한 임베드 코드를 대시보드에서 복사해야 합니다.

Before you start: Adding custom code to Discourse requires an administrator account. If you don't have admin access to your community, ask your site administrator to complete these steps.

Step 2: Open Your Theme's Customization Editor

Discourse lets you inject custom HTML and JavaScript through the theme editor, without touching any server files:

Log in to your Discourse community as an administrator
Click your profile icon and open Admin, or go directly to /admin
In the admin sidebar, go to Customize → Themes
Select the theme that is currently active on your community (it will be marked as Default or Active)
Click Edit CSS/HTML to open the code editor

팁: Editing the active theme applies the chatbot to every page of your community for all visitors. Make sure you are editing the theme your community actually uses, not an inactive one.

Step 3: Add the Embed Code to the Head Section

Inside the theme editor you'll see a Common tab with several code sections. This is where you paste your Asyntai embed code:

In the code editor, make sure the Common tab is selected (this applies your code to both desktop and mobile)
Choose the </head> section from the list of available areas (other options include Header, After Header, <body>, and Footer)
Paste your Asyntai embed code into the </head> section:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Click Save to apply your changes
Make sure the theme is enabled and set as the active theme for your community

팁: The Asyntai script loads asynchronously, so it won't slow down your community. Placing it in the </head> section ensures it loads on every page.

Alternative Method: Use a Theme Component

If you'd rather keep the chatbot code separate from your main theme, you can add it as a dedicated theme component. This makes it easy to enable or disable without editing your active theme:

Go to Admin → Customize → Components
Click Install, then choose Create new to make a blank component
Give it a name such as Asyntai Chatbot and click Create
Open Edit CSS/HTML, select the Common tab, and paste your embed code into the </head> section
Save를 클릭하세요
Add the component to your active theme under the theme's Components section

참고: A theme component only takes effect once it is added to a theme that is active on your community. Toggling the component on or off is a quick way to enable or disable the chatbot.

4단계: 설치 확인

After saving your changes, open your Discourse community in a new browser tab or incognito window. You should see the chat widget button in the bottom right corner. Click it to ensure it opens and functions correctly.

위젯이 보이지 않나요? Make sure you saved the theme and that it is enabled and active for your community. Clear your browser cache or view in incognito mode, since Discourse caches theme assets. Check the browser console (F12) for any JavaScript errors.

도움이 필요하신가요?

If you're not comfortable editing your theme, ask your Discourse administrator or hosting provider to add the embed code for you. You can also contact Asyntai support for guidance on installing the chatbot on your Discourse community.

팁: If your community is hosted on the official Discourse hosting plans, your admin still has full access to the theme editor, so these same steps apply.