Bubble.io와 LiveChat 통합: 단계별 가이드 2024

단계 1: 준비하기
시작하기 전에, Bubble.io와 LiveChat 계정을 아직 생성하지 않았다면 두 사이트에서 각각 계정을 만들어야 합니다. 등록 후에는 각 사이트에 로그인해야 합니다.

단계 2: LiveChat 라이선스 번호 얻기
LiveChat 대시보드로 이동하여 "설정"을 찾은 다음 "채널"을 선택하고 "채팅 위젯"을 선택합니다. "코드 복사" 섹션에서 라이선스 번호를 찾을 수 있습니다.

단계 3: Bubble.io 통합 시작
Bubble.io 계정에 로그인하여 통합 프로세스를 시작합니다. 대시보드에서 LiveChat을 추가하려는 웹사이트 프로젝트를 선택합니다.

단계 4: HTML 요소 추가
Bubble.io의 디자인 탭에서 HTML 요소를 드래그 앤 드롭하여 LiveChat이 나타나길 원하는 페이지에 추가합니다.

단계 5: LiveChat 코드 붙여넣기
HTML 요소를 배치한 후 클릭하여 속성과 옵션을 표시합니다. "태그 유형"에서 "본문에서 스크립트"를 선택합니다. 그런 다음 HTML 섹션에 다음 코드를 붙여넣습니다:

<!-- LiveChat (www.livechatinc.com) 코드 시작 -->
<script type="text/javascript">
window.__lc = window.__lc || {};
window.__lc.license = YOUR_LICENCE_NUMBER;
(function() {
 var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true;
 lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
})();
</script>
<!-- LiveChat 코드 끝 -->

단계 2에서 LiveChat 대시보드에서 찾은 라이선스 번호로 YOUR_LICENCE_NUMBER를 꼭 바꿔주세요.

단계 6: 저장 및 미리보기
이 추가 사항을 저장하려면, HTML 스크립트 상자 외부에 있는 Bubble.io 디자인 페이지의 어느 곳이든 클릭합니다. 그런 다음 화면 오른쪽 상단의 "미리보기"를 선택하여 웹사이트를 미리 봅니다.

단계 7: LiveChat 통합 테스트
방문자처럼 웹사이트에 접속합니다. 채팅 아이콘을 찾아 클릭하여 기능을 테스트합니다. 제대로 작동하는지 확인합니다.

단계 8: 필요에 따라 LiveChat 사용자 정의
LiveChat 사용자 정의를 위해 LiveChat의 설정으로 이동합니다. 색상 체계, 사전 채팅 양식, 채팅 위치 등을 웹사이트에 맞게 조절합니다.

단계 9: 최종화
LiveChat을 테스트하고 사용자 정의한 후, 이제 웹사이트를 게시하고 공유할 준비가 되었습니다. Bubble.io에서 "배포"로 이동합니다. 변경 사항을 확인하고 웹사이트를 실제 버전으로 배포합니다.

단계 10: 축하하기
이제 통합이 완료되었습니다. 채팅 기능이 있는 Bubble.io 웹사이트를 즐기세요!