[DEPRECATED]

This package is deprecated. To integrate a third party script with your Nuxt project, follow our docs here: https://docs.getnacelle.com/nuxt/external-scripts.html

Nacelle Klaviyo Nuxt Module

Adds Vue.js components for displaying Klaviyo forms in your Nacelle Nuxt project.

Requirements

• A Nacelle project set up locally. See https://docs.getnacelle.com for getting started.
• A Klaviyo account and app installed on your Shopify store.

Setup

Add Module to Nacelle

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

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

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

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

Next you will have to add the Klaviyo configuration options to nuxt.config.js in the nacelle config object. You will need a company id, default list id, and default embed code.

In your Klaviyo account dashboard find your company ID under "Account > Settings > API Keys" and copy the "public API / Site ID". The default list ID is for setting the list you would like the Klaviyo Form component to send submissions to. Select the list and find its list ID under "Settings". Finally default embed code is the code snippet provided by Klaviyo for the sign up form you would like the Klaviyo Embed Form component to display. That can be found in the Sign Up form editor under the "Behaviors" tab. When you have these values ready paste them in nuxt.config.js so the nacelle object should look something like this:

nacelle: {
  spaceID: process.env.NACELLE_SPACE_ID,
  token: process.env.NACELLE_GRAPHQL_TOKEN,
  gaID: process.env.NACELLE_GA_ID,
  fbID: process.env.NACELLE_FB_ID,
  klaviyo: {
    companyId: 'XXXX',
    defaultListId: 'XXXXX',
    defaultEmbedCode: '<div class="klaviyo-form-XXXXX"></div>'
  }
},

Add the Components your Nacelle Storefront

There are two components you can add to your Nacelle storefront: <klaviyo-form /> and <klaviyo-embed-form />.

Klaviyo Embed Form will display the sign up form you specified in the defaultEmbedCode option. You can also optionally pass a embed-code prop to specify a different sign up form.

Klaviyo Form will render a Legacy Embedded Signup Form with a field for email address. It has props for list-id, title, email-placeholder, submit-button-text, and success-message.

GDPR Settings

Klaviyo offers a form builder to help you configure branded forms with GDPR-compliant consent collection and display of terms & conditions. For more information, please refer to this blog post and Klaviyo's GDPR compliance docs.