Install the JS Web SDK¶

The JS Web SDK adds Shrinkit to a website that is not installed from the Salla, Zid or Shopify app store: it shows the notification permission prompt and registers subscribers for web push. Shopify stores get web push automatically with the app.

Requirements¶

A Shrinkit store — see Create a store.
Your Store ID and API Key, from Store settings → API Key.
Your site served over HTTPS. Browsers only allow push on secure pages.
The service worker file firebase-messaging-sw.js, saved at the root of your site so it is served from https://yoursite.com/firebase-messaging-sw.js (for example public/firebase-messaging-sw.js). Push does not work without it, and it must be at the root so its scope covers every page.

Only on your own storefront

The SDK configuration, including the API key, is readable in your page source. Add it only to your own storefront domain, never to third-party sites or public code repositories. If the key turns up somewhere it should not be, contact support to have it reset.

Multi-page website¶

Add the script to the head of every page:

<script src="https://cdn.appgain.io/docs/appgain/appgainSdk/websdk/shrinkit.min.js"></script>

Then initialise it in the body:

<script>
  const shrinkitConfig = {
    projectId: "<Your Store 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>

Single-page app (React, Vue, Next.js…)¶

Add the script to the head of your index.html (or your root layout), then initialise once from your app's entry point — for example App.js, App.vue or index.js:

const shrinkitConfig = {
  projectId: "<Your Store 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);
}

In Next.js, put firebase-messaging-sw.js in public/ and run the initialisation in a client component.

Troubleshooting¶

No permission prompt: the visitor may have blocked notifications for your site earlier — they must re-allow it from the browser's site settings. Browsers also hide the prompt on non-HTTPS pages.
Subscribers not increasing: check that https://yoursite.com/firebase-messaging-sw.js loads in the browser, and that your Content Security Policy (if you have one) allows scripts from cdn.appgain.io and connections to api.shrinkit.me and the Google Firebase messaging endpoints.
iPhone and iPad: web push only works for visitors who added your site to their Home Screen. See Web push notifications.

Install Shrinkit on your store¶

Shrinkit works with Salla, Zid and Shopify. Install the app on your store and your orders, carts, products and customers appear in the dashboard automatically — no coding, no data import.

Install on Salla Install on Zid Install on Shopify

Not on any of those platforms yet? Talk to us on WhatsApp.