LiveCom for WordPress

“LiveCom for WordPress” Documentation by “Omar Alb.” v1.1

Created: 16/11/2012
Last Update: 01/03/2015
By: Omar Alb.

Thank you for purchasing LiveCom for WordPress!
This support manual was made to help you become familiar with LiveCom. If you didn't find answers to your problems in this page, then feel free to contact me on the plugin's comment thread on CodeCanyon, or by e-mail.

March 01, 2015 - Notice

The documentation is being updated to cover all of the new features that come with LiveCom for WordPress v1.2. In the meantime, if you need help concerning the new updates - send your request in an email through CodeCanyon, or directly to with your purchase code.

Table of Contents

  1. Introduction
  2. How It Works
  3. Features
  4. System Requirements
  5. Install Guide
  6. Tutorial : My First Live Event Coverage with LiveCom for WordPress
  7. Media Embedding
  8. Settings & Configuration Help
  9. Internationalization
  10. Templates & Animations
  11. Credits

A) Introduction - top

LiveCom for WordPress is a live blogging system built on top of the state-of-the-art AngularJS framework. It was created to be as easy to use as possible, and yet offer a very generous amount of features. With LiveCom for WordPress you can easily cover events live on your WordPress website or blog, all you need to do is install the plugin and give your website visitors a LIVE experience similar to that on Top News Websites.

B) How It Works - top

At the very core of LiveCom for WordPress are three concepts :

  1. Events
  2. Linking to WordPress Content

This means that the general workflow of live event coverage using LiveCom for WordPress is as follows:

  1. Create an Event through the LiveCom Administration Page.
  2. Add a single shortcode to the WordPress Post or Page where you want the live text coverage to appear.
  3. Go back to the LiveCom Administration page, and start broadcasting your comments live.

C) Features - top

The following is a list of LiveCom for WordPress features and their respective descriptions:

D) System Requirements - top

To use LiveCom for Wordpress, you obviously need a working installation of WordPress. To this date, only the following versions of WordPress are supported:

The plugin also needs the following configuration to work :

E) Install Guide - top

Quick Start Video Guide

You can watch a quick start video tutorial on youtube.

Note : The video tutorial is only an addition to this support manual. Please read the documentation first before starting to use LiveCom for WordPress.

Plugin Installation

Follow the steps below to install the plugin to your WordPress using the Plugin Uploader (RECOMMENDED):

  1. Log in to your WordPress Administration Backend.
  2. Browse to Plugins > Add New > Upload.
  3. Click on the Choose File button, and browse to the folder where you have downloaded the archive from CodeCanyon.
  4. Select the plugin archive and click Open.
  5. Click on the Install Now Button, and wait for the plugin to be installed.
  6. Installation is done, you can click on the "Activate plugin" link to activate LiveCom for WordPress.

Installation can also be achieved using an FTP Client :

  1. Extract the plugin archive somewhere on your computer. You'll get a livecom folder.
  2. Using your FTP client, browse to "/path/to/your/wordpress/installation/wp-content/plugins/".
  3. Upload the entire livecom folder you had previously extracted to the plugins directory.
  4. FTP Installation is done. (You should now have on your web host a "wp-content/plugins/livecom" folder)

Plugin Activation

If you didn't activate the plugin directly after install, here is how to do it :

  1. On your WordPress Administration Backend, Browse to Plugins > Installed Plugins.
  2. Look for LiveCom, and click on the "Activate" link.

That's It! You are now ready to liveblog on any event that is happening! Skip to Section F for a How-To Liveblog Tutorial.

Info : This is what happens when the plugin is activated :
Note : After activating the plugin the "livecom_settings" option is always updated to mirror the settings that are in the livecom.service.config.php file. This measure is taken so that whenever you are upgrading to a newer version of LiveCom, if there are any changes or additions to the settings group, these will be correctly saved to the database.

Plugin Deactivation

If you ever need to deactivate LiveCom for WordPress (or when updating), just do as follows :

  1. On your WordPress Administration Backend, Browse to Plugins > Installed Plugins.
  2. Look for LiveCom, and click on the "Deactivate" link.

Info : When the plugin is deactivated, the LiveCom shortcodes that you have added will show up on your pages/posts because they are not parsed anymore. Make sure you delete any of these after deactivating LiveCom for WordPress.

