You are viewing the v1 Nacelle Docs for existing merchants.New merchants can find the V2 docs here: nacelle.com/docs.

# PushOwl Setup

To fully integrate PushOwl and Nacelle, please follow the steps below.

# Add Module to Nacelle

Once you have set up Nacelle and PushOwl (opens new window) you can install PushOwl's Nacelle module (opens new window) in your project from npm:

npm install @pushowl/nacelle-nuxt-module --save

After the package is installed, open nuxt.config.js. Under modules add @pushowl/nacelle-nuxt-module. It should look something like this:

modules: [
  '@nuxtjs/pwa',
  '@nuxtjs/dotenv',
  '@nuxtjs/sitemap',
  '@nacelle/nacelle-nuxt-module',
  '@pushowl/nacelle-nuxt-module'
],

Also add the PushOwl configuration to nuxt.config.js in the nacelle config object. All you need is your store's subdomain on Shopify.

nacelle: {
  subdomain: <shopify-store-subdomain-name>
},

# Copy service worker

You need to copy a service worker file from this module's directory (node_modules/@pushowl/nacelle-nuxt-module/lib/templates/service-worker.js) into your app's 'static' directory so it's available on the path /static/pushowl/service-worker.js.

From a terminal, once in your project directory you can run the following commands to copy the service worker file:

mkdir -p static/pushowl
cp node_modules/@pushowl/nacelle-nuxt-module/lib/templates/service-worker.js static/pushowl/

# Initialize PushOwl

In /layouts/default.vue, add the following code created hook to initialize PushOwl:

created() {
  // Existing code ...

  // Initialize PushOwl
  if (typeof window !== "undefined") {
    window.pushowl.init({
      subdomain: <shopify-store-subdomain-name>
    });
  }
},

(NOTE: replace <shopify-store-subdomain-name> with your store's Shopify subdomain)

Now you are all set to use PushOwl's API functions and trigger the prompts to ask for push notification permission. Note: The SDK itself doesn't trigger any prompt. It's up to you to trigger it whenever you want.

For additional API information, check out PushOwl's package documentation for API options: PushOwl's Nacelle module (opens new window)

# Abandoned Cart Recovery (Optional)

# Your Store's Cart URL

If you have 'Abandoned Carts' available on your PushOwl plan, this module works almost out of the box! There is just one change required in the PushOwl dashboard so that the 'Abandoned Cart' push notifications open your store's cart correctly.

Many merchants choose not to have a cart page, but instead use a cart fly-out. With Nacelle's Nuxt Starter and the PushOwl module, adding ?showCart=true to the URL will open the cart fly-out. So your cart URL will become: https://my-shop.com/?showCart=true.

Otherwise, if you have implemented a custom cart page in your store, use that as the cart URL (e.g. https://my-shop.com/cart).

# Use Cart URL in PushOwl dashboard

Once you have your cart URL ready, here are steps to add it in the PushOwl dashboard:

  1. Login to PushOwl dashboard -> https://dashboard.pushowl.com/shopify-login (opens new window)
  2. Go to Abandoned Cart settings: Automations > Abandoned Carts (opens new window)
  3. Edit each of the reminder notifications so that the URLs have your actual cart URL (as discussed above).
  4. Save and you are done!