Svelte Integration

Add Ask0 to your Svelte or SvelteKit app with lightweight integration. Perfect for static sites and server-side rendered apps.

Integrate Ask0 into your Svelte or SvelteKit application.

SvelteKit

app.html

src/app.html

<!DOCTYPE html>
<html lang="en">
  <head>
    %sveltekit.head%
  </head>
  <body>
    %sveltekit.body%
    <script
      src="https://assets.ask0.ai/scripts/ask.js"
      data-project-id="%env.PUBLIC_ASK0_PROJECT_ID%"
    ></script>
  </body>
</html>

Component

src/lib/components/Ask0.svelte

<script>
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';

  export let projectId;

  onMount(() => {
    if (browser) {
      const script = document.createElement('script');
      script.src = 'https://assets.ask0.ai/scripts/ask.js';
      script.dataset.projectId = projectId;
      document.body.appendChild(script);
    }
  });

  function openSupport() {
    if (browser && window.ask0) {
      window.ask0.open();
    }
  }
</script>

<button on:click={openSupport}>
  Get Help
</button>

Svelte (Non-SvelteKit)

App.svelte

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    const script = document.createElement('script');
    script.src = 'https://assets.ask0.ai/scripts/ask.js';
    script.dataset.projectId = import.meta.env.VITE_ASK0_PROJECT_ID;
    document.body.appendChild(script);
  });
</script>

<main>
  <!-- Your app -->
</main>

Store Integration

src/lib/stores/ask0.ts

import { writable } from 'svelte/store';
import { browser } from '$app/environment';

export const ask0Ready = writable(false);

export const ask0 = {
  open: () => {
    if (browser && window.ask0) {
      window.ask0.open();
    }
  },
  close: () => {
    if (browser && window.ask0) {
      window.ask0.close();
    }
  }
};

Environment Variables

.env

PUBLIC_ASK0_PROJECT_ID=your_project_id

Svelte Tips:

Use onMount for client-side script loading
Check browser constant in SvelteKit
Use stores for shared state
Prefix public env vars with PUBLIC_