Skip to main content

Appmaker WebSDK

The Appmaker Web SDK is a JavaScript library that allows you to interact with the Appmaker webview.

Requirements​

This library is only compatible with the Appmaker webview.

Installation​

There are two ways to install the Appmaker Web SDK:

  1. Create a single page React app and then connect with appmaker web SDK
  2. Connect existing page with appmaker web SDK using script https://unpkg.com/@appmaker-xyz/web-sdk@latest/dist/index.umd.js

Configure the Appmaker Web SDK using React​

  1. Create a sample react app using next.js. You can use the following command to create a sample react app.

    npx create-next-app  my-app
    cd my-app

  2. Start the development server using the following command.

    npm start

  3. You can see the sample app running on http://localhost:3000

  4. Now you can edit the src\App.js of the my-app project and add your custom code.

For example, you can simply add a button to the src\App.js file.


import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>      
        <button>Open Cart</button>
      </header>      
    </div>
  );
}

export default App;

  1. save the file and you can see the button on the page.

  2. Now you can add the Appmaker Web SDK to the project. You can use the following command to install the Appmaker Web SDK.

    npm install @appmaker-xyz/web-sdk

  3. Import the Appmaker Web SDK in the src\App.js file.

    import AppmakerWebSDK from "@appmaker-xyz/web-sdk";

  4. Let's add an action to button to open the cart.

    import logo from './logo.svg';
    import './App.css';
    import AppmakerWebSDK from "@appmaker-xyz/web-sdk";
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
              p>
              Edit <code>src/App.js</code> and save to reload.
            </p>      
            <button onClick={() => AppmakerWebSDK.openCart()}>Open Cart</button>
          </header>      
        </div>
      );
    }
    export default App;

  5. Now when you click on open cart button from the appmaker webview it will open the cart.

You can also refer to another example here.

Configure the Appmaker Web SDK using script​

  1. Create a sample html page and add the following script tag to the page.

    <script src="https://unpkg.com/@appmaker-xyz/web-sdk@latest/dist/index.umd.js"></script>

  2. Now you can use the Appmaker Web SDK in the page.

    <script>
      AppmakerWebSDK.openCart();
    </script>

  3. Now when you open the page from the appmaker webview it will open the cart.

You can also hide header and footer of a page using appmaker web SDK , refer to the example here.

Appmaker WebSDK Methods​

To know more about appmaker web SDK and it's methods, refer to the documentation.