@nacelle/nacelle-klaviyo-nuxt-module

    0.0.14 • Public • Published

    Nacelle Klaviyo Nuxt Module

    npm version install size

    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.

    Keywords

    none

    Install

    npm i @nacelle/nacelle-klaviyo-nuxt-module

    DownloadsWeekly Downloads

    2,002

    Version

    0.0.14

    License

    MIT

    Unpacked Size

    12.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • dzouras
    • badiolaignacio
    • leviwhalen
    • andrew-nacelle
    • nwrichmond
    • brianvanderson
    • cbodtorf
    • johnstonbl01
    • krisq
    • curbol
    • irnoble
    • jongeyer
    • alexnacelle
    • nacelle-bot
    • austin1237