ember-elevio

Elevio for Ember.js apps.

This README outlines the details of collaborating on this Ember addon.

Installation

Install this addon with ember-cli ember install ember-elevio

The elevio widget should appear once the app has initialized.

Global Configuration

In your config/environment.js file, you must provide your accountId all other options are optional

Your account id can be found on elev.io in the Installation Code section

// config/environment.js
module.exports = function(environment) {
  var ENV = {
    elevio: {
      enabled: true, // or false
      accountId: '1234',
      theme: 'dark', // or 'light'
      side: 'left', // or 'right'
      dockedPosition: 'wall', // or 'floor' or 'button'
      tabTeaser: 'Need a hand?',
      mainColor: '#000000', // or 'black' or 'rgb(0, 0, 0)'
      lang: 'en',
      pushin: 'true', // or 'false
      translations: {
        general: {
          search: 'Find'
        },
        modules: {
          articles: {
            related_articles: 'These articles might help'
          }
        }
      }
    },
    disabledModules: [123, 321]
  }
  
  return ENV;
};

Using the service

Note: if you are setting the user email you must also set the userHash. See: https://elev.io/api#user-hash

import Ember from 'ember';

const {
  Component,
  inject: {
    service
  }
} = Ember;

export default Component.extend({
  elevio: service(),
  actions: {
    changeUser() {
      get(this, 'elevio').changeUser({
        firstName: 'John',
        lastName: 'Doe',
        email: '[email protected]',
        phoneNumber: '555-555-555', // used by some of the live chat clients
        userHash: '98aad46fd8', // See: https://elev.io/api#user-hash
        groups: 'gold',
        traits: {
          Plan: 'Gold',
          'Monthly Spend': '$99'
        }
      });
    },
    logout() {
      get(this, 'elevio').logoutUser();
    }
  }
});

Available functions

• changeUser(userInfo)
• logoutUser()
• setTranslations(translations)
• setKeywords(keywords)
• setLanguage(language)
• disableModules(modules)
• enableModules(modules)
• openArticle(articleId)
• openModule(moduleIdOrName)
• enablePushin()
• disablePushin()

Using the mixin

import Ember from 'ember';
import ElevioEvents from 'ember-elevio/mixins/elevio-events'

const {
  Route,
  inject: {
    service
  }
} = Ember;

export default Route.extend(ElevioEvents, {
  elevio: service(),
  actions: {
    afterElevioLoaded() {
      // what you'd like to do after elevio has loaded, e.g.,
      get(this, 'elevio').openModule('articles');
    }
  }
});

Show Articles

Inline component

{{elevio-article article="10" text="My article"}}

Block component

{{#elevio-article article="10"}}
  <button>My Article</button>
{{/elevio-article}}

Show Inline Tips

Inline component

{{elevio-inline inline="270" text="My inline tip"}}

Block component

{{#elevio-inline inline="270"}}
  <button>My inline tip</button>
{{/elevio-inline}}

Show Modules

Inline component - Module ID

{{elevio-module module="270" text="Support"}}

Inline component - Module Name

{{elevio-module module="support" text="Support"}}

Block component

{{#elevio-module module="270"}}
  <button>My module</button>
{{/elevio-module}}

Contributing

Cloning

• git clone <repository-url> this repository
• cd ember-elevio
• npm install
• bower install

Running

• Set the environment variable ELEVIO_ACCOUNT_ID={Your account id}
• Your account id can be found on elev.io in the Installation Code section
• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:each to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://ember-cli.com/.