# Getting Started with Frak Components

# Getting Started with Frak Components

This guide will walk you through the process of setting up and using Frak Components in your project.

You can find examples of Frak Components at [https://showcase.frak.id/](https://showcase.frak.id/).

## Prerequisites

Before you begin, ensure you have:

- A modern web browser
- Basic knowledge of HTML and JavaScript

## 1. Register Your Merchant

:::note
Merchant registration is a crucial step that enables key functionalities of Frak Components.
:::

Before using Frak Components, you need a merchant account on the Frak Business Platform:

1. Visit [https://business.frak.id/](https://business.frak.id/)
2. Sign up or log in to your account — your main storefront domain is registered automatically at sign-up.
3. (Optional) If your site lives on a subdomain different from the registered main domain, add it under **Allowed Domains** on the dashboard.

For a detailed walkthrough, see our [Business Registration Guide](/guides/dashboard/register/).

## 2. Setup the Frak Components

Once your merchant is set up, install Frak Components in your project.

Add the following script tag to your HTML file:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@frak-labs/components" defer="defer"></script>
```

## 3. Basic Configuration

After setup, you need to add a `config` object by assigning a global variable `FrakSetup`.

You can generate a config object using the [Frak SDK Builder](https://showcase.frak.id/configuration).

```html
<script>
window.FrakSetup = {
    config: {
        metadata: {
            name: "Your App Name",
        },
    },
};
</script>
```

More information about the [FrakSetup](/developers/components/frak-setup) object.

## 4. Add Components

Now you can start adding Frak Components to your project. Here's an example of how to add a share button:

```html
<frak-button-share></frak-button-share>
```

That's it! You've successfully set up and started using Frak Components in your project.

## Next Steps

Now that you're set up, you can explore components and customize them to fit your project requirements:

- [Share Button](/developers/components/share-button)
- [Banner](/developers/components/banner)
- [Post-Purchase](/developers/components/post-purchase)
- [Open In App](/developers/components/open-in-app)
- [FrakSetup Configuration](/developers/components/frak-setup)

You can also explore our [Wallet SDK](/developers) documentation for more advanced features and customization options.