젤라또 설치하기

이 문서에서는 사이트에 젤라또 챗봇을 설치하는 방법을 안내합니다.

시작 전 확인하기

젤라또 챗봇은 젤라또 만들기 메뉴에서 기본 정보를 입력하고 챗봇을 생성한 후에 사용할 수 있습니다. 챗봇 저장 시 챗봇 키가 자동으로 발급되며, 사이트에 젤라또 챗봇을 삽입할 때 서비스 키와 함께 전달해야 합니다. 발급받은 챗봇 키는 사이트 내 챗봇 식별 및 연동에 필요한 필수 정보입니다.

시작 전 젤라또 관리자 화면에서 다음의 정보를 확인해 주세요.

서비스 키 : 서비스 사용 시 발급되는 사이트 고유 키로 설정 메뉴의 설정 > 서비스 키 에서 확인할 수 있습니다.

챗봇 키 : 젤라또 만들기 메뉴에서 챗봇을 저장하면 페이지 우측 상단에서 확인할 수 있는 챗봇의 고유 키입니다.
(아래 이미지를 참고하여 확인한 챗봇 키를 campaignKey 로 전달해 주세요.)

챗봇은 한 번 저장 후 사용할 수 있습니다. 관리자 화면 젤라또 만들기 메뉴에서 챗봇 저장 후 챗봇 키를 확인해 주세요.

설치 방법

1. 설치하기

사이트의 <head> 영역에 다음 스크립트 코드를 삽입해 주세요.

<script>
(function(w,d,s,l,i){
            w[l]=w[l]||{q:[]};
            if(!w[l].init){w[l].init=function(c){w[l].q.push({c:c});};}
            // 고객이 웹사이트에 삽입하는 초기화 코드
            var f=d.getElementsByTagName(s)[0],
                j=d.createElement(s);
            j.async=true;
            j.src="https://static.groobee.io/dist/g2/gelatto-loader.min.js";
            j.setAttribute('data-service-key', '서비스 키');
            f.parentNode.insertBefore(j,f);
          })(window,document,'script','gelatto');
</script>

'서비스 키'는 발급된 사이트 고유 키로 관리자 화면의 설정 메뉴의 설정 > 서비스 키 에서 확인할 수 있습니다.

2. gelatto.init()

if (window.gelatto && window.gelatto.init) {
      window.gelatto.init({
        serviceKey: '서비스 키',
        campaignKey: '챗봇 키',
        autoLogin: false,
        linkToStartAutoOpen: false,
        memberId:'회원 아이디'  // init 실행 당시에 memberId가 있을 시에만 전달해도 됨
      });
    }

'서비스 키'는 사이트 고유 키로 관리자 화면의 설정 메뉴의 설정 > 서비스 키 에서 확인할 수 있습니다.
'챗봇 키'는 관리자 화면의 젤라또 만들기 메뉴에서 챗봇의 필수 값 저장 후 페이지 우측 상단에서 확인할 수 있습니다.

설정 옵션

gelatto.init() 주요 옵션 사항은 다음과 같습니다.

옵션명

설명

기본값

linkToStartAutoOpen

링크 클릭 시 챗봇 대화창을 자동 오픈 상태 여부

false

autoLogin

모든 페이지에 공통으로 적용할 수 있는 공통 레이아웃에 아래의 <meta> 태그 혹은 <div> 태그에 심어져 있는 정보를 기반으로 자동 로그인 처리

false

linkToStartAutoOpen: true 설정 시, 링크 클릭 시 페이지가 열릴 때 챗봇 대화창이 열린 상태로 열립니다.
autoLogin: true 설정 시, html 태그 안에 gelatto-member-id 가 있으면 자동 로그인 처리합니다.

챗봇 대화 이력 등을 사용자 ID 기준으로 확인하려면 로그인 처리가 필요합니다. 로그인 처리는 아래를 참고해 주세요.

로그인/로그아웃 처리

수동 로그인

챗봇 자동 로그인을 사용하지 않을 시 로그인/로그아웃 함수를 사용하여 로그인 처리를 할 수 있습니다.
수동 로그인 설정 시 gelatto.init() 함수에서 autoLogin 을 false 로 설정 후 아래와 같이 처리해 주세요.

로그인 처리 함수

if (window.gelatto && window.gelatto.login) {
  window.gelatto
    .login('memberid', 3000) # 권장 시간 : 3000ms
    .then((r) => {
      console.log('로그인 성공');
      console.log(r);
    })
    .catch((e) => {
      console.error('로그인 실패:', e);
    });
}

첫 번째 인자: 로그인할 사용자 ID
두 번째 인자: 만료 시간 (밀리세컨(ms) 단위)

로그아웃 처리 함수

if (window.gelatto && window.gelatto.logout) {
  window.gelatto
    .logout()
    .then((r) => {
      console.log('로그아웃 성공');
      console.log(r);
    })
    .catch((e) => {
      console.error('로그아웃 실패:', e);
    });
}

자동 로그인

자동 로그인 설정 시 gelatto.init() 함수에서 autoLogin 을 true 로 설정 후 아래와 같이 처리해 주세요.
<meta> 태그로 처리하는 방법과 <div> 태그로 처리하는 방법 중 하나를 선택하여 사용해 주세요.

<meta> 태그 처리 방법

<meta name="gelatto-member-id" content="회원 아이디" />

<div> 태그 처리 방법

방법 1 : <div data-gelatto-member-id="회원 아이디"></div>

방법 2 : <div id="gelatto-member-id">회원 아이디</div>

태그 처리는 한 가지 방식을 선택하여 사용해 주세요.

주의사항

SPA, 커스텀 사이트는 최대한 수동 로그인을 권장합니다. 자동 로그인을 사용할 경우 성능에 영향을 미칠 수 있습니다.
카페 24와 같은 임대몰에서는 자동 로그인 사용을 권장합니다.
링크 클릭 동작 관련하여 모바일 환경에서 별도 처리가 필요할 수 있으며, 필요 시 문의해 주세요.

기능 문의 및 추가 확인 사항은 [email protected] 으로 연락해 주세요.

Previous행동 지침 (Action Instruction)Next대시보드

Last updated 1 day ago

Was this helpful?