Skip to main content

Add Appmaker Web SDK to an Existing Page

This guide will help you add the Appmaker Web SDK to an existing page in your website.

Steps​

  1. Add the following script tag to the page you want to add the Appmaker Web SDK to:
<script src="https://unpkg.com/@appmaker-xyz/web-sdk@latest/dist/index.umd.js"></script>
  1. And then you can use the Appmaker Web SDK in your code:
<script src="https://unpkg.com/@appmaker-xyz/web-sdk@latest/dist/index.umd.js"></script>
<script>
  if (AppmakerWebSdk.isAppmakerWebview()) {
    alert("This code is running inside the Appmaker WebView");
  }else{
     alert("This code is  running outside the Appmaker WebView");
  }
</script>
  1. Save the file.

How to do custom actions by editing the theme.liquid file​

  1. Find your theme.liquid file in your theme folder.

  2. Add the following code to your theme.liquid file.

<script src="https://unpkg.com/@appmaker-xyz/web-sdk@latest/dist/index.umd.js"></script>
<script>
   setTimeout(function() {
    if (AppmakerWebSdk.isAppmakerWebview()) {
    alert("This code is running inside the Appmaker WebView");    // to test if the code is running inside the Appmaker WebView
    // Do custom actions if it is inside appmaker webview
    // For example, you can use the following code to open the cart page
    AppmakerWebSdk.openCart();
    // You can use the following code to open the product page
    AppmakerWebSdk.openProductByHandle('test-product');   // test-product is the sample product handle
    // You can use the following code to get the platform
    AppmakerWebSdk.getPlatform();
    if (AppmakerWebSdk.getPlatform() === 'android') {
      // Do something if the platform is android
    } else if (AppmakerWebSdk.getPlatform() === 'ios') {
      // Do something if the platform is ios
    }      
  }
  }, 3000);
</script>
  1. Save the file.

You can refer to the Appmaker Web SDK Methods and Usage guide for more information on the Appmaker Web SDK methods.