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:

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.

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>

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.

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.

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

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