제품 투어와 “보여 주세요”

자체 페이지를 단계별로 안내합니다. 단계 목록으로 투어를 만들고 코드에서 시작하며 어시스턴트의 “보여 주세요” 표시도 설명합니다.

설명보다 직접 보여 줍니다. 제품 투어는 자체 페이지에서 방문자를 단계별로 안내합니다. 페이지가 살짝 어두워지고 해당 요소를 테두리로 강조하며 옆의 말풍선에 텍스트와 Zurück(뒤로), Weiter(다음), Beenden(종료) 버튼이 있습니다.

투어 생성

/app/projects/{id}의 텍스트와 양식 탭, 제품 투어 섹션에서 JSON으로 입력합니다. 비우고 저장하면 모든 투어를 제거합니다.

[
  {
    "id": "erste-schritte",
    "name": "First steps",
    "steps": [
      { "selector": "#konto", "title": "Your account", "text": "Change your details here." },
      { "selector": ".rechnung", "text": "And the invoices are here.", "placement": "top" }
    ]
  }
]

투어 항목:

id – 필수이며 고유합니다. 소문자, 숫자, -와 _를 사용하고 문자나 숫자로 시작하며 최대 48자입니다. 이 ID로 시작합니다.
name – 운영자용 이름입니다.
steps – 1–30단계입니다.

단계 항목:

selector – 필수, 페이지 요소의 CSS 선택자이며 최대 300자입니다.
text – 필수, 말풍선 텍스트입니다.
title – 선택적 제목입니다.
placement – bottom(기본값) 또는 top입니다. 보장되는 위치가 아닌 요청이며 위에 맞지 않으면 아래로 갑니다.
i18n_weiter, i18n_zurueck, i18n_fertig, i18n_ende – 다음, 뒤로, 완료와 종료 버튼의 선택적 자체 레이블입니다.

제한은 프로젝트당 최대 20개 투어, 총 32 KB입니다. 저장 시 JSON을 검사하고 잘못되면 오류를 알려 줍니다.

투어 시작

“투어 시작” 버튼이나 첫 로그인 후처럼 코드에서 시작합니다.

ReactiveChat('tour', 'erste-schritte');

시작되면 true, 아니면 false를 반환합니다. 다음으로 종료할 수 있습니다.

ReactiveChat('tourStop');

방문자는 Beenden, 마지막 단계의 Fertig(완료) 또는 Escape로 종료합니다. 카운터가 현재 단계를 표시합니다.

요소가 없는 경우

이 페이지에 없거나 숨겨져 있어 단계의 요소를 찾지 못하면 건너뜁니다. 모든 요소가 없으면 시작하지 않고 false를 반환합니다. 따라서 실제 시작할 페이지에서 선택자를 확인합니다.

디자인

투어에는 브랜드 색상과 사용자 지정 CSS와 무관한 고정된 중립 디자인이 있습니다. 말풍선 너비는 최대 320 px입니다. 자체 레이블이 없으면 모든 언어에서 버튼 이름이 “Beenden”, “Zurück”, “Weiter”, “Fertig”입니다. 따라서 영어·폴란드어 페이지의 투어에는 단계마다 i18n_* 필드를 지정합니다.

“보여 주세요”

AI 어시스턴트는 답변에서 페이지의 “장바구니에 추가” 버튼 같은 조작 요소를 가리킬 수 있습니다. 이를 위해 채팅이 처음 열린 뒤 현재 페이지의 보이는 조작 요소를 읽습니다.

요소가 뚜렷하게 보이면 테두리로 강조하고 옆에 답변 첫 문장을 표시합니다. 채팅 창은 열린 상태를 유지합니다.
가려져 있거나 방문자가 휴대전화를 쓰면 메시지에 보여 주세요 버튼이 나타납니다. 클릭해야 요소를 표시합니다.
터치, Escape 또는 멀리 스크롤하면 표시가 끝납니다.

이를 위해 채팅이 스스로 닫히지는 않습니다.

스니펫에서 페이지 읽기와 “보여 주세요”를 함께 끌 수 있습니다.

data-rc-dom-spiegel="false"

개별 영역은 data-rc-private나 data-rc-ignore로 제외합니다. 자세한 내용은 지식과 출처에 있습니다.

최종 업데이트: 2026-10-25