Umbraco에 Asyntai AI 챗봇을 추가하는 방법

플랫폼:

Umbraco

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

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

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

2단계: Master 템플릿 편집 (권장)

모든 페이지에 챗봇을 추가하는 가장 쉬운 방법은 Master 템플릿을 편집하는 것입니다:

1. Umbraco Backoffice에 로그인하세요
2. 왼쪽 사이드바에서 Settings로 이동하세요
3. Templates를 확장하세요
4. Master 템플릿(또는 사이트가 사용하는 기본 레이아웃 템플릿)을 클릭하세요
5. 닫는 </body> 태그를 찾으세요
6. </body> 태그 바로 앞에 Asyntai 삽입 코드를 붙여넣으세요
7. "Save"를 클릭하세요

대안: Site Settings Document Type 사용

더 유연하게 관리하기 위해 푸터 스크립트를 관리하는 커스텀 필드를 추가할 수 있습니다:

1. Settings → Document Types로 이동하세요
2. Site Settings document type을 편집하세요 (없으면 새로 만드세요)
3. Textarea 데이터 타입으로 "Footer Scripts"라는 새 속성을 추가하세요
4. Document Type을 저장하세요
5. Content로 이동하여 Site Settings 노드를 편집하세요
6. Footer Scripts 필드에 Asyntai 삽입 코드를 붙여넣으세요
7. Master 템플릿에서 </body> 앞에 다음 코드를 추가하세요:
   @Html.Raw(Model.Value("footerScripts"))
8. 콘텐츠와 템플릿 모두 저장하세요

대안: Scripts 폴더 사용

Umbraco Backoffice에서 JavaScript 파일을 만들 수도 있습니다:

1. Settings → Scripts로 이동하세요
2. Scripts를 마우스 오른쪽 버튼으로 클릭하고 "Create"를 선택하세요
3. asyntai-chatbot.js라는 새 파일을 만드세요
4. 다음 코드를 추가하세요:
   (function() {
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  document.body.appendChild(script);
})();
5. YOUR_WIDGET_ID를 실제 위젯 ID로 교체하세요
6. 파일을 저장하세요
7. Master 템플릿의 </body> 앞에 이 스크립트를 포함하세요:
   <script src="/scripts/asyntai-chatbot.js"></script>

대안: RenderSection을 사용한 페이지별 설정

특정 페이지에만 챗봇을 원하는 경우:

1. Master 템플릿에서 </body> 앞에 추가하세요:
   @RenderSection("footerScripts", required: false)
2. 챗봇을 추가하려는 특정 페이지 템플릿에 다음을 추가하세요:
   @section footerScripts {
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
}

3단계: 설치 확인

변경 사항을 저장한 후, 새 브라우저 탭이나 시크릿 창에서 웹사이트를 방문하세요. 오른쪽 하단에 채팅 위젯 버튼이 표시되어야 합니다. 클릭하여 올바르게 열리고 작동하는지 확인하세요.