Skip to content


How to customize app using KS Wallet's Connect Widget Feature?

KS Wallet Console lets you easily manage and customize your wallet connection. The "Connect Widget Module" helps you adjust key settings like supported wallet types, authentication methods (Social Login), blockchain network preferences, and visual style. This guide shows you how to personalize your wallet connection for a smooth, intuitive experience with decentralized apps.

Step 1: Sign in to Kalp Studio

  1. Go to Kalp Studio Login.

  2. Enter your credentials and click Log In.

  1. Click the "Sign In" Button: Once you've entered your email and password, click the "Sign In" button as annotated in the below screenshot. This will initiate the login process.

Step 2: Access KS Wallet

  1. Product Page: After Successfully Sign-In you will find a product page. In this page you will see different applications like SMS, Kalp Instant Deployer, Email, KS Storage, KS Wallet, KS Query, NFT Creator, Token Studio, API Gateway.

  1. Select KS Wallet: Spot the KS Wallet option in the Our Products section on the dashboard, as highlighted in the screenshot below, and click on the Get Started button.

If you have not yet subscribed to KS Wallet, you can do it to experience a seamless experience

Step 3: Access the Connect Widget Configuration

Begin by navigating to the "Connect Widget" option in the sidebar menu of the KS Wallet Console.

1. Wallet Type Selection

  • Click on the "Wallet Type" dropdown.

  • Choose the desired wallet types you want to support. The screenshots indicate options like "Socials" and "Kalp Wallet." By selecting these, you'll enable users to connect using their preferred type of wallet.

2. Social Login Configuration

  • Click on the "Social Login" dropdown.

  • Select the authentication methods you want to make available. The options shown in the screenshot are "Google," "Email", and "Phone."

3. Blockchain Selection

  • Click on the "Blockchain Selection" dropdown.

  • Select the blockchain supported by your application.

4. Network Selection

  • Click on the "Network Selection" dropdown.

  • Choose the specific network for which you want to enable connections.

5. Theme Color Customization

  • Click on the "Theme Color" dropdown.

  • This section lets you customize the visual appearance of the wallet connection interface.

  • Background Color: Modify the background color of the widget. You can use the color picker or enter a specific hex code.

  • Text Color: Alter the color of the text within the widget for optimal readability and branding consistency.

6. Code Integration Options

KS Wallet Console allows you to customize further through direct code integration. You can choose between React Code and Javascript Code and embed it on the head of your HTML.

React Code: Embed code in the top of your HTML.

JavaScript Code: Embed the code in the head of your HTML.

7. Applying Changes

Model: The Model displays all the settings you've selected previously.

Once you've configured all the desired settings, click on the "Apply Changes" button. This will save your customizations.

8. Confirmation

After successfully applying the changes, a confirmation message will appear, indicating that the update was successful.

Conclusion

By following the steps outlined in this guide, you can effectively customize the wallet connection experience within the KS Wallet Console. Tailoring aspects such as wallet types, authentication methods, blockchain network support, and visual theme allows you to seamlessly integrate wallet functionality into your decentralized applications, enhance user experience, and provide user-friendly onboarding.