Svelte app example

Quick installation guide to setup the BetterBugs Web SDK widget for your Svelte applications.

How to install BetterBugs Web SDK in Svelte apps

Check out the GitHub repo for the Svelte example app covered here.

Here are the steps for it:

1

Generate an API key from Project Settings

Log in to your BetterBugs dashboard and generate an API key from Project Settings. You’ll need it to initialize the SDK in the following steps.

Steps for generating API key

2

Install BetterBugs Web SDK using npm/yarn

In your Svelte project’s root terminal, run the following command to install the SDK files in your application using npm or yarn.. We’ve used npm for this demo setup.

npm

npm install @betterbugs/web-sdk

yarn

yarn add @betterbugs/web-sdk

3

Initialize the SDK (with default UI)

Use the following initialization code in your Svelte app’s component. Add your BetterBugs project API key to the code.

<script>
  // BetterBugs SDK Initialization Code
  import { onMount, onDestroy } from 'svelte';
  let bbInstance = null;

  onMount(async () => {
    if (typeof window !== 'undefined') {
      const { default: Betterbugs } = await import('@betterbugs/web-sdk');
      bbInstance = new Betterbugs({
        // Replace with your BetterBugs Project API Key
        apiKey: 'YOUR-API-KEY-GOES-HERE', 
      });
    }
  });

  onDestroy(() => {
    bbInstance?.destroy?.();
  });
</script>

<h1>BetterBugs Web SDK Widget | Svelte</h1>

4

Customize the SDK widget UI (Optional)

You can customize the SDK with your brand colors and design from the initialization function:

<script>
  // BetterBugs SDK Initialization Code
  import { onMount, onDestroy } from 'svelte';
  let bbInstance = null;

  onMount(async () => {
    if (typeof window !== 'undefined') {
      const { default: Betterbugs } = await import('@betterbugs/web-sdk');
      bbInstance = new Betterbugs({
        // Replace with your BetterBugs Project API Key
        apiKey: 'YOUR-API-KEY-GOES-HERE', 

        // UI Customization Examples
      position: {
        top: "30px",
        right: "20px",
      },
      styles: {
        primaryColor: "#e41c38",
        primaryTextColor: "#fff",
        theme: "light",
      },
      });
    }
  });

  onDestroy(() => {
    bbInstance?.destroy?.();
  });
</script>

<h1>BetterBugs Web SDK Widget | Svelte</h1>

5

Test the setup

To test the setup, run your local dev server (http://localhost:5173/) with the following command (or with the one that you might be using):

npm run dev

The Web SDK widget should be available at the bottom right side of your app screen (with the default UI).

NOTE: If the widget is not visible,

• Please check if you’ve correctly entered the API key.

• Check for the console errors, if any.

• If you’re still stuck, try running your dev server in the INCOGNITO mode of your web browser.

• Some ad blockers or extensions may also prevent the Widget from running. Please turn them off and try running the application again. It should work fine.

You're good to go.