💬 nuxt-chatra-module

Simple Nuxt.js Chatra integration.

Installation

yarn add nuxt-chatra-module

Add chatra section with options to your nuxt config, only id is required. Check your id here.

Then add nuxt-chatra-module to modules section.

You may also need to transpile this module if you need support for older browsers.

export default {
  chatra: {
    id: 'abcdefghijklmnopq'
  },
  modules: [
    'nuxt-chatra-module'
  ],
  build: {
    transpile: [({ isLegacy }) => isLegacy && 'nuxt-chatra-module']
  }
}

Options

To customize your chatra, you must use setup option:

// nuxt.config.js
export default {
  chatra: {
    id: 'abcdefghijklmnopq',
    setup: {
      // …
    }
  }
}

To check, what setup options is available go to api reference.

Usage

This module simply injected window.Chatra function into nuxt.

You can call chatra methods directly from Vue instances:

<template>
  <button @click='openChat'>Open chat</button>
</template>

<script>
export default {
  methods: {
    openChat () {
      this.$chatra('openChat')
    }
  }
}
</script>

You can find other methods here.

Development

This package use yarn workspaces. It's just to separate nuxt testing dev space and our module.

git clone [e-mail]:ceigh/nuxt-chatra-module.git
cd nuxt-chatra-module && yarn
# provide chatra id and start nuxt dev server
# you can check your id here
# https://app.chatra.io/settings/integrations/widget
CHATRA_ID=abcdefghijklmnopq yarn dev
# or add CHATRA_ID to packages/nuxt-mock/.env (see .env.example)