Plugin Update

When a new version of LiveCom is available, download it from CodeCanyon, and follow these steps to upgrade :

  1. Backup LiveCom : (Optional, but recommended)

    1. Using your FTP client, browse to "/path/to/your/wordpress/installation/wp-content/plugins/"
    2. Download the "livecom" folder to your computer and keep it safe somewhere.
    3. That's it for backup. You definitely must backup if you've made manual changes to the LiveCom templates or configuration files.
  2. Deactivate LiveCom.
  3. Using your FTP client, browse to "/path/to/your/wordpress/installation/wp-content/plugins/".
  4. Delete the entire "livecom" folder from the plugins directory.
  5. Install the newly downloaded version of LiveCom.
  6. Activate LiveCom


If you ever need to Uninstall LiveCom for WordPress, just do as follows :

  1. On your WordPress Administration Backend, Browse to Plugins > Installed Plugins.
  2. Look for LiveCom, and click on the "Delete" link.

Warning : All of the LiveCom MySQL tables and Options will be deleted from your database upon uninstall! This means that you will lose all of your live blogging data if you choose to delete Livecom for WordPress. If you want to keep this data, make sure to backup the `{PREFIX}oa_livecom_events` and `{PREFIX}oa_livecom_comments` MySQL tables before uninstalling the plugin.

F) Tutorial : Covering a Product Launch Conference with LiveCom for WordPress - top

After installing and activating LiveCom for WordPress you can instantly start covering live any event you want.

Let's say that you maintain an IT blog, running on WordPress, specializing in the technologies of the web. Let's also say that you will be attending a product launch conference and want to liveblog everything that happens in there. The first thing you do is, a few days before the conference, you write a blog post and tell your readers that you will be live blogging from the conference and that they can follow the coverage live on your blog.

Step 1 : Create Blog Post
Fig. 1 : "Step 1 : Create Blog Post"

Now that your readers know about you covering the product launch live, it is time to create a LiveCom Event. You should head to the LiveCom Administration page. You'll be shown the LiveCom Dashboard, click on the "LiveCom Events" link on the navigation bar. On the LiveCom events page, you see the list of events you have created. Type in the title field, the name you want for the event ( e.g: "CoolWebb Product launch") and click on the green "+" button. A notification pops up and says the event was added to the database successfully!

Step 2 : Add LiveCom Event
Fig. 2 : "Step 2 : Add LiveCom Event"

Step 3 : Events list / Event Add Success Notification
Fig. 3 : "Step 3 : Events list / Event Add Success Notification"

As you can see on Fig. 3, the newly created event is added to the event list. You can either click on the blue wrench button to go to the Event Management Page (where you can edit the event details and broadcast live comments) or click on the red trash button to delete the event if you want. Right now you will do neither.

The next step is to link this newly created LiveCom event to the blog post you had created. Linking the event to the post content is done through a shortcode. The shortcode basically tells WordPress where to include the LiveCom application and how. It is used to choose the Event, Template and Animation to use when bootstrapping the LiveCom App. Some general settings can be overridden using shortcodes (Settings help).

Adding the appropriate shortcode can be done in two equally easy ways :

  1. Copy & Paste Shortcode :

    In the Event Management Page (you are routed there after clicking on the blue wrench button), under the Styling section, you can choose the Template, Animation and Animation duration to be used. Don't mind the Commands section for now.

    Step 4a : Generate shortcode for Copy & Paste
    Fig. 4 : "Step 4a : Generate shortcode for Copy & Paste"

    After you've chosen the styling settings you want, Copy the generated shortcode, head to the WordPress Post Edit Page and Paste the shortcode where you want the live text to show up.

    Step 4b : Paste Shortcode in WordPress Post Content
    Fig. 5 : "Step 4b : Paste Shortcode in WordPress Post Content"

  2. Insert Shortcode through LiveCom's TinyMCE Dialog:

    In the WordPress Post Edit Page, while the TinyMCE WYSIWIG Editor is enabled, click in the textarea where you want the live text to appear, and then click on the LiveCom Button. A dialog will popup, through which you can choose the event and styling settings. Clicking on the "Insert Shortcode" button will do just as it says.

    Step 4c : Insert Shortcode through LiveCom's TinyMCE Dialog
    Fig. 6 : "Step 4c : Insert Shortcode through LiveCom's TinyMCE Dialog"

