# CDN / Browser Integration
# Vanilla JS Integration Guide
This guide will walk you through the process of integrating the Wallet SDK into your Vanilla JavaScript application. By the end, you'll have a basic setup that allows users to connect their Frak Wallet and perform simple interactions.
## Prerequisites
Before you begin, ensure that:
1. You have a basic HTML/JavaScript project set up.
2. You have a merchant account on the [Frak business dashboard](https://business.frak.id/) with your storefront's domain registered. The main domain is registered automatically at sign-up; for subdomains, add them under **Allowed Domains** on the dashboard.
If you haven't completed these steps, please refer to the [Getting Started](/guides) guide.
## Step 1: Install Dependencies
For a Vanilla JS project, you can include the Wallet SDK via a CDN. Add the following script tag to your HTML file:
```html title="CDN Bundle"
```
## Step 2: Set Up the Frak Client
Create a new JavaScript file (e.g., `frak-setup.js`) to set up the Frak client:
```javascript
// frak-setup.js
const frakConfig = {
metadata: {
name: 'Your App Name',
},
};
async function setupFrakClient() {
const client = await FrakSDK.setupClient({ config: frakConfig });
if (!client) {
console.error('Failed to create Frak client');
return null;
}
return client;
}
// Export the setup function and config for use in other files
window.FrakSetup = { setupFrakClient, frakConfig };
```
For more detailed configuration options, see [FrakWalletSdkConfig](/developers/references/core-sdk/index/type-aliases/frakwalletsdkconfig/).
Include this script in your HTML file:
```html
```
## Step 3: Check Wallet Status
Create a function to check and display the wallet status, using the [`watchWalletStatus`](/developers/references/core-sdk/actions/functions/watchwalletstatus/) action:
```javascript
// wallet-status.js
async function displayWalletStatus() {
const client = await window.FrakSetup.setupFrakClient();
if (!client) {
console.error('Frak client not initialized');
return;
}
const statusElement = document.getElementById('wallet-status');
statusElement.textContent = 'Checking wallet status...';
try {
await FrakSDK.watchWalletStatus(client, (status) => {
statusElement.textContent = `Wallet status: ${status.key === 'connected' ? 'Connected' : 'Not connected'}`;
});
} catch (error) {
statusElement.textContent = `Error: ${error.message}`;
}
}
// Call this function when the page loads
window.addEventListener('load', displayWalletStatus);
```
## Step 4: Implement Login Modal
Create a function to handle the login process, using the [`displayModal`](/developers/references/core-sdk/actions/functions/displaymodal/) action:
```javascript
// login-button.js
async function handleLogin() {
const client = await window.FrakSetup.setupFrakClient();
if (!client) {
console.error('Frak client not initialized');
return;
}
const loginButton = document.getElementById('login-button');
loginButton.disabled = true;
loginButton.textContent = 'Logging in...';
try {
await FrakSDK.displayModal(client, {
steps: {
login: {},
final: {
action: { key: "sharing" },
}
}
});
loginButton.textContent = 'Logged In';
} catch (error) {
console.error('Login error:', error);
loginButton.textContent = 'Login Failed';
} finally {
loginButton.disabled = false;
}
}
// Attach the login handler to the button
window.addEventListener('load', () => {
const loginButton = document.getElementById('login-button');
loginButton.addEventListener('click', handleLogin);
});
```
## Step 5: Put It All Together
Update your HTML file to include all the necessary elements and scripts:
```html
My Frak-Enabled App
My Frak-Enabled App
Initializing...
```
## Next Steps
With this setup, you have a basic Vanilla JavaScript application integrated with the Wallet SDK. Users can now connect their Frak Wallet and log in. From here, you can start implementing more advanced features such as:
- Sending interactions
- Implementing referral systems
- Creating reward campaigns
Refer to the specific action documentation for details on implementing these features in a Vanilla JS environment.