webtonative

Integrate WebToNative SDK into Your Base 44 React App

Integrate WebToNative SDK into Base44 React App

Author:

WebToNative

11 November, 2025

When a user develops a website on Base44, a no-code website builder, the user is able to create a fully functioning React-based site with minimal writing of code. With the website converted into an Android or iOS mobile application using the WebToNative platform, the same user can then convert their website to either an Android or iOS mobile app. But to gain access to native device capabilities such as social login, biometric authentication, or deep linking, the user should install the WebToNative (WTN) SDK into their React app. This integration connects the web application and mobile device capacities, making its application native to the user experience.

In this blog, we will guide you through the step-by-step integration of the WebToNative SDK into your Base44 React App to power up your mobile app’s complete potential.


Why Embed WebToNative SDK?

WebToNative is easy to use to create a mobile app out of your Base44 website. Still, without the SDK, your app will simply be your site on a mobile app, which can display content, buttons and pages, but is unable to interact with native features such as social login, fingerprint authentication, push notifications, or deep linking.

  • Enable deep linking in the app, which allows users to open particular screens or sections immediately by clicking on the links or notifications.

  • Enhances app performance that ensures quick loading speed, a smooth transition, and a more reactive interface.

  • Provides an effortlessly native user experience, creating the impression of a real mobile app rather than just a website.

  • Scalable in the future, as you can add new native features and functionality to your app as it scales.

  • Enhances the security of apps through the support of the secure authentication procedure, improving the safeguarding of user data.


Steps to Integrate WebToNative SDK into Your Base44 React App

Setup Requirements

  • A Base44 account with a paid plan (editing of code is not under the free plan).

  • Your app cloned from a template or developed from scratch.

  • Familiarity with the functionality of the Base44 platform.

Step 1: Provide a Prompt to Base44 AI Agent

  • Open the Base44 AI agent within your project.

  • You need to install the webtonative package for the native functionality within the app.

  • Provide the following command to the AI agent.

    • Install the “webtonative” package from the npm directory.

  • This command will tell Base44 to add the WebToNative package to your React project.


Step 2: Grant Package Installation Permissions

  • Once the package is installed, base44 will request permission to install the package.

  • You have to grant permission for the successful installation.


Step 3: Use Code Snippets

After installation, you have to implement the SDK using the official code snippet.

import webtonative from 'webtonative';


webtonative.statusBar({ color: '#FFFFFF', style: 'dark' });
setStatusBarMode('light');

const info = await webtonative.deviceInfo();
console.log(info);

Quick Tips

  • Copy the above snippet exactly.

  • Make sure it is appropriately indented for your file format.

  • Save the file (Base44 will save automatically, but in case it prompts, save your file).


Step 4: Preview and Test Your App.

  • On the top bar, click on Preview to see your app function.

  • Open your browser's Developer Tools (right-click > Inspect > Console tab) to check for logs like `[WTN], SDK loaded successfully!. This confirms it's working.


Step 5: Publish Your Changes

  • Finally, when you are just done with your changes, click Publish in the upper right side to make the updates live.

  • Share your app link to testers or export (e.g., ZIP, GitHub, or through the beta features).


Next Steps

  • Explore WTN Options: Once you have made the integration, embark on using the window.WTN within your own code for native calls (e.g. WTN.openUrl(‘https://example.com’)).

  • Customise: It is possible that your app has a different layout file, so add the script there.


For Advanced Integrations, Visit.


The WebToNative SDK is easy to add to your Base44 React application and is an effective method of enabling native, mobile capabilities, better performance, and performance. It takes only a few steps to take your app beyond a simple web wrapper, which supports deep linking, increased security and scalability in the future. It is with this integration that your Base44 app will really fill the gap between web and mobile, providing an experience to the users that is faster, responsive, and has a fully native feel to users.

Similar Blogs