If you landed here, you probably want to use PushOwl on your store's custom frontend. First, let us clarify what a custom frontend is. If your store website is not built on top of a Shopify or BigCommerce store theme, then you are on a custom frontend - also called as using Shopify or BigCommerce in headless mode. Eg. maybe it is built using React or made on Webflow or running via ClickFunnels, or on the Nacelle platform i.e. you are not using the visual website interface that you got when you created your Shopify or BigCommerce store.

Note:

If you specifically using the Nacelle platform for your store frontend, please refer to our integration with Nacelle article. Otherwise, read on.
PushOwl won't inject the script into the headless store automatically. It has to be manually done following the steps below.

Requirements to use PushOwl

We offer a PushOwl SDK that can be used on any website as long as you can fulfill the following requirements:

You should at least be using Shopify's or BigCommerce's backend. i.e. your inventory, etc, data should be on Shopify or BigCommerce.
You should have the PushOwl app installed on your store.
Be able to put a JavaScript snippet on the website pages.

Note: Not all features in PushOwl are supported at the moment on the custom front end through our SDK. But we are actively working on supporting them all.

Steps to integrate PushOwl

STEP 1: Inject PushOwl snippet

Inject the following JavaScript code snippet in the website such that it gets executed on every page. In the case of a single-page app, it can just be executed once when the app initializes.

<script>
window.pushowl = window.pushowl || {
    queue: [],
    trigger: function (taskName, taskData) {
    return new Promise((resolve, reject) => {
        this.queue.push({
        taskName,
        taskData,
        promise: { resolve, reject }
        })
    })
    },
    init: function () {
    const subdomain = '<STORE_SUBDOMAIN_HERE>'
    const platform = '<YOUR_ECOMMERCE_PLATFORM>'
    if (!subdomain) {
        return
    }
    this.subdomain = subdomain
    var s = document.createElement('script')
    s.type = 'text/javascript'
    s.async = true
    s.src =
        'https://cdn.pushowl.com/sdks/pushowl-sdk.js?subdomain=' +
        subdomain +
        '&environment=production&shop=' +
        subdomain +
        ".my" +
        platform +
        ".com" +
        "&platform=" +
        platform;
    var x = document.getElementsByTagName('script')[0]
    x.parentNode.insertBefore(s, x)
    }
}
window.pushowl.init();
</script>

Note: You need to replace <STORE_SUBDOMAIN_HERE> with your actual store subdomain, and you need to replace <YOUR_ECOMMERCE_PLATFORM> with the platform on which your store is built i.e. shopify or bigcommerce.

STEP 2: Host the Service worker file

You need to create the javascript file service-worker.js and host it on your website in the following URL https://your-store.com/pushowl/service-worker.js

Add this is the content of service-worker.js

// pushowl/service-worker.js
importScripts('https://cdn.pushowl.com/sdks/service-worker.js');

Note: Substitute your-store.com with your actual domain.

If hosting the file on your domain is not possible, PushOwl will still work but with a slightly different behavior. Because of technical limitations here, instead of showing a native browser on your website, PushOwl will open a popup with the native browser prompt inside it. This popup basically opens <your_subdomain.powl.co URL, and hence, the visitor actually would subscribe to a subdomain of powl.co and would see the same URL in the actual notification that goes to them.

STEP 3: Trigger the Opt-in flow

To collect email, SMS, and web push subscriptions on your store, you can trigger the

Opt-in flow. The Opt-in flow can be configured in the dashboard. To initiate the Opt-in flow in your headless store, you can execute the following code.

if (window.pushowl) {
  window.pushowl.trigger('showWidget', {
   type: 'optinFlows',
  });
}

STEP 4: Trigger only push notification permission prompt

At any point, when you want to trigger the only push notification permission prompt, you can execute either of the following code snippets depending on whether you want a browser prompt or a custom prompt.

Browser prompt:

window.pushowl.trigger("getCurrentPermission").then((permission) => {
  if (permission !== "default") return;
  window.pushowl.trigger("showWidget", { type: "browserPrompt", });
});

Custom prompt:

window.pushowl.trigger("getCurrentPermission").then((permission) => {
  if (permission !== "default") return;
  window.pushowl.trigger("showWidget", {
    type: "customPrompt", 
    title: "Lets get you offers!",
    description: "Subscribe to get amazing offers",
    yesButton: { label: "Subscribe" }, 
    noButton: { label: "Later" }, 
    logo: "image url here", 
    position: { default: "top-left", mobile: "bottom" }, 
    overlay: { enabled: false }
  });
});

Whenever this script executes, the prompt will show up and your website visitors can subscribe to your store. That means you are not ready to send them campaigns to notify them about sales, discount coupons, etc.

