ember-cli-zopim-live-chat

Plugin for ember-cli that injects Zopim Live chat code into HTML content.

Installation

To install simply run:

npm install --save-dev ember-cli-zopim-live-chat

Configuration

index.html

Add {{content-for 'zopim'}} to your index.html file, just above the </body> tag.

Important, this will be below where vendor.js is included.

config/environment.js

The zopim code will be injected only if ENV.zopim.id is defined. For instance, to enable the code in only the production environment:

if (environment === 'production') {
  ENV.zopim = {
    id: 'xxx'
  };
}

Where do I find the value for id?

Zopim provides a Javascript snippet which contains your id.

Everything after the ? and before ; in the following portion of the snippet is your id:

$.src='//v2.zopim.com/?[this-is-your-id]';z.t=+new Date;$.

Config parameters

ENV.zopim.window

• offsetVertical: Set the vertical offset of the chat window from the edge of the browser window
  • Allowed value Integer pixel value
• offsetHorizontal: Set the horizontal offset of the chat window from the edge of the browser window in pixels
  • Allowed value Integer pixel value
• position: Set position of the chat window.
  • Allowed values: br (Bottom right), bl (Bottom left), tr (Top right), tl (Top left)
• size: Set the size of the chat window.
  • Allowed values: small, medium, large.
• title: Set the title of the chat window.
  • Allowed value: String title.

Example:

if (environment === 'production') {
  ENV.zopim = {
    id: 'xxx',
    window: {
      offsetVertical: 100,
      offsetHorizontal: 120,
      position: 'br',
      size: 'small',
      title: 'Chat Support'
    }
  };
}

ENV.zopim.bubble

• color: Set the color of the chat bubble.
  • Allowed value hexadecimal color (‘#3300cc’)

Example:

if (environment === 'production') {
  ENV.zopim = {
    id: 'xxx',
    bubble: {
      color: '#3300cc'
    }
  };
}