테마 코드를 편집하지 않고 딥 링크로 채팅 창을 여는 방법

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

실시간 예시: demo.shoplyai.ai

단계:

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

예시:

버튼을 사용하여 채팅 창 열기:

링크가 연결된 텍스트를 사용하여 채팅 창 열기:

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

채팅 창을 열면서 질문을 자동으로 전송하고 싶으신가요? 해시 프래그먼트(권장) 또는 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 챗봇으로 전송되어 즉시 답변을 받을 수 있습니다.

사용 사례:

푸터에 “배송에 대해 질문하기” 링크 추가
특정 질문과 함께 챗봇을 여는 QR 코드 만들기
이메일 캠페인 또는 주문 확인 메일에 유용한 링크 포함
상품 페이지에 상황에 맞는 도움말 링크 추가(예: “사이즈 문의”)

테마 템플릿 코드를 편집하여 딥 링크로 채팅 창을 여는 방법

앞 섹션에서는 테마 코드를 편집하지 않고 테마 편집기에서 버튼, 아이콘 또는 텍스트에 해시태그(딥 링크)를 직접 추가하여 채팅 창을 실행하는 방법을 설명했습니다.

하지만 스토어 어디에나 딥 링크를 추가할 수 있는 완전한 유연성이 필요하다면(예: 헤더에 새 아이콘 만들기) 템플릿 코드를 편집해야 합니다.

아래에는 테마 템플릿에 새 아이콘을 만드는 데 사용할 수 있는 간단한 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 파일의 검색 아이콘 옆에 코드를 삽입하여 스토어 헤더에 채팅 딥 링크를 추가할 수 있습니다.

하지만 테마 템플릿의 코드를 직접 편집하는 것이 익숙하지 않아도 걱정하지 마세요!

저희와 미팅 예약하기 를 이용하시면 스토어의 분위기에 맞는 완벽한 아이콘을 이상적인 위치에 설정할 수 있도록 기꺼이 도와드리겠습니다.

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

딥 링크로 채팅 창을 열도록 설정한 후에는 플로팅 아이콘을 숨기고 싶을 수 있습니다. 또한 스토어 소유자들은 웹사이트에 플로팅 아이콘이 너무 많으면 복잡해 보일 수 있다고 자주 말합니다. 고객님의 우려를 이해합니다! 그래서 채팅 아이콘을 숨기는 기능을 추가했습니다.

앱 관리자 콘솔의 “AI 채팅 사용자 지정” 섹션에서 채팅 아이콘 선택 설정 아래에 있는 다음 옵션을 선택할 수 있습니다.

“플로팅 아이콘을 숨기고 딥 링크로 채팅 열기” 옵션입니다.

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