Note : You can add only one LiveCom shortcode per post. When you have more than one of these shortcodes in the post content, upon saving the post to the database LiveCom for WordPress will strip away all of the additional shortcodes and keep only the first one. Similarly, clicking on the TinyMCE LiveCom button while there already is a LiveCom shortcode in the post content will result in an error message in the dialog.
This limitation is necessary to avoid having many instances of the LiveCom Application running on the same WordPress Page or Post.

After linking the event with your post content, wait until you are sitting in the conference room and your laptop is in front of you :) In the meantime, the shortcode you have added will do absolutely nothing on your post's frontend, because you have not started broadcasting yet.

The flight was tiring, you arrived at Heathrow Airport, took a cab to the hotel where the conference takes place. After a very hasty lunch at the overpriced hotel restaurant, you run to the auditorium and take your place, turn your laptop on and browse to your WordPress Administration panel. Now you can actually start your live coverage!

Before jumping into live broadcasting, you need to know about event statuses and what each one means. LiveCom Events are separated into 4 categories :

Now that you know about event statuses, head to the Event's Management Page and under the Commands section click on the green "Start Broadcasting" button. A confirmation message will ask you if you really want to start broadcasting. Click Ok.

Step 5a : Confirm Start Broadcasting
Fig. 7 : "Step 5a : Confirm Start Broadcasting"

Step 5b : Broadcasting Started
Fig. 8 : "Step 5b : Broadcasting Started"

Congratulations! You are now covering the event in real time! Your readers can now follow your comments live as they are posted.
To broadcast a live comment, type it in the text area with the 'Enter a new comment for broadcast' placeholder and click on the green bullhorn button.

Step 6 : Broadcast Live Comment
Fig. 9 : "Step 6 : Broadcast Live Comment"

Let's say you mistakenly posted something erroneous or you have a typo in your comment. All you need to do to change the comment is to Double Click on the comment and it will instantly become editable. When you are done with your modifications, Double Click again on the comment text area and it will be saved to the database!

Step 7a : Double Click on comment to edit
Fig. 10 : "Step 7a : Double Click on comment to edit"

Step 7b : Edit the comment
Fig. 11 : "Step 7b : Edit the comment"

Step 7c : Double Click again to save the comment
Fig. 12 : "Step 7c : Double Click again to save the comment"

Tip : If you want the additional stylish flavour to your live text, LiveCom supports the use of safe HTML tags in comments. Also, valid URLs are automatically changed into HTML links.

Obviously, to delete a comment, click on the red trash button. You will be prompted to confirm the action because it is irreversible.
If you want to go outside for a coffee you can Pause the event (Yelllow button) and when the conference is over you should End / Archive the event (Black button).

In case you are covering the event with a colleague through LiveCom, you will get notifications of any major actions he's done. The following screenshots show some of these notifications:

Comment Modified Notification
Fig. 13 : "Comment Modified Notification"

Comment Deleted Notification
Fig. 14 : "Comment Deleted Notification"

Event Paused Notification
Fig. 15 : "Event Paused Notification"

Event Archived Notification
Fig. 16 : "Event Archived Notification"

Event Deleted Notification
Fig. 17 : "Event Deleted Notification"

That is all you need to know in order to use LiveCom for WordPress! Enjoy live blogging!

G) Media Embedding - top

With the 1.1 update of LiveCom came the possibility to embed media in your comments. All you need to do add a media to your comment before broadcasting it is click on "Enable Media Embedding" which will show a media form that you'll need to fill and then validate.

