Shrinkit Web SDK

Getting Started

This Tutorial aims to teach the user how to integrate his Website with Micro.me cloud using Micro.me Web SDK and how to use the Micro.me products.

Required For Setup

• **Micro.me Account if you do not already have one you can Sign Up

• Your Appgain.io Project ID, available in Project Settings

• **Download firebase-messaging-sw.js and add it to your website root directory (e.g. public/firebase-messaging-sw.js).

Note: firebase-messaging-sw.js is required for push notifications to work.

Installation on multiple pages website

• Add the following code to your website pages head tag

<script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/Micro.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-app.js"></script>

• Add the following code to your website pages body tag

<script>
  const MicroConfig = {
    projectId: "<Your Project ID>",
    apiKey: "<Your API Key>",
    websiteName: "<Your Website Name (Optional)>",
    userId: "<Your User ID (Optional)>",
  };

  Micro.init(MicroConfig)
    .then((response) => {
      console.log("Micro SDK initialized successfully", response);
    })
    .catch((error) => {
      console.log("Micro SDK initialization failed", error);
    });
</script>

• Add firebase-messaging-sw.js to your website root directory (e.g. public/firebase-messaging-sw.js).

Note: firebase-messaging-sw.js is required for push notifications to work.

Installation on single page website

• Add the following code to your website index.html head tag

<script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/Micro.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-app.js"></script>

• Add the following code to your website starter component (e.g. App.js, App.vue, index.js, etc...)

const MicroConfig = {
  projectId: "<Your Project ID>",
  apiKey: "<Your API Key>",
  websiteName: "<Your Website Name (Optional)>",
  userId: "<Your User ID (Optional)>",
};

try {
  await Micro.init(MicroConfig);
  console.log("Micro SDK initialized successfully");
} catch (error) {
  console.log("Micro SDK initialization failed", error);
}

• Add firebase-messaging-sw.js to your website root directory (e.g. public/firebase-messaging-sw.js).

Note: firebase-messaging-sw.js is required for push notifications to work.

Installation on Shopify store

• **Go to https://{yourstore}.myshopify.com/admin/themes
• At Live Theme Section , Go to Action Button and from its menu select Edit Code
• Open file layout/theme.liquid
• In the header section insert the below code , note to replace yourProjectId,yourAPIKey with the the values from your Appgain.io project and YourWebsiteName with your Store Name

<script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/Micro.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-app.js"></script>

<script>
  const MicroConfig = {
    projectId: "<Your Project ID>",
    apiKey: "<Your API Key>",
    quickInstall: true,
    websiteName:
      "<Your Website Name (Optional)> if not provided will be replaced with your subdomain",
  };

  Micro.init(MicroConfig)
    .then((response) => {
      console.log("Micro SDK initialized successfully", response);
    })
    .catch((error) => {
      console.log("Micro SDK initialization failed", error);
    });
</script>