up

Documentation


Overview

Our chat system uses a chat protocol called XMPP. This basically means its very flexible so you can use lots of different tools to chat according to what suits you.

We recommend however that you use a free and very easy to use program called Pidgin. Here is a full list of supported chat clients, note that you can set up Apple iMessage in a similar way (see the Pidgin set up information). This comes built into all modern iphones, ipads, Macbooks and iMacs so is great for any Apple lovers out there, imo.im is a popular client for Andriod, Blackberry, Nokia based phones.

If you would like for instructions on other clients on that list please contact us and we’ll be happy to help


Setting up Pidgin for Gaglers

  1. Visit http://www.pidgin.im/ and download this for your PC or Mac or Linux
  2. Follow the instructions to install Pidgin, when you see the 'Choose Components' screen make sure that 'xmpp' is ticked (it should be by default so you should just be ok clicking next to all these messages until it is installed).
  3. Once the program has installed, it should run automatically if you tick the 'Run Pidgin' checkbox at the end. If not go to your startmenu (on a PC) or finder (on a Mac) and search for Pidgin and run this.
  4. Now you need to add an account. You should get prompted to do this or you can click the menu Accounts > Manage Accounts and then when this page loads click Add... to add a new account. Fill out the following information:
    • Protocol: XMPP
    • Username: (use the username (not email) you created in the Dashboard
    • Domain: chat.gaglers.com
    • Password: (use the special password that you used to create the Gaglers ID)
    • Remember Password: (we recommend you this checkbox so that you don't have to keep putting your password in each time)
    • Everything else on this page or other tabs can be left as they are, and you just need to click Save when this is done.
  5. You should find that Pidgin will now automatically connect your account, but if not and you see a grey screen saying 'Welcome to Pidgin' then press Accounts > Enable Account > then select the account you just added.

If all has gone to plan, you will be logged in and you will now be available to chat to customers live. If you want to test this you can navigate to your own shop page and you will see that you can now chat live.

From now on, to stay logged in when you are available you just need to make sure that Pidgin is running on your computer and that it is connected to the account you set up above with a green 'Available' light showing.

When customers chat with you, you will hear a noise and will get a pop up notification and you can customise how these work in the Pidgin settings if you wish to do that further.


Setting up Google Talk (Gtalk) with Gaglers

This configuration must be done once by the agent, using the Gtalk login that was registered with Gaglers.

  1. Configure any IM client to use Gtalk. The instructions to configure the clients are in Gtalk documentation page.
  2. Login to the IM client using your regular Gtalk login
  3. Accept buddy invitations from Gaglers.
  4. That is it. You can now receive instant messages from your prospective buyers in your Gtalk.

Widget Customizations

Basic Widget Code

Following code is embeded in every page, with the appropriate widget_name

<!--- Start Gaglers Code --->
<script type="text/javascript">
var chatOptions = {
"interest":"{widget_name}" };
(function() { var gag=document.createElement('script');
gag.type='text/javascript'; gag.async=true;
gag.src=document.location.protocol + '//chat.gaglers.com/client/js/';
var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gag, s); })();</script>

<!--- End Gaglers Code → 


Chat Widget Options

The chat widget can be customised using the following options. See example below for a typical usage.

interest

This is the unique name of the chat widget that was registered with Gaglers. This is the only required parameter for the chat widget.

onlinecallback

Javascript method to be called when the agent comes online. This can be used to change color or text of any “Click to chat” buttons on the page.

offlinecallback

Javascript method to be called when the agent goes offline. This can be used to change color or text of any “Click to chat” buttons on the page.


Customer Information

Keep track of customer using the following options. These options would be set a javascript variable like below. See example below for a typical usage

var gaglers_visitor = { "name": "{customer name}", "tag":"{your tag}" };

name

Track of the name of the customer to display in the buddy list and in your CRM

tag

Add tags to a customer. The tags can be used for filtering in the dashboard and in your CRM


Javascript Based Actions on the HTML Page

The Chat widget also provides the following javascript methods to interact with it. The javascript object “Gaglers” is global object available in every webpage that includes the Gaglers chat widget code.

Gaglers.open()

Display the Chat Widget

Gaglers.close()

Close and Hide the Chat Widget


Example Customisation

Here is the code that embeds a chat widget. This chat widget is displayed when the HTML element with id “live-support” is clicked. This also identifies the visitors name as "Sarah" and tags her as a "top10" customer

<!--- Start Gaglers Code --->
<script type="text/javascript">

document.getElementById('live-support').onclick = function() {
Gaglers.open();}

function onlineCbk() {
document.getElementById('live-support').innerHTML = "<img src='http://acme.com/livechat/online.gif'/>"}

function offlineCbk() {
document.getElementById('live-support').innerHTML = "<img src='http://acme.com/livechat/offline.gif'/>"}

var chatOptions = {
"interest":"Sarah Boutique",
"onlinecallback":onlineCbk,
"offlinecallback":offlineCbk
};

var gaglers_visitor = {
"name":"Sarah",
"tag":"top10"
};

(function() { var gag=document.createElement('script');
gag.type='text/javascript'; gag.async=true;
gag.src=document.location.protocol + '//chat.gaglers.com/client/js/';
var s=document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gag, s); })();

</script>
<!--- End Gaglers Code -->