설치 스크립트

어떤 웹사이트든 script 태그 하나로 붙습니다. 프레임워크를 가리지 않고, 사이트 쪽에서 빌드할 것도 없습니다.

기본

HTML

<script src="https://polytalk.polymorph.co.kr/v1/widget.js" data-project-key="pk_..." async></script>

스크립트는 약 19KB(gzip)이고 async 로 불러 페이지 표시를 막지 않습니다. 화면에 그리는 일은 본문이 준비된 뒤에 하므로 <head> 에 넣어도 됩니다.

옵션

script 태그의 data- 속성으로 정합니다.

속성	기본값	설명
`data-project-key`	(필수)	콘솔의 앱 키(pk_…).
`data-label`	문의하기	버튼과 창 제목에 쓰는 문구.
`data-launcher`	floating	`floating` 늘 오른쪽 아래에 띄움 · `desktop-only` 좁은 화면에서는 숨김 · `none` 버튼 없이 `PolyTalk.open()` 으로만 엶
`data-offset-bottom`	20px	하단 탭바 등을 피해 버튼을 올릴 때. CSS 길이(예: 96px).

내 버튼으로 열기

떠 있는 버튼 대신 사이트의 메뉴나 푸터에서 열고 싶다면 data-launcher="none" 으로 두고 PolyTalk.open() 을 부릅니다.

HTML

<script src="https://polytalk.polymorph.co.kr/v1/widget.js" data-project-key="pk_..." data-launcher="none" async></script>

<a href="#" onclick="window.PolyTalk?.open(); return false;">고객센터</a>

React · Next.js

같은 스크립트를 공통 레이아웃에 한 번만 넣으면 됩니다. 페이지를 옮겨 다녀도 위젯은 그대로 남습니다.

Next.js (app/layout.tsx)

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <body>
        {children}
        <Script
          src="https://polytalk.polymorph.co.kr/v1/widget.js"
          data-project-key="pk_..."
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

보안 설정이 있는 사이트

Content-Security-Policy 를 쓰고 있다면 스크립트와 API 주소를 허용해야 합니다.

CSP

script-src  https://polytalk.polymorph.co.kr;
connect-src https://polytalk.polymorph.co.kr;

위젯이 뜨는데 문의를 보내면 「허용되지 않은 출처」가 나온다면, 콘솔 설정의 위젯을 띄울 주소에 지금 사이트 주소가 있는지 확인하세요. https:// 와 www 유무까지 정확히 같아야 합니다.