# Svelte app example

### How to install BetterBugs Web SDK in Svelte apps

{% hint style="success" %}
Check out the [**GitHub repo** for the Svelte example app](https://github.com/betterbugs/web-sdk/tree/main/examples/03-Svelte-app-example) covered here.
{% endhint %}

Here are the steps for it:

{% stepper %}
{% step %}

#### Generate API key

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

[Steps for generating API key](https://docs.betterbugs.io/developer-guide/betterbugs-web-sdk/installation)
{% endstep %}

{% step %}

#### 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**.

{% tabs %}
{% tab title="npm" %}
`npm install @betterbugs/web-sdk`
{% endtab %}

{% tab title="yarn" %}
`yarn add @betterbugs/web-sdk`
{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

#### 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**.

```javascript
<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>
```

{% endstep %}

{% step %}

#### Customize the SDK widget UI (Optional)

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

```javascript
<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>
```

{% endstep %}

{% step %}

#### 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):

```javascript
npm run dev
```

{% endstep %}
{% endstepper %}

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

{% hint style="warning" %}
**NOTE**: If the widget is not visible,&#x20;

* Please check if you’ve correctly entered the API key.&#x20;
* Check for the console errors, if any.&#x20;
* If you’re still stuck, try running your dev server in the INCOGNITO mode of your web browser. &#x20;
* 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.
  {% endhint %}

You're good to go.