Integrating ReLP
with Your Web Site

Last revised September 5th, 2007

Questions regarding this document should be directed to .

Introduction:

There are two components of ReLP that will need to be integrated with your website; contact buttons and the tracking system. Both systems have been designed to be easy to set up without compromising flexibility.

ReLP supports multiple languages. To correctly detect the language that a website visitor is browsing a page in, you’ll need to pass that information to ReLP in ISO639-3 format. The following languages are supported by ReLP at the time of this document:

eng: English
fra: Parisian French
fre: Quebecois French

Contact Buttons:

The contact button represents your presence on the ReLP system. The best way to create these is to use the ReLP Button Generator at: http://www.realelivepeople.com/buttongenerator/. This page will prompt you for the required information, and output the HTML that will display the button.

The contact button shows website viewers that you are online, and clicking it will open up a chat window with you. It does this by referencing a script on the ReLP server, which checks to see if you are online and returns the status to your website. To do this, you need to give it the following information (taken from the instructions on the button generator):

• ReLP Username: Enter the username for the ReLP account to connect to. In the case of an agent account, this is usually the email address. For a button that connects to any available agents, contact ASL for your site username.
   
• URL of Online Image: Enter the URL to the image you want displayed when the agent(s) are online. If you leave either of the "online" or "offline" image boxes blank, no image will be displayed on the page. This can be useful if you want to use Javascript for your own display of the agent status.
   
• URL of Offline Image: Enter the URL to the image you want displayed when the agent(s) are online or in "do not disturb" mode.
   
• URL of Static Image: Enter the URL to the image you want displayed in the static button. If you leave this blank, no static button will be generated.
   
• Javascript Variable: In most situations, this box should be left blank. If you wish, you can specify a Javascript variable to be returned from ReLP. ReLP will check to see if the agent is online, create a Javascript variable that you have named here, and set it to the agent status: 'online', 'offline' or 'busy'. This variable can then be used by Javascript or Flash as you see fit. Note that you cannot declare the variable elsewhere in the page, as it is declared internally by ReLP.

You'll notice that there are two output boxes on the ReLP Button Generator. The top one will contain the code for a dynamic button; that is, one that will change its appearance depending on whether the agent is online. The bottom one is for static buttons; these will not change when users log in/out. The static button can even be embedded in your email signature so recipients can ReLP you from an email!

Here's an example of what the Button Generator will output:

Dynamic Button:

<script src="http://realelivepeople.com/getRELStaticButton.php?
requestedHost=andrew@aslinternet.com&onlineImage=andrew_online.jpg&
offlineImage=andrew_offline.jpg&ISO639=eng" type="text/javascript"> </script>

Static Button:

<a href="http://www.realelivepeople.com/guest.php?requestedHost=
andrew@aslinternet.com&ISO639=eng" target="_blank">
<img src="andrew_static.jpg" border="0"></a>

Note that neither of these require PHP or any other server side components; the only requirement is that the client browser support Javascript for the dynamic button to work. All you have to do is paste the outputted code into your page and the contact button will appear. If you are comfortable editing HTML, then you can skip the Button Generator and just write the code by hand.

If you operate a site in multiple languages, you’ll want to make sure to specify the language the chat will open up in with the ISO639 parameter. See the top of this document for a list of the languages that ReLP will support. If no language is specified, it will default to English.

Tracking System:

The ReLP tracking system is a bit more complicated to implement, but it's not tough. Depending on your ReLP license, you may not have access to the tracking system and can skip this section.

The ReLP tracking code should go on every page on your site, or at least the ones you want to keep an eye on. The easiest way to do this is if you are using ASP/PHP or another scripting language; if possible, put the code in one or more files that are included in every page. Otherwise, you'll have to manually edit each page.

To enable ReLP tracking, put this code in the <body> section of each page. It can go anywhere in the <body> section, but you should avoid placing it within other page elements such as <div>s or <table>s.

<!-- Real e Live People Monitoring -->
<script type="text/javascript" src="http://www.realelivepeople.com/relptracker.js"></script>
<script type="text/javascript">ConnectReLP("YOURSITENAME", "eng"); </script>

Make sure you replace the site tracking ID with your site's tracking ID. It should have been emailed to you when your account was set up; if not, please contact your account representative to get that information. I've highlighted the tracking ID to make it easier to see.

Again, if your site supports multiple languages, you’ll need to specify the language by replacing “eng” with whatever language the page is being displayed in. You can omit this parameter if your site is English only.