IMPORTANT: If you were not able to host the service worker file mentioned in Step 2, you should go the custom prompt way. Otherwise, a popup showing a native browser prompt would show up out of nowhere and the user would have no context. So it is better to show a custom prompt first to set context which would then show the popup to get actual permission. For more details, read Step 2.

STEP 5: Abandoned Cart Recovery automation

To make Abandoned Cart Recovery automation work on your store, you need to first be able to detect when the cart updates. When you can do so, upon every cart update you need to trigger another API to sync your cart to the PushOwl backend, like so:

const cart = {
 checkoutToken|token: <replace_with_token>,
 items: [
   { variantId: 2323, productId: 34343, quantity: 3 },
   { variantId: 23, productId: 1943, quantity: 1},
 ]
} 
window.pushowl.trigger('syncCart', cart)

As you'll notice in the code above, the cart object needs to be in the specified structure:

You should pass either token (cart token) or checkoutToken (checkout token) - whatever you can get.
A list of items with each item as an object having productId, variantId and quantity. Note that the productId and variantId need to be the numeric IDs (3483274) as number data type and not the guid (guid://shopify/product/34234).

STEP 6: Syncing the checkout token (OPTIONAL)

Note: Before proceeding this step, ensure that your storefront and checkout page is on the same domain. If that is not the case, please send the token as recommended in step 4.

This is an optional step. In many stores, we don't get any token during cart updates. It is only at the time of actual checkout that we get a checkout token. If your store behaves that way, then while syncing the cart in the above step, you can skip the token in the cart object. And when you actually get the checkout token, you can sync it to the PushOwl backend like so:

window.pushowl.trigger('setCheckoutId', checkoutId)

And there you have your Abandoned Cart Recovery automation working!

STEP 7: Browse Abandonment, Price Drop, Back in Stock automation

Note: This step is not needed for headless stores other than Shopify as we do not support automation other than ACR on other platforms.

To make Abandoned Cart Recovery, Price Drop, and Back in Stock automation work on your store, there is one requirement: your product URLs defined in the Shopify admin should still work (as it is or with redirection). This is because on clicking Browse Abandonment notifications, users are taken to the product URL defined in the Shopify admin.

Once you have made sure the above requirement is met, you need to trigger the following respective APIs.

Browse Abandonment

To sync your product view to the PushOwl backend on every product page, like so:

window.pushowl.trigger('syncProductView', { productId: 89789578956 })

Price Drop automation

To show the Price drop automation widget, you need to trigger the following code on your product page (every time for a new product visit). Here, we check if the current variant of the product is available and then call the relevant API:

// Check somehow if the product is in stock
if(/*product is in stock condition*/)
 window.pushowl.trigger('showWidget', {
   type: 'priceDrop',
   product: {
     id: 89789578956,
     title: "Shoe"
   },
   variant: {
     id: 6756578956,
     title: "Sports shoe",
     price: 3000
   }
 });
}

Back in Stock automation

To show the Back in Stock automation widget, you need to trigger the following code on your product page (every time for a new product visit). Here, we check if the current variant of the product is out of stock, then call the relevant API:

// Check somehow if the product is out of stock
if(/*product is out stock condition*/)
 window.pushowl.trigger('showWidget', {
   type: 'backInStock',
   product: {
     id: 89789578956,
     title: "Shoe"
   },
   variant: {
     id: 6756578956,
     title: "Sports shoe",
     price: 3000
   }
 });
}

ℹ️ IMPORTANT INFORMATION: In case you are still using your default store frontend for any purposes, you need to check the store URL registered on PushOwl. The store URL is what these automations use to build a product URL to send in push notifications. You can check your registered store URL by visiting - dashboard.pushowl.com/settings.

Like so:

If the store URL you see above is not the right store URL where products are available, then the automation settings need to be adjusted for that. Currently, this can only be adjusted y contacting us. So if this is the case, please let us know on support@pushowl.com, and we'll adjust the URLs.

STEP 8: Syncing the customer ID

Whenever during the lifecycle of a user's session you get hold of the customer ID (from Shopify), you should sync it once to PushOwl like so:

window.pushowl.trigger('setCustomerId', <customerId_value>)

This is important for proper revenue attributions.

STEP 9: Prevent opt-in prompt on checkout pages

Most headless stores use the native store's checkout on a subdomain like chekout.mainstore.com. Since this is a different subdomain and push notifications treat the subdomain as a different website, your visitors will see the opt-in prompt again on the checkout page and might double-subscribe. To prevent this, you can exclude the checkout page (or any other subdomains) through a setting only available in the backend currently.

If you do have a subdomain like checkout.mainstore.com, please contact our support to get it excluded from showing the opt-in prompt.

PushOwl 101

Nacelle integration

Troubleshooting with the PushOwl Onsite Debugger

Importing subscribers from another platform to PushOwl

Shogun Integration