There are two ways to embed media in your comments :

  1. Manually :

    When adding media manually, you must first choose the Media type :

    • Images (JPEG, GIF, PNG): Viewers on the front-end can click on them to see a bigger version of these images in a lightbox.
    • HTML5 Audio (MP3, OGG (.ogg/.oga), WAV) : Played using the MediaElement Player for broader cross-browser support a more consistent look across different browsers.
    • Video Files (MPEG4, OGG (.ogv), WebM, WMV, FLV) : Also played using the MediaElement Player.
    • Youtube Videos : Embeds the Youtube player.
    • Vimeo Videos : Embeds the Vimeo player.

    After choosing the media type, the most important input is the media URL. It must be a valid URL and point to an existing file. Optionally, you can add a caption, and a title in the case of images.

    Finally, always click on the "Validate Input Media" in order to show a preview of the embedded media and flag the comment as containing embedded media.

  2. Using the Media Manager :

    You can add Images, Audio and Video files to your comments directly from your WordPress media library by opening the Media Manager. All you need to do is select the media you want to add, and click on the "Embed media in comment" button.
    You may also upload media using the media manager and then select it to be embedded in the comment.
    You don't need to validate the input when using the Media Manager. The information concerning the media is automatically retrieved from the Media Manager and validity checks are done when clicking on the "Embed media in comment" button.

Highlight Video

The following video shows you how to embed media in your live comments.

Note : Some browsers may or may not play some audio/video files correctly (sometimes not at all). This can be the result of many different causes, but essentially the MediaElement Player will try to use every possible way (native support, flash and silverlight fallbacks ) to play the files before failing and returning a 'Download File' link.

H) Settings & Configuration Help - top


Following are the general options that you can set on the WordPress LiveCom Settings page. (WordPress Admin > Settings > LiveCom)

Event Refresh Interval
A numeric value in milliseconds, it sets the interval at which LiveCom will ask the server for an Event update. Events are updated at this interval when they are LIVE and PAUSED. The minimum possible value is 5000ms.
Minimum Comments Refresh Interval
A numeric value in milliseconds, it sets the minimum interval at which LiveCom will ask the server for a Comments update. The minimum possible value is 5000ms.
Comments Refresh Interval Step
A numeric value in milliseconds, it sets the step to add to the Minimum Comment Refresh Interval whenever the server responds with 'no new comment updates'. The minimum possible value is 500ms.
Maximum Comments Refresh Interval
A numeric value in milliseconds, it sets the maximum interval at which LiveCom will ask the server for a Comments update. Can not be less than Minimum Comments Refresh Interval.
Info : The Comment Refresh Interval is dynamic, it changes between the Minimum and the Maximum values. When the server responds with 'there are new comments updates' it is reset to the minimum value - otherwise it will increase, step by step, to the maximum value and stay constant until new updates are available.
Example : Min = 5 seconds, Step = 2 seconds, Max = 10 seconds
First refresh : Interval = 5s
Second refresh : Interval = 7s
Third refresh : Interval = 9s (Server says there are new comment updates)
Fourth refresh : Interval = 5s ...
Tip : If you want to have a constant comment refresh interval, just set the Maximum Comment Refresh interval Equal to the Minimum Comment Refresh Interval.
Comments Push Interval
A numeric value in milliseconds, it sets the interval at which single comments are "pushed" (displayed) on the reader frontend. When there are new/updated comments from the server, they are not displayed instantly. The comment push interval is the delay it takes to show each new comment at a time.
Note : The comment push interval is overridden by the Animation Duration when this latter is greater. This gives the chance for the animation to complete before pushing the next comment when there are more than one to display.
Max Return Count NEW !
A numeric value, it sets the maximum number of entities to be returned when requesting comments from the LiveCom service. When an event is archived, its comments will be paginated and this value will determine the number of comments to display per page. This option allows the 'Load More' feature to be effective - if you want to 'disable' the 'load more' feature, you can set the Max Return Count to a very high numeric value (10000 should be enough).
Load Older Count NEW !
A numeric value, it sets the maximum number of comments to be returned when requesting to 'Load More' comments.
Show Initial comments instantly NEW !
When checked, comments pushing will be disabled for the comments that are already posted when your readers first open the page containing the live blog. They will be displayed instantly in the browser without animation.
Show New comments instantly NEW !
When checked, comments pushing will be disabled for the new comments that are being posted live after your readers have opened the event page and seen the initial comments. They will be displayed instantly in the browser without animation.
Show Older comments instantly NEW !
When checked, comments pushing will be disabled for the comments retrieved when requesting to 'Load More' comments. They will be displayed instantly in the browser without animation.
When checked, LIVE events that have shown no activity (Details and Comments not updated from the LiveCom admin panel) will be automatically PAUSED.
Autopause Delay
A numeric value that sets the delay in minutes for Autopause. The minimum possible value is 10 minutes.
When checked, PAUSED events that have shown no activity (Details and Comments not updated from the LiveCom admin panel) will be automatically ARCHIVED.
Autoend Delay
A numeric value that sets the delay in minutes for Autoend. The minimum possible value is 60 minutes.
Tip : The Autopause and Autoend can features can be very handy when you forget, or are incapable (e.g: loss of internet connection in the middle of a live coverage) to pause or archive an event. They help in economizing your server bandwidth and load.
Force Delete Delay
A numeric value in minutes, at least 0.
Events and Comments are not deleted from a database directly. They are first flagged as 'deleted' - this is referred to as a 'soft delete'. Only when the Force Delete Delay is up are they permanently deleted. This mechanism permits soft deleted events/comments to be recovered on the database level in case of a mistake.
Tip : If you want to bypass the soft deletion mechanism, just set Force Delete Delay to 0.
Media Width NEW !
A numeric value in pixels, higher than or equal to 30, it sets the maximum width of embedded media.
Media Height NEW !
A numeric value in pixels, higher than or equal to 20, it sets the maximum height of embedded media.

