채팅 화면을 만들지 않고 내 사이트에 에이전트 넣기

사이트에 “무엇이든 물어보세요” 창을 하나 달고 싶을 때가 있습니다. 직접 만들려면 일이 많습니다. 채팅 화면을 그리고, 답이 흘러나오게 하고, 휴대폰 화면에 맞추고, 대화를 저장해야 합니다. 에이전트를 만드는 일보다 창을 만드는 일이 더 커지곤 합니다.

endue Live 의 사이트에 넣기를 쓰면 이 일이 코드 한 줄로 줄어듭니다. 스튜디오에서 사이트 주소를 등록하고, 나오는 코드를 사이트에 붙이면 끝입니다. 창 안에서 답하는 에이전트는 내가 스튜디오에서 만든 바로 그 에이전트입니다.

사이트에 열리는 창은 endue.live 의 대화 화면과 같은 것입니다. 어떤 느낌인지 먼저 보려면 endue.live/@tin 에서 Tin 에게 말을 걸어 보세요.

이 글은 가상의 동네 빵집 “하루빵” 의 사이트를 예로 듭니다. 빵집 주인은 영업시간과 오늘 나온 빵, 케이크 예약 방법을 아는 에이전트를 만들어 두었습니다.

방문자에게는 이렇게 보입니다

코드를 붙이면 사이트 구석에 버튼이 하나 뜹니다. 버튼의 문구와 모양은 주인이 고릅니다.

버튼을 누르면 그 자리에서 창이 열립니다. 방문자는 페이지를 떠나지 않고 질문하고, 답은 만들어지는 대로 흘러나옵니다. 휴대폰에서는 창이 화면을 가득 채웁니다.

방문자가 다른 페이지로 넘어가도 대화는 이어집니다. 메뉴를 보다가 물어보고, 예약 페이지로 가서 창을 다시 열면 하던 이야기가 그대로 있습니다.

넣는 방법

1. Live 켜기

사이트에 넣기는 endue Live 위에서 동작합니다. 스튜디오의 라이브 패널에서 endue.live 에 공개를 먼저 켭니다. Live 가 처음이라면 endue Live 로 내 에이전트를 여러 사람에게 서비스하기를 먼저 보세요.

2. 사이트 주소 등록하기

라이브 패널의 사이트에 넣기 줄에서 설정을 누릅니다. 사이트에서 켜기를 켜고, 허용 사이트에 내 사이트 주소를 넣습니다.

• https 로 시작하는 사이트만 등록됩니다.
• www 나 하위 도메인까지 쓰려면 *.주소 를 하나 더 넣습니다. 위 화면의 둘째 줄이 그 예입니다.
• 사이트는 열 곳까지 넣을 수 있습니다.
• 올리기 전에 내 컴퓨터에서 시험하려면 localhost 를 넣습니다.

3. 코드 붙여 넣기

화면 아래 붙여 넣을 코드를 복사해 사이트의 </body> 바로 앞에 붙입니다.

<script src="https://endue.live/embed/v1.js" data-agent="haru-bakery" async></script>

data-agent 뒤의 값은 내 에이전트의 핸들입니다. 스튜디오가 채워서 보여 주니 그대로 복사하면 됩니다. 사이트 빌더를 쓴다면 코드를 직접 넣는 칸에 붙입니다. 보통 “맞춤 코드” 나 “HTML 삽입” 같은 이름입니다.

4. 모양 고르기

같은 화면에서 버튼의 위치와 모양, 문구, 창의 밝기를 고릅니다. 오른쪽 미리보기에서 PC 와 휴대폰 화면을 번갈아 확인합니다. 강조 색과 환영 인사, 시작 제안은 페이지 꾸미기에서 정한 값을 같이 씁니다.

저장을 누르면 1분 안에 사이트에 반영됩니다. 나중에 문구나 색을 바꿔도 사이트의 코드는 다시 붙일 필요가 없습니다.

원하는 자리에 놓기

배치는 두 가지입니다.

