Svelte Integration

Learn how to integrate EasyFindAi into your Svelte application

1

Get Your API Key

Select a chatbot in the dashboard to view its API key

2

Create a Svelte Component

Create a new Svelte component to load the EasyFindAi chatbot script.

<!-- EasyFindAiChatbot.svelte -->
<script>
  import { onMount, onDestroy } from 'svelte';
  
  export let apiKey = 'YOUR_API_KEY';
  
  let scriptElement;
  
  onMount(() => {
    // Create script element
    scriptElement = document.createElement('script');
    scriptElement.src = 'https://easyfindai.com/api/chatbot-embed?apiKey=YOUR_API_KEY';
    
    // Append to document
    document.body.appendChild(scriptElement);
  });
  
  onDestroy(() => {
    // Clean up when component is destroyed
    if (scriptElement && document.body.contains(scriptElement)) {
      document.body.removeChild(scriptElement);
    }
  });
</script>
3

Add to Your Layout

Import and use the component in your main layout or App component so it's available throughout your site.

<!-- App.svelte or your main layout component -->
<script>
  import EasyFindAiChatbot from './EasyFindAiChatbot.svelte';
  // Other imports...
</script>


<main>
  <!-- Your app content -->
  <slot></slot>
  
  <!-- Add the chatbot component -->
  <EasyFindAiChatbot apiKey="YOUR_API_KEY" />
</main>
4

SvelteKit SSR Considerations

If you're using SvelteKit with server-side rendering, make sure to only load the script on the client side:

<!-- EasyFindAiChatbot.svelte for SvelteKit -->
<script>
  import { onMount, onDestroy } from 'svelte';
  import { browser } from '$app/environment';
  
  export let apiKey = 'YOUR_API_KEY';
  
  let scriptElement;
  
  onMount(() => {
    // Only run in the browser, not during SSR
    if (browser) {
      // Create script element
      scriptElement = document.createElement('script');
      scriptElement.src = 'https://easyfindai.com/api/chatbot-embed?apiKey=YOUR_API_KEY';
      
      // Append to document
      document.body.appendChild(scriptElement);
    }
  });
  
  onDestroy(() => {
    // Clean up when component is destroyed
    if (browser && scriptElement && document.body.contains(scriptElement)) {
      document.body.removeChild(scriptElement);
    }
  });
</script>

Note: The browser import from $app/environment is a SvelteKit-specific feature that helps determine if code is running in the browser or during server-side rendering.

That's it!

The chatbot will now be available on all pages of your Svelte application. No additional configuration is needed!