Override Settings using Shortcode attributes

You have the possibility to override some general settings using shortcode attributes. Here is a list of overridable settings :

Example: The following shortcode links to event number 99 and includes all of the possible attributes.
[oa_livecom_event id='99'
Note : In this example, the animation duration will override the comment push interval (because 2000 > 1500).
Also, initial and older comments won't be pushed to the browser one by one with animation, but they will be dispayed instantly.

Configuration Files

Generally, changing the configuration files is reserved for advanced use such as enabling debugging and registering your own templates.
There are two configuration files in the livecom plugin directory, and only one of them may concern you.

  1. livecom.config.php : This is the configuration that you may need to edit at some point. It has a global configuration array containing the following keys :
    • DEBUG (Boolean) : Sets the environment - false is for production, true is for debug.
    • LOG_FILE(String) : The name of the log file.
    • TEMPLATES (Array) : Names and Values of Templates. This is where you register your own templates. Names are the text that shows up in Template select boxes. Values are the template IDs, they are used in 'value' attributes of select boxes and they refer to the template folder name ('./livecom/templates/standard/%tpl.value%/').
    • ANIMATIONS (Array) : Names and Values of Animations. Names are the text that shows up in Animation select boxes. Values refer to the animation IDs to pass to the oaAnimate AngularJS directive.
  2. livecom.service.config.php : This file is generated automatically to mirror the MySQL authentication used by WordPress and the changes done to the LiveCom Settings. It is used by the LiveCom Service (Persistence layer of the application) for the different CRUD operations, and by the LiveCom TinyMCE dialog to retrieve the relevant event data from the database.
    Warning : Unless you have changed the core code of LiveCom and know what you are doing, it is highly recommended to not edit the contents of this file.

I) Templates & Animations - top


LiveCom for WordPress uses templates to render the event and its live comments inside your post. This gives a very high level of flexibility and customization : you can create your own templates or edit the ones that come with LiveCom.

Note : Editing and Creating LiveCom templates is a technical task. You must be familiar with HTML, CSS, PHP and optionally Javascript to be able to modify or add a template. LiveCom does not abstract the coding process for you (there is no visual user interface to manage templates), but it does provide an easy and organized hooking mechanism to register templates. This part of the documentation will only explain how this hooking mechanism works, it will not delve into the programming how-to details. Therefore, if you are not knowledgeable enough in the above mentioned languages, it is recommended to delegate this task to a more experienced developer.

The three pre-installed templates are:

  1. Default : Just like its namesake, it is the default LiveCom Template.
  2. Boxed : Shows comments in a box with scrollbars. Use it when you don't want the browser page to grow long.
  3. Minimalistic : Shows comments with very little styling.
Templates File Structure
Fig. 18 : "Templates File Structure"

Each LiveCom Template is actually two different template files and a common stylesheet. The first file is an AngularJS Template used for live or paused events, and the second is a PHP Template file used for archived events.

