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/.

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/
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.

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:

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

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

• Share Button
• Banner
• Post-Purchase
• Open In App
• FrakSetup Configuration

You can also explore our Wallet SDK documentation for more advanced features and customization options.