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

플랫폼:

HubSpot

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단계: 사이트 설정 사용 (권장)

HubSpot 웹사이트의 모든 페이지에 챗봇을 추가하는 가장 쉬운 방법:

1. HubSpot 계정에 로그인하세요
2. 메인 내비게이션 바에서 설정 아이콘 (톱니바퀴)을 클릭하세요
3. 왼쪽 사이드바에서 Website > Pages로 이동하세요
4. "Site footer HTML" 섹션까지 아래로 스크롤하세요
5. 텍스트 영역에 Asyntai 임베드 코드를 붙여넣으세요
6. 페이지 하단의 "Save"를 클릭하세요

대안: 페이지별 설치

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

1. Marketing > Website > Website Pages (또는 Landing Pages)로 이동하세요
2. 편집할 페이지를 클릭하세요
3. 페이지 편집기에서 상단의 Settings를 클릭하세요
4. "Advanced options"까지 아래로 스크롤하세요
5. "Footer HTML" 섹션을 찾으세요
6. Asyntai 임베드 코드를 붙여넣으세요
7. "Apply changes"를 클릭하고 페이지를 게시하세요

대안: Design Manager 사용

더 많은 제어를 위해 Design Manager를 통해 JavaScript 파일을 추가할 수 있습니다:

1. Go to Marketing > Files and Templates > Design Tools
2. 왼쪽 사이드바에서 File > New file을 클릭하세요
3. 드롭다운에서 "JavaScript"를 선택하세요
4. 파일 이름을 지정하세요 (예: asyntai-chatbot.js)
5. 다음 코드를 추가하세요:
   (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);
})();
6. YOUR_WIDGET_ID를 실제 위젯 ID로 교체하세요
7. "Publish changes"를 클릭하세요
8. require_js를 사용하여 템플릿에 이 파일을 포함하거나 사이트 설정에서 연결하세요

대안: 사용자 정의 모듈 사용

챗봇을 위한 재사용 가능한 모듈을 만드세요:

1. Go to Marketing > Files and Templates > Design Tools
2. File > New file > Module을 클릭하세요
3. "Asyntai Chatbot"으로 이름을 지정하세요
4. module.html 파일에 임베드 코드를 붙여넣으세요
5. 모듈을 게시하세요
6. 모듈을 템플릿의 푸터 섹션에 추가하거나 개별 페이지에 드래그하세요

3단계: 설치 확인

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