Simple Sveltekit / Crisp (chat box) integration

.env

VITE_CRISP_WEBSITE_ID=xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx

__layout.svelte

<script lang="ts">
  import { session } from '$app/stores';

  import Crisp from '$lib/components/Crisp.svelte';

  let email: string, nickname: string;

  if ($session.user) {
    email = $session.user.email;
    nickname = `${$session.user.firstname} ${$session.user.lastname}`;
  }
</script>

{#if $session.user}
  <Crisp {nickname} {email} />
{/if}

<main>
  <slot />
</main>

Crisp.svelte

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

  export let email: string, nickname: string, company: string, phone: string, avatar: string;

  onMount(() => {
    window.$crisp = [];
    window.CRISP_WEBSITE_ID = import.meta.env.VITE_CRISP_WEBSITE_ID; // set in your .env file
    (function () {
      const d = document;
      const s = d.createElement('script');
      s.src = 'https://client.crisp.chat/l.js';
      s.async = 1;
      d.getElementsByTagName('head')[0].appendChild(s);
    })();
    if (email) {
      window.$crisp.push(['set', 'user:email', [email]]);
    }
    if (nickname) {
      window.$crisp.push(['set', 'user:nickname', [nickname]]);
    }
    if (company) {
      window.$crisp.push(['set', 'user:company', [company]]);
    }
    if (phone) {
      window.$crisp.push(['set', 'user:phone', [phone]]);
    }
    if (avatar) {
      window.$crisp.push(['set', 'user:avatar', [avatar]]);
    }
  });
</script>