Svelte

Start the chat in onMount (which only runs in the browser) and remove it when the component goes away. In SvelteKit, put this in your root +layout.svelte so the chat stays open across pages.

npm install @wireface/chat

svelte

<!-- Chat.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { bootWirefaceChat, type WirefaceChatInstance } from '@wireface/chat';

  onMount(() => {
    let chat: WirefaceChatInstance | undefined;
    let gone = false;
    bootWirefaceChat({ host: 'https://chat.example.com', bot: 'pk_your_bot_id', theme: 'auto' }).then(c => {
      if (gone) void c.shutdown();
      else chat = c;
    });
    return () => {
      gone = true;
      void chat?.shutdown();
    };
  });
</script>

svelte

<!-- +layout.svelte -->
<script lang="ts">
  import Chat from '$lib/Chat.svelte';
  let { children } = $props();
</script>

{@render children()}
<Chat />

SvelteKit's client-side navigation is followed automatically (see Single-page apps). Your own buttons can open the chat with data-wireface-open, or call getWirefaceChat()?.open() from @wireface/chat.

Svelte ​

Svelte