링크로 채팅 창을 여는 방법

테마 코드를 수정하지 않고도 딥링크를 사용해 채팅 창을 열 수 있습니다. Shopify Theme Editor에서 버튼, 아이콘 또는 텍스트 요소에 해시태그 #shoply-ai-chatbot만 추가하면 됩니다. 고객이 이러한 요소를 클릭하면 채팅 창이 자동으로 열립니다.

실시간 예시: demo.shoplyai.ai

단계:

테마 편집기에서 원하는 버튼, 텍스트 또는 아이콘을 수정합니다.
링크 또는 URL을 #shoply-ai-chatbot으로 설정합니다.

예시:

버튼을 사용해 채팅 창 열기:

링크된 텍스트를 사용해 채팅 창 열기:

제품별 질문으로 채팅 열기

상품 페이지에 “Question About This Product?” 버튼을 추가하면 쇼핑 중인 고객이 해당 상품에 대해 질문할 수 있도록 도와줄 수 있습니다. 링크를 #shoply_product_questions로 설정하세요. 클릭하면 상품명, 간단한 상품 하이라이트, 그리고 해당 상품과 관련된 자동 생성 질문이 포함된 상태로 채팅이 열립니다.

Shopify Theme Editor에서 상품 템플릿을 열고 URL을 지원하는 버튼 또는 링크된 텍스트를 추가하거나 수정합니다.
라벨을 “Question About This Product?”로 설정하고 링크를 #shoply_product_questions로 설정합니다.
저장한 뒤 상품 페이지로 이동하여 링크를 클릭해 상품 질문을 확인합니다.

테마에서 적절한 버튼이나 링크 설정을 제공하지 않는 경우, 상품 템플릿의 HTML에 다음 링크를 추가하세요:

html


<a href="#shoply_product_questions">Question About This Product?</a>

Shoply가 상품 컨텍스트를 인식할 수 있도록 이 링크는 상품 페이지에서 사용하세요. #shoply_product_questions로 끝나는 전체 상품 URL을 공유할 수도 있습니다.

Bent 85 Skis에 대한 상품 질문 채팅 사용해 보기 . 제안에는 스키 무게, 코어, 락커 프로필, 탑시트 아트에 대한 질문이 포함됩니다. 고객은 제안을 선택하거나 직접 질문을 입력할 수 있습니다.

이 링크를 어디에 사용할 수 있는지에 대한 예시는 FAQ 대체 가이드의 AI 기반 상품 질문을 참고하세요.

이러한 상품 질문은 자동으로 생성됩니다. Customize AI Chat에서 설정한 시작 질문은 대신 일반 채팅 열기에 적용됩니다.

미리 입력된 질문으로 채팅 열기

채팅 창을 열면서 자동으로 질문도 전송하고 싶으신가요? 해시 프래그먼트(권장) 또는 URL 쿼리 파라미터를 사용해 이를 구현할 수 있습니다.

이는 배송 정책, 반품 정책 또는 상품 문의와 같은 자주 묻는 주제로 바로 연결되는 링크를 만들기에 적합합니다.

권장: 해시 프래그먼트(페이지 새로고침 없음)

#shoply_question= 해시 프래그먼트를 사용하세요. 해시는 브라우저에서만 처리되므로, 이 링크를 클릭해도 페이지가 새로고침되지 않으며, 기존 채팅 기록도 유지됩니다.

형식:

plaintext


https://your-store.com#shoply_question=your question here

예시:

배송 정책: https://your-store.com#shoply_question=What is your shipping policy?
반품: https://your-store.com#shoply_question=How do I return an item?
주문 상태: https://your-store.com#shoply_question=Where is my order?
상품 탐색: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

스토어의 어떤 페이지와도 함께 사용할 수 있습니다. 예를 들어, 특정 상품 페이지에서 질문과 함께 챗봇을 열려면:

plaintext


https://your-store.com/products/blue-jacket#shoply_question=What sizes are available?

레거시: URL 쿼리 파라미터

이전 버전과의 호환성을 위해 ?shoply_question= 쿼리 파라미터도 계속 지원됩니다. 다만 고객이 이미 보고 있는 URL에 쿼리 파라미터를 추가하면 페이지가 새로고침됩니다.

형식:

plaintext


https://your-store.com?shoply_question=your question here

참고: 특수 문자나 공백이 포함된 질문을 사용할 때는 URL 인코딩을 해야 합니다. 대부분의 브라우저가 이를 자동으로 처리하지만, 링크를 프로그래밍 방식으로 추가하는 경우에는 적절한 URL 인코딩을 사용하세요(예: 공백은 %20으로 변환).

고객이 두 종류의 링크 중 어느 것을 클릭하든, 채팅 창이 자동으로 열리고 질문이 AI 챗봇으로 전송되어 즉시 답변을 받을 수 있습니다.

활용 사례:

푸터에 “Ask about shipping” 링크 추가
특정 질문으로 챗봇을 여는 QR 코드 생성
이메일 캠페인이나 주문 확인 메시지에 유용한 링크 포함
상품 페이지에 상황별 도움말 링크 추가(예: “Ask about sizing”)

딥링크로 채팅 창을 여는 방법(Theme template의 코드 수정 필요)

