Integrate Olark into VP-ASP 7.00

Integrate Olark into VP-ASP 7.00

You can integrate Olark into your VP-ASP 7.00 site. Olark provides a live chat system with integration on your IM clients such as Pidgin Messenger or Google Talk.

For more information about Olark, please visit :
http://www.olark.com/

Below is the steps to integrate Olark into your VPASP 7.00 :

1. Register new account with Olark. Please go to the below link :
http://www.olark.com/signup/create_new_account



2. Once signup complete, on the next screen you can bypass premium service offers by clicking "No thanks" to move to next page.



3. In the next page (Dashboard), you will be given a code snippet to put in your site.



The code will look like below (do not copy from the below example) e.g. :

<!-- begin olark code --><script type='text/javascript'>/*{literal}<![CDATA[*/window.olark||(function(i){var e=window,h=document,a=e.location.protocol=="https:"?"https:":"http:",g=i.name,b="load";(function(){e[g]=function(){(c.s=c.s||[]).push(arguments)};var c=e[g]._={},f=i.methods.length; while(f--){(function(j){e[g][j]=function(){e[g]("call",j,arguments)}})(i.methods[f])} c.l=i.loader;c.i=arguments.callee;c.f=setTimeout(function(){if(c.f){(new Image).src=a+"//"+c.l.replace(".js",".png")+"&"+escape(e.location.href)}c.f=null},20000);c.p={0:+new Date};c.P=function(j){c.p[j]=new Date-c.p[0]};function d(){c.P(b);e[g](b)}e.addEventListener?e.addEventListener(b,d,false):e.attachEvent("on"+b,d); (function(){function l(j){j="head";return["<",j,"></",j,"><",z,' onl'+'oad="var d=',B,";d.getElementsByTagName('head')[0].",y,"(d.",A,"('script')).",u,"='",a,"//",c.l,"'",'"',"></",z,">"].join("")}var z="body",s=h[z];if(!s){return setTimeout(arguments.callee,100)}c.P(1);var y="appendChild",A="createElement",u="src",r=h[A]("div"),G=r[y](h[A](g)),D=h[A]("iframe"),B="document",C="domain",q;r.style.display="none";s.insertBefore(r,s.firstChild).id=g;D.frameBorder="0";D.id=g+"-loader";if(/MSIE[ ]+6/.test(navigator.userAgent)){D.src="javascript:false"} D.allowTransparency="true";G[y](D);try{D.contentWindow[B].open()}catch(F){i[C]=h[C];q="javascript:var d="+B+".open();d.domain='"+h.domain+"';";D[u]=q+"void(0);"}try{var H=D.contentWindow[B];H.write(l());H.close()}catch(E){D[u]=q+'d.write("'+l().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}c.P(2)})()})()})({loader:(function(a){return "static.olark.com/jsclient/loader0.js?ts="+(a?a[1]:(+new Date))})(document.cookie.match(/olarkld=([0-9]+)/)),name:"olark",methods:["configure","extend","declare","identify"]});
/* custom configuration goes here (www.olark.com/documentation) */
olark.identify('9303-653-10-2815');/*]]>{/literal}*/</script>
<!-- end olark code -->

4. Copy the snippet code.

5. Login to your VP-ASP control panel and go to : Website » Layout Manager

6. Locate in the very bottom of Footer section in the Layout Manager page as like in the screenshot below and click Add Box.



7. An Empty box will be displayed, click the Edit link.


8. Then in the Main Selection dropdowns, please select "Footer Free Text Container ".



9. And then fill in the fields:
Enable : Yes
Seq No. : 10
Display Text : LangOlarkChatBox
Show in SSL? : No


Click Save Changes once all filled.

10. Go to : Advanced Settings » International » Language » Edit Language » Add a Record


11. Enter value for the fields below :
lang : English (depend on your installed language, default is usually English)
keyword : LangOlarkChatBox
caption : Enter your Olark snippet code here. See the step 3 above to get the Olark snippet code.


Click Add a Record once all filled.

12. Click Back to Languages.

13. Click Reset Language.

14. In the Language dropdowns, select English and click Continue. (If English is your default language).

15. Next step is to tell your instant messaging program to connect to Olark so that you are able to chat with visitors on your site.
You can download and use Pidgin messenger for this :
http://www.olark.com/dashboard_tutorials/pidgin

After you have installed Pidgin messenger, then simply follow the tutorials mentioned in this page :
http://www.olark.com/tutorials/pidgin

Or

You can use GoogleTalk to connect to Olark.
To use GoogleTalk to connect to Olark, you can follow the tutorials below :
http://www.olark.com/tutorials/gtalk

16. You're done! Go to your VP-ASP front store and refresh to see changes. This will show the Olark chat box in all of your VP-ASP pages.


Times Viewed:
5194
Added By:
Wilson Keneshiro
Date Created:
5/18/2011
Last Updated:
6/2/2011