떠 있는 버튼은 화면 구석에 떠서 어느 페이지에서든 열립니다. 사이트 전체에 안내 창구를 두고 싶을 때 맞습니다. 모든 페이지에 공통으로 들어가는 자리에 코드를 한 번 붙이면 됩니다.

페이지 안은 버튼 없이 페이지의 정해진 자리에 창을 바로 놓습니다. 문의 페이지나 자주 묻는 질문 옆처럼, 방문자가 물어보러 오는 자리에 맞습니다. 배치를 “페이지 안” 으로 바꾸면 코드가 두 줄이 됩니다.

<div data-endue-live="haru-bakery" style="height:600px"></div>
<script src="https://endue.live/embed/v1.js" data-agent="haru-bakery" async></script>

<div> 는 창을 둘 자리에, <script> 는 </body> 바로 앞에 붙입니다. 창의 높이는 height 값으로 조절합니다. 아래는 하루빵의 문의 페이지입니다. 왼쪽에 자주 묻는 질문을 두고 오른쪽에 창을 놓았습니다.

페이지마다 다른 에이전트를 둘 수도 있습니다. 주문 페이지에는 주문을 돕는 에이전트를, 채용 페이지에는 채용을 안내하는 에이전트를 붙이는 식입니다. 에이전트마다 Live 를 켜고 사이트 주소를 등록한 뒤, 각자의 코드를 해당 페이지에 붙입니다.

내 사이트에서만 열립니다

붙여 넣은 코드는 누구나 볼 수 있습니다. 누가 그 코드를 복사해 자기 사이트에 붙이면 어떻게 될까요. 아무 일도 일어나지 않습니다. 창은 주인이 등록한 사이트에서만 열리고, 등록되지 않은 사이트에서는 버튼도 뜨지 않습니다.

방문자 대화에서 에이전트가 할 수 있는 일의 범위는 endue.live 에서와 같습니다. 승인이 필요한 동작은 실행되지 않고, 주인 개인의 기억은 읽지 못합니다. 한 사람이 1분에 보낼 수 있는 메시지 수도 정해져 있습니다. 사용량은 주인의 요금제 한도에서 나갑니다.

넣은 뒤에 보는 곳

사이트에서 나눈 대화도 에이전트 대화 목록의 Live 방문자에 모입니다. 손님이 무엇을 묻는지 읽고, 자주 나오는 질문은 지침과 시작 제안에 반영합니다. 얼마나 쓰였는지는 스튜디오 사용량 탭의 라이브 줄에서 확인합니다.

창이 보이지 않을 때

• 등록한 주소와 같은지 봅니다. haru-bakery.example 만 등록했는데 사이트가 www.haru-bakery.example 로 열리면 창이 뜨지 않습니다. *.haru-bakery.example 을 더합니다.
• 스위치 두 개가 켜져 있는지 봅니다. 라이브 패널의 “endue.live 에 공개” 와 사이트에 넣기의 “사이트에서 켜기” 입니다.
• 저장했는지 봅니다. 저장하고 1분쯤 기다린 뒤 새로 고칩니다.
• 브라우저 콘솔을 엽니다. 창을 그리지 못한 이유가 [endue Live] 로 시작하는 한 줄로 찍힙니다.
• 사이트에 CSP 가 있다면 설정 화면의 “사이트에 CSP 가 있다면” 을 펼칩니다. 거기 나오는 세 줄을 사이트의 정책에 더합니다.
• endue.live 주소를 iframe 으로 직접 넣지 않습니다. endue.live 페이지는 다른 사이트의 프레임 안에서 열리지 않습니다. 위의 코드를 쓰세요.

시작하기

코드 한 줄을 붙이는 데는 몇 분이면 됩니다. 남는 시간은 에이전트가 손님에게 무엇을 어떻게 답할지 다듬는 데 쓰세요.

• 창이 어떤 느낌인지 먼저 보기: endue.live/@tin
• Live 를 처음 켠다면: endue Live 로 내 에이전트를 여러 사람에게 서비스하기