The templates are stored in the './livecom/templates/standard/' directory (under the wordpress plugin directory). Each template consist of one folder, which name is the ID of the template, containing three files:

  1. style.css : The template stylesheet. It must contain at least the following id selector :
    #livecom_container {
    	display: none;
    This rule insures that the AngularJS template does not show up when the javascript application is bootstrapping. The display:none is reset to display:block in the browser once the LiveCom application has bootstrapped and is ready.
  2. live.php : This is the AngularJS template that is used when the events are live. Refer to the AngularJS documentation on how to use the template syntax.
    Warning : The live template should always be wrapped in a container div with id="livecom_container". This id is what tells LiveCom what part of the page should be compiled by AngularJS.
    Also, when editing the live template make sure you don't change any of the AngularJS-specific attributes and special elements or risk to break the application.
  3. archive.php : This is the PHP template that renders the comments when the event is archived.
Template Variables
The following is a list of variables which can be used in the AngularJS and PHP template files.

Template creation

To create a LiveCom template of your own, you just add a folder under './livecom/templates/standard/' (name it something like super_new_template), and copy in it the Minimalistic template files (because they have the least amount of styling) which you can edit to build your own style.

Registering a newly created template to be useable by LiveCom is a matter of opening livecom.config.php and adding an entry to the $oa_livecom_config['TEMPLATES'] array as follow:

(object) array("name"=>"My Super New template","value"=>"super_new_template") )

Let's recapitulate, the important points to mind when creating a template of your own are :

  1. style.css, live.php, archive.php must exist in './livecom/templates/standard/%tpl_id%/'.
  2. Wrap template in a #livecom_container div and add CSS rule with display:none to this container div.
  3. Avoid changing the logic of templates.


LiveCom gives you the option to use animations when showing live comments on the user frontend. Five animations are supported :

Creating your own animations is out of the scope of this documentation. But if you want to experiment, read about AngularJS directives and edit the oaAnimate directive in the livecom.directives.js file to test your own animations in debug mode (Production mode uses a minified version of the LiveCom javascript application).

J) Internationalization - top

Starting from v1.1, LiveCom became fully translatable. If you wish to translate the plugin to your language, you must know that besides the traditional .po and .mo files that come with most WordPress plugins, LiveCom actually has a few more files that include translation strings, each one pertaining to a different part of the application.

Following is a list of the languages files and their files paths relative to the plugin's root directory :

  1. lang/livecom-{loc_ALE}.po and lang/livecom-{loc_ALE}.mo :

    These are the files that most WordPress plugins use. LiveCom comes with a bundled French translation - you can make a copy of the lang/livecom-fr_FR.po file and use it as a starting template to create your own translation and generate a .mo file.

  2. lang/livecom.admin.{locale}.js :
  3. This file contains the LiveCom administration application's translated system strings. You can use the lang/ file as a template for your translation. You'll note that the lang/livecom.admin.en.js contains an empty object. This is because the english strings are inside the application - just like there is no lang/ file.

  4. lang/livecom.service.{locale}.php :
  5. Contains a basic array of translated strings used by the LiveCom service. You'll want to use lang/livecom.service.en.php as a starting template.

  6. lang/livecom.tinymce.dialog.{locale}.php :
  7. Contains a basic array of translated strings used by the dialog that pops up when adding shortcodes using the TinyMCE editor. You can use lang/livecom.tinymce.dialog.en.php as a starting template.

  8. assets/js/app/partials/livecom.dashboard.{locale}.php
  9. assets/js/app/partials/{locale}.php
  10. assets/js/app/partials/livecom.event.{locale}.php
  11. assets/js/app/partials/livecom.broadcast.editor.{locale}.php :

    These four files are AngularJS templates and are basically the foundation of the LiveCom administration application. You can use the english partials as starting templates for your translation. That being said, make sure that you only translate the strings that are rendered to the browser and avoid changing anything that pertains to the application logic.


{loc_ALE} must follow the language_TERRITORY format (eg : en_US, pt_BR, fr_FR)
{locale} must be a lower case two-letter language code (eg: en, pt, fr)

To translate the front end - have a look at the Templates section of the documentation.

K) Credits - top

A big thank you to the people behind these projects, and special thanks to the active members of the AngularJS Mailing list.

This is all for the documentation. Thank you again for purchasing for LiveCom for WordPress. If you need assistance, make sure to contact me at or on CodeCanyon using the plugin's comment thread, I will be more than happy to help you as best as possible.

Go To Table of Contents