AI에게 질문 버튼

사이트 어디에나 클릭 한 번으로 채팅에 질문을 보내는 버튼을 추가하세요

사이트 어디에나 — 제품 옆, 요금표, FAQ 등 — 버튼이나 링크를 배치할 수 있으며, 클릭하면 채팅이 열리고 방문자를 대신해 즉시 질문을 보냅니다. 클릭 한 번으로 메시지가 전송되고 AI가 답하므로, 입력 없이 답을 얻을 수 있습니다.

팁: 요금표, FAQ 항목, 제품 페이지에 안성맞춤입니다. 방문자가 자주 묻는 항목 옆에 AI에게 질문 버튼을 배치하세요.

작동 방식

Asyntai 위젯 스크립트가 페이지에 설치되면 window.AsyntaiWidget에서 글로벌 JavaScript API를 노출합니다. 해당 메서드를 호출하여 채팅 위젯을 프로그래밍 방식으로 제어할 수 있습니다.

질문을 보내려면 보낼 메시지와 함께 window.AsyntaiWidget.ask()를 호출하세요:

// Open the chat and send a question
window.AsyntaiWidget.ask("What are your shipping times?");

기본 예제

HTML 어디에나 버튼을 추가하고 보낼 질문을 전달하세요:

<button onclick="window.AsyntaiWidget.ask('What are your shipping times?')">
  Ask about shipping
</button>

방문자가 버튼을 클릭하면 채팅이 열리고 질문이 자동으로 전송됩니다.

텍스트 링크 예시

클릭하면 질문을 보내는 텍스트 링크를 추가하세요:

<a href="#" onclick="event.preventDefault(); window.AsyntaiWidget.ask('Do you offer refunds?');">
  Ask about refunds
</a>

참고: 앵커 링크에 event.preventDefault()를 사용하여 클릭 시 페이지가 상단으로 스크롤되는 것을 방지하세요.

스타일 버튼 예제

사용자 정의 스타일로 더 눈에 띄는 CTA 버튼을 만드세요:

<style>
  .ask-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
  }
  .ask-ai-btn:hover {
    background: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4);
  }
</style>

<button class="ask-ai-btn" onclick="window.AsyntaiWidget.ask('How does pricing work?')">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2l1.9 4.8L18.7 8l-4.8 1.9L12 14.7l-1.9-4.8L5.3 8l4.8-1.2L12 2z"/>
  </svg>
  Ask AI
</button>

자동으로 로드됩니다

ask() 메서드는 전송 전에 위젯의 로딩이 완료될 때까지 기다리므로, 방문자가 페이지 로드 직후에 클릭해도 작동합니다. 위젯이 준비되었는지 확인할 필요가 없습니다.

전체 API 참조

메서드	설명
`AsyntaiWidget.ask("message")`	채팅을 열고 방문자가 입력한 것처럼 메시지를 전송합니다
`AsyntaiWidget.open()`	채팅 위젯을 엽니다
`AsyntaiWidget.close()`	채팅 위젯을 닫습니다
`AsyntaiWidget.toggle()`	채팅을 열거나 닫습니다