JS Web SDK

Getting Started

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

Required For Setup

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

• Your Shrinkit.me 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/shrinkit.min.js"></script>

• Add the following code to your website pages body tag

<script>
  const shrinkitConfig = {
    projectId: "<Your Project ID>",
    apiKey: "<Your API Key>",
    websiteName: "<Your Website Name (Optional)>",
    userId: "<Your User ID (Optional)>",
    useCustomModal: true, // Optional - defaults to false

    // custom modal config
    title: "Modal Title", // Optional
    description: "Modal Description", // Optional
    yesButton: "YES", // Optional
    noButton: "NO", // Optional
    modalLanguage: "en", // Optional [en, ar] - defaults to en
    modalImage: "https://placehold.co/600x400/png", // Optional
  };

  Shrinkit.init(shrinkitConfig)
    .then((response) => {
      console.log("Shrinkit SDK initialized successfully", response);
    })
    .catch((error) => {
      console.log("Shrinkit 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/shrinkit.min.js"></script>

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

const shrinkitConfig = {
  projectId: "<Your Project ID>",
  apiKey: "<Your API Key>",
  websiteName: "<Your Website Name (Optional)>",
  userId: "<Your User ID (Optional)>",
  useCustomModal: true, // Optional - defaults to false

  // custom modal config
  title: "Modal Title", // Optional
  description: "Modal Description", // Optional
  yesButton: "YES", // Optional
  noButton: "NO", // Optional
  modalLanguage: "en", // Optional [en, ar] - defaults to en
  modalImage: "https://placehold.co/600x400/png", // Optional
};

try {
  await Shrinkit.init(shrinkitConfig);
  console.log("Shrinkit SDK initialized successfully");
} catch (error) {
  console.log("Shrinkit 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.