맞춤 열기 버튼

사이트 어디에나 버튼이나 링크를 추가하여 채팅 위젯을 엽니다

기본적으로 방문자는 페이지 모서리의 플로팅 채팅 아이콘을 클릭하여 채팅을 엽니다. 하지만 내비게이션 바, 히어로 섹션, CTA 영역 또는 다른 곳에 클릭하면 채팅 위젯을 여는 사용자 정의 버튼이나 링크를 추가할 수도 있습니다.

팁: 사이트의 내비게이션 바에 "채팅하기" 링크, 제품 페이지에 "도움 받기" 버튼 또는 채팅을 직접 여는 CTA를 추가하는 데 유용합니다.

작동 방식

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

사용 가능한 메서드

// Open the chat widget
window.AsyntaiWidget.open();

// Close the chat widget
window.AsyntaiWidget.close();

// Toggle open/close
window.AsyntaiWidget.toggle();

기본 예제

HTML 어디에나 버튼을 추가하고 window.AsyntaiWidget.open()을 호출하는 클릭 핸들러를 연결하세요:

<button onclick="window.AsyntaiWidget.open()">Chat with us</button>

그게 전부입니다. 방문자가 버튼을 클릭하면 채팅 위젯이 열립니다.

내비게이션 바 예제

사이트 내비게이션에 "채팅하기" 링크를 추가하세요:

<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
  <a href="#" onclick="event.preventDefault(); window.AsyntaiWidget.open();">Chat with us</a>
</nav>

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

스타일 버튼 예제

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

<style>
  .chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
  }
  .chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.45);
  }
  .chat-btn:active {
    transform: translateY(0);
  }
  .chat-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
</style>

<button class="chat-btn" onclick="window.AsyntaiWidget.open()">
  <svg viewBox="0 0 24 24">
    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
  </svg>
  Chat with us
</button>

토글 버튼 예제

채팅을 열고 닫는 단일 버튼을 원하는 경우:

<button onclick="window.AsyntaiWidget.toggle()">Toggle Chat</button>

위젯 준비 상태 확인

위젯은 비동기적으로 로드되므로 위젯이 로드를 완료하기 전에 버튼이 클릭될 수 있는 경우 먼저 initialized 속성을 확인해야 합니다:

<script>
  function openChat() {
    if (window.AsyntaiWidget && window.AsyntaiWidget.initialized) {
      window.AsyntaiWidget.open();
    } else {
      // Widget not ready yet — optionally show a message
      alert('Chat is loading, please try again in a moment.');
    }
  }
</script>

<button onclick="openChat()">Chat with us</button>

팁: 대부분의 페이지에서 위젯은 1초 이내에 초기화됩니다. initialized 확인은 버튼이 페이지에 매우 빨리 나타나는 경우에만 필요합니다(예: 빠르게 로드되는 사이트의 스크롤 없이 보이는 영역).

기본 채팅 아이콘 숨기기

플로팅 채팅 아이콘을 자신의 사용자 정의 버튼으로 완전히 교체하려면 CSS로 숨길 수 있습니다:

<style>
  #mccs-chat-button {
    display: none !important;
  }
</style>

주의: 기본 채팅 아이콘을 숨기는 경우 모든 페이지에서 사용자 정의 버튼이 명확하게 표시되는지 확인하세요. 그렇지 않으면 방문자가 채팅이 가능한지 알 수 없습니다.

전체 API 참조

메서드	설명
`AsyntaiWidget.open()`	채팅 위젯을 엽니다
`AsyntaiWidget.close()`	채팅 위젯을 닫습니다
`AsyntaiWidget.toggle()`	채팅을 열거나 닫습니다
`AsyntaiWidget.initialized`	부울 — `true` 위젯이 준비되었을 때

문서