SvelteKit

오리진 준비하기#

에이전트 임베드를 활성화한 뒤 각 SvelteKit 개발, 미리보기, 운영 오리진을 정확히 허용합니다. 사이트 전체 실행 버튼은 루트 레이아웃, 일부 경로는 중첩 레이아웃/페이지 컴포넌트를 사용하세요.

컴포넌트 만들기#

onMount는 브라우저에서만 실행됩니다. 소유 레이아웃/컴포넌트가 언마운트될 수 있으면 정리 함수를 반환합니다.

<script lang="ts">
  import { onMount } from "svelte";

  const slug = "YOUR_SITE_SLUG";

  onMount(() => {
    if (document.getElementById(`maf-embed-root-${slug}`)) return;

    const script = document.createElement("script");
    script.id = "maf-agent";
    script.src = "https://makeagent.fast/embed.js?v=20260728-widget-v2";
    script.dataset.agent = slug;
    script.dataset.position = "right";
    script.async = true;
    document.body.appendChild(script);

    return () => {
      script.remove();
      document.getElementById(`maf-embed-root-${slug}`)?.remove();
    };
  });
</script>

전체 앱은 src/routes/+layout.svelte에서 컴포넌트를 한 번 마운트합니다. 경로 그룹은 해당 그룹의 +layout.svelte에 두면 방문자가 그룹을 나갈 때 정리가 실행 버튼을 제거합니다.

안전하게 설정 사용하기#

공개 사이트 슬러그는 자격 증명이 아니므로 SvelteKit 공개 환경 값으로 둘 수 있습니다. MAF API 키, AI 제공자 키, 커넥터 시크릿에 $env/static/public 또는 브라우저 코드를 사용하지 마세요. 서버 전용 모듈/경로에 보관합니다.

대화 상태 유지 또는 초기화#

루트 레이아웃에 컴포넌트를 유지하면 클라이언트 탐색 동안 같은 iframe이 보존됩니다. 경로 범위 정리는 의도적으로 iframe과 현재 페이지 상태를 버립니다. 모든 페이지에서 반복 마운트하지 말고 한 동작을 선택하세요.

운영 빌드 확인하기#

1. SvelteKit 운영 어댑터/빌드를 실행합니다.
2. 공개 경로를 직접 로드하고 실행 버튼/루트 하나를 확인합니다.
3. 소유 레이아웃 안팎으로 이동합니다.
4. Network/CSP와 정확한 상위 오리진을 확인합니다.
5. 실제 메시지, 좁은 화면, 활성 마이크를 테스트합니다.

문제 해결#

현재 npm SvelteKit 어댑터는 게시되지 않았습니다. 호스팅 스크립트가 지원 통합 표면입니다.