Getting started with Frak Components

@frak-labs/components gives you ready-made <frak-*> web elements: a share button, a referral banner, a post-purchase prompt, and an open-in-app button. This page walks through setup.

You can find examples of Frak Components at 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

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

Visit https://business.frak.id/
Sign up or log in to your account. Your main storefront domain is registered automatically at sign-up.
(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.

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. sdk.frak.id is Frak’s first-party CDN pointer; see the CDN / Browser integration guide for the full setup with preconnect hints and a jsDelivr fallback:

<script src="https://sdk.frak.id/components.js" 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.

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

More information about the FrakSetup 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:

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

You can also explore the Developers overview for more advanced features and customization options, including the core SDK and framework integrations.