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

# Okendo Setup

To fully integrate Okendo and Nacelle, please follow the steps below. Make sure Okendo app is installed and setup.

# Add Module to Nacelle

Once you have Nacelle and Okendo set up you can install this module in your project from npm:

npm install @okendo/okendo-widgets-vue

After the package has installed, add your Okendo subscriber ID to your environment variables .env file.

OKENDO_SUBSCRIBER_ID="xxxxxxxxxxxxx"

Then open nuxt.config.js. Under env add:

OKENDO_SUBSCRIBER_ID: process.env.OKENDO_SUBSCRIBER_ID,

# Import the default CSS

In your global CSS file import the default styles for Okendo:

@import '[email protected]/okendo-widgets-vue/dist/css/main.min.css';

# Configure Okendo

Inside the /plugins folder create new file okendo.js and populate it with the following:

import { configureOkendo } from '@okendo/okendo-widgets-vue'

configureOkendo({ subscriberId: process.env.OKENDO_SUBSCRIBER_ID })

Then open nuxt.config.js. Under plugins add '~/plugins/okendoAPI.js' to the array. It should look something like this:

plugins: [
  // other plugins,
  '~/plugins/okendoAPI.js',
]

# Add the components to your Nacelle Storefront

There are 4 components you can add to your Nacelle site:

import { OkendoStarRating } from '@okendo/okendo-widgets-vue'
import { OkendoReviewsWidget } from '@okendo/okendo-widgets-vue'

export default {
  components: {
    OkendoStarRating,
    OkendoReviewsWidget,
    OkendoQuestionsWidget,
    OkendoCombinedWidget,
  },
}

Include the components in your template, providing the Shopify product ID as a prop:

<okendo-star-rating :productId="product.pimSyncSourceProductId" />
<okendo-reviews-widget :productId="product.pimSyncSourceProductId" />
<okendo-questions-widget :productId="product.pimSyncSourceProductId" />
<okendo-combined-widget :productId="product.pimSyncSourceProductId" />

Note: The reviews widget component will show reviews for all products if product.pimSyncSourceProductId is omitted.