# 젤라또 설치하기 {% hint style="info" %} 이 문서에서는 사이트에 젤라또 챗봇을 설치하는 방법을 안내합니다. {% endhint %}

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

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

{% hint style="warning" %} 챗봇은 한 번 저장 후 사용할 수 있습니다. 관리자 화면 **젤라또 만들기 메뉴**에서 챗봇 저장 후 챗봇 키를 확인해 주세요. {% endhint %} *** ## **설치 방법** ### **1. 설치하기** 사이트의 `` 영역에 다음 스크립트 코드를 삽입해 주세요. ```javascript ``` {% hint style="success" %} '서비스 키'는 발급된 사이트 고유 키로 관리자 화면의 **설정** **메뉴**의 **설정 > 서비스 키** 에서 확인할 수 있습니다. {% endhint %} ### **2. gelatto.init()** ```javascript if (window.gelatto && window.gelatto.init) { window.gelatto.init({ serviceKey: '서비스 키', campaignKey: '챗봇 키', autoLogin: false, memberId:'회원 아이디' // init 실행 당시에 memberId가 있을 시에만 전달해도 됨 }); } ``` {% hint style="success" %} * '서비스 키'는 사이트 고유 키로 관리자 화면의 **설정** **메뉴**의 **설정 > 서비스 키** 에서 확인할 수 있습니다. * '챗봇 키'는 관리자 화면의 **젤라또 만들기 메뉴**에서 챗봇의 필수 값 저장 후 페이지 우측 상단에서 확인할 수 있습니다. {% endhint %} #### **설정 옵션** gelatto.init() 주요 옵션 사항은 다음과 같습니다.

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

* `autoLogin`: `true` 설정 시, html 태그 안에 `gelatto-member-id` 가 있으면 자동 로그인 처리합니다. {% hint style="warning" %} 챗봇 대화 이력 등을 사용자 ID 기준으로 확인하려면 로그인 처리가 필요합니다. 로그인 처리는 아래를 참고해 주세요. {% endhint %} *** ## **로그인/로그아웃 처리** ### **수동 로그인** * 챗봇 자동 로그인을 사용하지 않을 시 로그인/로그아웃 함수를 사용하여 로그인 처리를 할 수 있습니다. * 수동 로그인 설정 시 gelatto.init() 함수에서 `autoLogin` 을 `false` 로 설정 후 아래와 같이 처리해 주세요. #### **로그인 처리 함수** ```javascript 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) 단위) #### **로그아웃 처리 함수** ```javascript 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` 로 설정 후 아래와 같이 처리해 주세요. * `` 태그로 처리하는 방법과 `

` 태그로 처리하는 방법 중 **하나를 선택**하여 사용해 주세요. #### **\ 태그 처리 방법** ```html ``` #### **\

태그 처리 방법** ```html 방법 1 :

``` ```html 방법 2 :

회원 아이디

``` {% hint style="danger" %} 태그 처리는 한 가지 방식을 선택하여 사용해 주세요. {% endhint %} *** ## **주의사항** * SPA, 커스텀 사이트는 최대한 수동 로그인을 권장합니다. 자동 로그인을 사용할 경우 성능에 영향을 미칠 수 있습니다. * 카페 24와 같은 임대몰에서는 자동 로그인 사용을 권장합니다. * 링크 클릭 동작 관련하여 모바일 환경에서 별도 처리가 필요할 수 있으며, 필요 시 문의해 주세요. > 기능 문의 및 추가 확인 사항은 으로 연락해 주세요. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://groobee.gitbook.io/gelatto/getting-started/installation.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.