이전 섹션에서는 테마 코드를 수정하지 않고 Theme Editor에서 버튼, 아이콘 또는 텍스트에 해시태그(딥링크)를 추가해 채팅 창을 여는 방법을 설명했습니다.

하지만 스토어 어디에나 딥링크를 자유롭게 추가하고 싶다면(예: 헤더에 새 아이콘 만들기), 템플릿 코드를 수정해야 합니다.

아래는 Theme template에서 새 아이콘을 만들 때 사용할 수 있는 간단한 HTML 코드 예시입니다:

코드 예시

1. 채팅 아이콘

아래 코드는 채팅 아이콘을 추가합니다:

plaintext


<a href="#shoply-ai-chatbot"
   style="display:inline-flex;align-items:center;margin-right:13px">
    <svg viewBox="64 64 896 896" style="height:28px;width:28px;fill:orange">
        <path
            d="M868.2 377.4c-18.9-45.1-46.3-85.6-81.2-120.6a377.26 377.26 0 00-120.5-81.2A375.65 375.65 0 00519 145.8c-41.9 0-82.9 6.7-121.9 20C306 123.3 200.8 120 170.6 120c-2.2 0-7.4 0-9.4.2-11.9.4-22.8 6.5-29.2 16.4-6.5 9.9-7.7 22.4-3.4 33.5l64.3 161.6a378.59 378.59 0 00-52.8 193.2c0 51.4 10 101 29.8 147.6 18.9 45 46.2 85.6 81.2 120.5 34.7 34.8 75.4 62.1 120.5 81.2C418.3 894 467.9 904 519 904c51.3 0 100.9-10.1 147.7-29.8 44.9-18.9 85.5-46.3 120.4-81.2 34.7-34.8 62.1-75.4 81.2-120.6a376.5 376.5 0 0029.8-147.6c-.2-51.2-10.1-100.8-29.9-147.4zm-66.4 266.5a307.08 307.08 0 01-65.9 98c-28.4 28.5-61.3 50.7-97.7 65.9h-.1c-38 16-78.3 24.2-119.9 24.2a306.51 306.51 0 01-217.5-90.2c-28.4-28.5-50.6-61.4-65.8-97.8v-.1c-16-37.8-24.1-78.2-24.1-119.9 0-55.4 14.8-109.7 42.8-157l13.2-22.1-9.5-23.9L206 192c14.9.6 35.9 2.1 59.7 5.6 43.8 6.5 82.5 17.5 114.9 32.6l19 8.9 19.9-6.8c31.5-10.8 64.8-16.2 98.9-16.2a306.51 306.51 0 01217.5 90.2c28.4 28.5 50.6 61.4 65.8 97.8l.1.1.1.1c16 37.6 24.1 78 24.2 119.8-.1 41.7-8.3 82-24.3 119.8zM681.1 364.2c-20.4 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.6 37.1 37.1 37.1s37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1zm-175.2 0c-20.5 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.7 37.1 37.1 37.1 20.5 0 37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1z" />
    </svg>
</a>

2. AI 별 아이콘

아래 코드는 AI 별 아이콘을 추가합니다:

plaintext


<a href="#shoply-ai-chatbot" style="display:inline-flex;align-items:center">
    <img style="height:28px;width:28px" src="https://[CFN_PRODUCTION_ASSET]/AIStar.svg" alt="Shoply Chatbot"  />
</a>

3. 함수 호출 방식

해시태그를 사용하는 것 외에도, 어떤 버튼/아이콘이든 onclick 속성에 함수 호출 openShoplyAIChatBot()를 넣을 수 있습니다. 그러면 고객이 버튼/아이콘을 클릭했을 때 채팅 창이 표시됩니다.

plaintext


<button onclick="openShoplyAIChatBot()" style="border-radius:20px;margin:10px;cursor:pointer;background:black">
    <span style="font-size:13px;color:white;margin:5px">Click to Chat</span>
</button>

도움이 필요하신가요?

위 예시 중 어떤 것이든 사용하여 sections/header.liquid 파일에서 검색 아이콘 옆에 코드를 삽입하면, 스토어 헤더에 채팅 딥링크를 추가할 수 있습니다.

하지만 Theme template의 코드를 수정하는 것이 아직 완전히 익숙하지 않더라도 걱정하지 마세요!

언제든지 저희와 미팅 예약하기 를 통해 문의해 주세요. 스토어의 고유한 분위기에 맞는 최적의 위치에 완벽한 아이콘을 설정할 수 있도록 기꺼이 도와드리겠습니다.

플로팅 아이콘을 숨기는 방법은?

딥링크로 채팅 창이 열리도록 설정한 후에는 플로팅 아이콘을 숨기고 싶을 수 있습니다. 또한 많은 스토어 운영자들이 웹사이트에 플로팅 아이콘이 너무 많으면 부담스럽다고 이야기합니다. 이러한 우려를 잘 알고 있습니다! 그래서 채팅 아이콘을 숨길 수 있는 기능을 도입했습니다.

앱 관리자 콘솔의 “Customize AI Chat” 섹션에서 Select a Chat Icon 설정 아래에 있는 다음 옵션을 선택할 수 있습니다:

“Hide floating icon and use deep link to open chat” 옵션.

이렇게 하면 플로팅 아이콘을 숨기면서도 딥링크를 통해 채팅 창을 계속 열 수 있습니다.