JavaScript API

<!doctype html> <html lang="en-US"> <head> <link rel="icon" type="image/png" href="https://www.olark.com/favicon-16.png" sizes="16x16"> <link rel="icon" type="image/png" href="https://www.olark.com/favicon-32.png" sizes="32x32"> <link rel="icon" type="image/png" href="https://www.olark.com/favicon-96.png" sizes="96x96"> <link rel="apple-touch-icon" href="https://www.olark.com/favicon-120.png"> <link rel="apple-touch-icon" href="https://www.olark.com/favicon-152.png" sizes="152x152"> <link rel="apple-touch-icon" href="https://www.olark.com/favicon-167.png" sizes="167x167"> <link rel="apple-touch-icon" href="https://www.olark.com/favicon-180.png" sizes="180x180"> <meta name="facebook-domain-verification" content="gwxh39wyi3zqbm06mw1n9nwjqkh5oj" /> <link rel="canonical" href="https://www.olark.com/api/"> <meta name="pageName" content="API Documentation" > <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:title" content="JavaScript API" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://www.olark.com/api/" /> <meta property="og:image" content="https://www.olark.com/img/global/social/olark-social-share-landscape.jpg" /> <meta property="og:description" content="The Olark Live Chat JavaScript API documentation demonstrates how users can customize the chat widget on their website." /> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@olark"> <meta name="twitter:title" content="JavaScript API | Olark"> <meta name="twitter:description" content="The Olark Live Chat JavaScript API documentation demonstrates how users can customize the chat widget on their website."> <meta name="twitter:image" content="https://www.olark.com/img/global/social/olark-social-share-landscape.jpg" /> <meta name="slack-app-id" content="A5BKB84CU"> <title>JavaScript API | Olark</title> <meta name="og:title" content="JavaScript API | Olark"> <meta name="twitter:title" content="JavaScript API | Olark"> <meta name="description" content="The Olark Live Chat JavaScript API documentation demonstrates how users can customize the chat widget on their website."> <meta property="og:description" content="The Olark Live Chat JavaScript API documentation demonstrates how users can customize the chat widget on their website." /> <meta name="twitter:description" content="The Olark Live Chat JavaScript API documentation demonstrates how users can customize the chat widget on their website."> <link rel="stylesheet" href="https://www.olark.com/css/main.css?v=2024-10-24-1612"> <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"> <script type="text/javascript"> !function(){var analytics=window.analytics=window.analytics||[]; if(!analytics.initialize)if(analytics.invoked)window.console&& console.error&&console.error("Segment snippet included twice."); else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick", "trackLink","trackForm","pageview","identify","reset","group","track", "ready","alias","debug","page","once","off","on"];analytics.factory= function(t){return function(){var e=Array.prototype.slice.call(arguments); e.unshift(t);analytics.push(e);return analytics}};for(var t=0; t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]= analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script"); e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol? "https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js"; var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)}; analytics.SNIPPET_VERSION="4.0.0";}}(); </script> <script type="text/javascript"> var _vwo_code=(function(){ var account_id=150968, settings_tolerance=2000, library_tolerance=2500, use_existing_jquery=false, f=false,d=document;return{use_existing_jquery:function(){ return use_existing_jquery;},library_tolerance:function(){ return library_tolerance;},finish:function(){if(!f){f=true; var a=d.getElementById('_vis_opt_path_hides'); if(a)a.parentNode.removeChild(a);}},finished:function(){ return f;},load:function(a){var b=d.createElement('script'); b.src=a;b.type='text/javascript';b.innerText;b.onerror=function(){ _vwo_code.finish();};d.getElementsByTagName('head')[0].appendChild(b); },init:function(){settings_timer=setTimeout('_vwo_code.finish()', settings_tolerance);this.load('//dev.visualwebsiteoptimizer.com/j.php?a='+ account_id+'&u='+encodeURIComponent(d.URL)+'&r='+Math.random());var a= d.createElement('style'),b='body{opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important;}', h=d.getElementsByTagName('head')[0];a.setAttribute('id','_vis_opt_path_hides'); a.setAttribute('type','text/css');if(a.styleSheet)a.styleSheet.cssText=b; else a.appendChild(d.createTextNode(b));h.appendChild(a);return settings_timer;}}; }());_vwo_settings_timer=_vwo_code.init(); </script> <script src="https://script.tapfiliate.com/tapfiliate.js" type="text/javascript" async></script> <script type="text/javascript"> (function(t,a,p){t.TapfiliateObject=a;t[a]=t[a]||function(){ (t[a].q=t[a].q||[]).push(arguments)}})(window,'tap'); tap('create', '11931-51b80c', { integration: "javascript" }); tap('detect'); </script> <script async type="text/javascript" src="https://www.olark.com/js/app.js?v=2024-10-24-1612"></script> <script> function grecaptchaOnLoad() { grecaptcha.execute('6LeHwQcaAAAAAAYUYqGJrbqWgbCdUip9zOjEuEUy', {action: 'website'}).then(function() { let logo = document.querySelector(".grecaptcha-logo"); let response = document.querySelector(".g-recaptcha-response"); if(logo && response) { logo.setAttribute("id", "grecaptcha-logo"); response.setAttribute("aria-labelledby", "grecaptcha-logo"); } }); }; </script> <script src="https://www.google.com/recaptcha/api.js?onload=grecaptchaOnLoad&render=6LeHwQcaAAAAAAYUYqGJrbqWgbCdUip9zOjEuEUy" async defer></script> </head> <body > <script> window.olarkSiteAnnouncements = {}; </script> <div id="js-announcement-banner" class="announcement-banner hidden"> <div class="announcement-banner-inner"> <a href="#" id="js-announcement-banner-link" class="announcement-link" target="_blank" rel="noopener"> <span class="announcement-prefix">New</span> - <span id="js-announcement-banner-content"></span> <img id="js-announcement-banner-arrow" class="announcement-arrow hidden" src="https://www.olark.com/img/global/text-link-arrow-blue600.svg" alt="Learn more" /> </a> </div> </div> <div class="outer-container"> <nav class="header-bar-nav old hidden"> <a href="#post_nav">Jump to content</a> <a href="javascript:olark('api.box.expand)">Jump to live chat support</a> </nav> <div class="header-bar"> <nav class="header-bar-nav old"> <a href="https://www.olark.com/"> <div class="header-bar-logo"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 211.3 140" aria-label="Olark Logo" role="img"> <title>Olark Logo</title> <path d="M36 23.8c-2.3 0.2-2.9 1.9-2.9 3.2 0 2.8 2.6 6.2 8.7 5.8l1.4-0.1C42 27.3 39.6 23.5 36 23.8z" fill="#ffffff" /> <path d="M70.9 12.7c-1.3 0.1-1.8 2.9-1.8 4.8v33.4c2.5-5.1 4.9-20.8 4.9-27.2C74 16 72.8 12.6 70.9 12.7z" fill="#ffffff" /> <path d="M208.9 86.3c-0.8 0.1-1 1.2-4.3 1.4l-7.2 0.5c0 0 0 0 0 0l-131.5 10c-1.4 0.1-2.8 0.8-3.8 1.8l-15 16 0-14.9c0-0.9-0.8-1.6-1.7-1.5l-18 1.4 -21.2 1.4c-2.7 0.2-4.9 2.7-4.9 6.4 0 1.6 0.5 3.5 1.2 3.5 0.8-0.1 1-1.2 4.3-1.4l30.3-2.3c1 0 1.7 0.7 1.7 1.6l0 20.1c0 2.3 2.8 3.2 4.5 1.5l22.3-23.7c1-1.1 2.4-1.8 3.9-1.9l90.3-6.9 45.4-3.2c2.7-0.2 4.9-2.7 4.9-6.4C210.1 88.2 209.6 86.2 208.9 86.3z" /> <path d="M203.8 57.9c-1.1 5.2-5 12.9-10.4 13.3 -4.6 0.4-7.1-4.1-8.3-9.1 4.7-3.8 11.2-11 11.2-20 0-6.6-3.2-12.4-10.4-11.8 -5.3 0.4-9.9 5.4-13.7 10.8V4.7c0-2.8-2.5-5-6.3-4.6 -1.6 0.1-3.7 0.8-3.7 1.6s1.2 1 1.2 4.4v53.4c-0.2 0.5-0.4 1-0.5 1.6 -1.1 5.2-3 12.9-8.4 13.3 -3.2 0.3-4.7-2.7-4.7-5.9 0-11.7 5.7-23.2 5.7-24.6 0.5-2.7-2.5-5.5-5.6-6.1 0 0-7.3-1.5-12.7-2.3 -1.3-4.7-4.6-5.8-7.4-5.6 -3 0.2-5.9 2.6-5.9 5.8 0 3.4 2.1 5.7 5 7.1 -0.1 6-0.6 15.7-1.9 20.5 0 0.1 0 0.2 0 0.3 0 0.1 0 0.2-0.1 0.3 -1.1 5.2-3.2 12.9-7.8 13.3 -2.8 0.2-4-2.5-4-5.1V52.7c0-2.8-2.5-5-6.3-4.6 -1.6 0.1-3 1.1-3 2.2 0 0.8 0.5 1.5 0.5 3.7v18c-1.3 3.4-3.4 6.4-6.6 6.6 -4.1 0.3-6.7-3-6.7-9.1 0-16.9 10.4-25.3 19.3-26 1.2-0.1 2.3 0 3.4 0 1.2-0.1 1.5-0.8 1.5-2.8 0-3-2.2-4.7-5.4-4.5C97.6 37.4 84 50.4 84 69.9c0 0.8 0 1.5 0.1 2.3 -1.9 4.1-5 8-8.8 8.3 -4.3 0.3-6.2-2.9-6.2-7.6v-6.8c1.5-1.5 12.2-26 12.2-43.2 0-6.6-0.1-18.8-10.4-18C65 5.4 60.2 12 60.2 20.8v1c-1.9 2-5.8 5.8-9 7.3 -2.6-8-7.5-14.4-16-13.7 -6.3 0.5-10.6 5.9-10.6 12 0 9 7.8 14.1 17.6 13.4l2.2-0.2c0.2 2.4 0.4 4.9 0.4 7.1 -0.1 21.9-7.4 34.9-17.1 35.6 -8.3 0.7-17-8-17-29.2 0-30 14.4-38.5 18.5-41.1 0.2 0.1 0.4 0.1 0.6 0.1 1.1-0.1 1.5-1.3 1.5-2.8 0-2.6-1.5-6-4.1-5.8 -0.5 0-0.9 0.2-1.3 0.3C24.9 5.2 1.3 16.2 1.3 56c0 20.9 8.9 37.4 26 36.1C40.9 91 53.8 76.6 53.8 46.9c0-2.8-0.2-6-0.7-9.2 2-1 4.7-2.9 7.1-5v41.3c0 9.2 4.8 15.1 13.8 14.4 5.3-0.4 9.4-3.7 12.5-7.7 2.3 3.9 6.1 6.2 11.4 5.8 4.4-0.4 7.7-2.7 10.1-5.6 1.8 2.7 4.9 4.4 9 4.1 9.7-0.8 14.4-10.9 16.5-18.7 0-0.1 0.1-0.2 0.1-0.3 2.1-7 2.8-17.2 2.9-21.8l10.6 2c-3.7 10.4-6.3 16.1-6.3 23.6 0 10.3 6.6 12.8 12.1 12.4 4.5-0.4 7.9-2.7 10.4-5.9 0 4.3 3.3 4.8 5.6 4.6 3.4-0.3 3.3-3.1 3.3-5.3V55.5c3.6-12.7 8.9-16.9 11.7-17.1 2.2-0.2 3.7 1.7 3.7 4.6 0 10.8-10.9 15.4-10.9 19 0 7.7 6.1 17.8 15.3 17 10.6-0.8 16.4-13.1 18.5-19.6C211.6 55.6 205.2 50.6 203.8 57.9zM69.1 17.5c0-1.9 0.5-4.7 1.8-4.8 1.9-0.1 3.2 3.3 3.2 11 0 6.4-2.5 22.1-4.9 27.2V17.5zM41.7 32.7c-6.1 0.5-8.7-2.9-8.7-5.8 0-1.3 0.6-3 2.9-3.2 3.6-0.3 6 3.5 7.1 8.8L41.7 32.7z" /> </svg> </div> </a> <a href="https://www.olark.com/features"> <div class="header-bar-link"> Features </div> </a> <a href="https://www.olark.com/integrations"> <div class="header-bar-link"> Integrations </div> </a> <a href="https://www.olark.com/pricing"> <div class="header-bar-link"> Pricing </div> </a> <div class="header-bar-link" id="dropdown"> Learn <ul class="dropdown-list dropdown-animate"> <li class="dropdown-item"> <a href="https://www.olark.com/ecommerce" class="js-cta" data-cta-name="Dropdown Sales">Increase Sales</a> </li> <li class="dropdown-item"> <a href="https://www.olark.com/live-chat-lead-generation" class="js-cta" data-cta-name="Dropdown Leads">Generate Leads</a> </li> <li class="dropdown-item"> <a href="https://www.olark.com/customer-service" class="js-cta" data-cta-name="Dropdown Customer Service">Provide Great Service</a> </li> <li class="dropdown-item"> <a href="https://www.olark.com/live-chat-for-recruiting-students-to-your-university" class="js-cta" data-cta-name="Dropdown Recruit Students">Recruit Students</a> </li> <li class="dropdown-item"> <a href="https://www.olark.com/tips-for-remote-managers-and-going-remote-guide" class="js-cta" data-cta-name="Dropdown Remote Team">Manage a Remote Team</a> </li> </ul> </div> <nav class="cta-nav"> <a href="https://www.olark.com/login" class="header-bar-link"> Log in </a> <a href="https://www.olark.com/signup/create_new_account/trial" class="header-bar-link-trial"> Free trial </a> </nav> <div class="alert-banner hidden" id="cookie-consent"> <p class="alert-banner-text" id="cookie-consent-message"> Olark uses cookies to give you the best possible experience on our website. By clicking "Continue", you agree to our use of cookies. Refer to our <a href="https://www.olark.com/privacy-policy" class="consent-pp-link" target="_blank">privacy policy</a> for details. <a href="#" class="alert-banner-action" id="cookie-consent-accept">Continue</a> </p> </div> </nav> </div> <nav class="mobile-nav"> <button class="mobile-menu-open mobile-menu-open-button"> <svg width="32" height="22" viewBox="0 0 32 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="svg-mobile-menu" role="img"> <title id="svg-mobile-menu">Mobile Menu</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#2B2929"><g transform="translate(-1140.000000, -38.000000) translate(1140.000000, 38.000000)"><rect x="0" y="20" width="32" height="2"/><rect x="0" y="10" width="32" height="2"/><rect x="0" y="0" width="32" height="2"/></g></g></g></svg> </button> <div class="mobile-menu mobile-menu-display"> <div class="mobile-nav-primary"> <button class="mobile-menu-close mobile-menu-close-button"> <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="svg-close-mobile-menu" role="img"> <title id="svg-close-mobile-menu">Close Mobile Menu</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#FFF"><path d="M1019.6066,49.0208153 L1009,59.627417 L1010.41421,61.0416306 L1021.02082,50.4350288 L1031.62742,61.0416306 L1033.04163,59.627417 L1022.43503,49.0208153 L1033.04163,38.4142136 L1031.62742,37 L1021.02082,47.6066017 L1010.41421,37 L1009,38.4142136 L1019.6066,49.0208153 Z" transform="translate(-1009.000000, -37.000000)"/></g></g></svg> </button> <ul> <li> <a href="https://www.olark.com/features" class="nav-link-mobile"> Features </a> </li> <li> <a href="https://www.olark.com/integrations" class="nav-link-mobile"> Integrations </a> </li> <li> <a href="https://www.olark.com/pricing" class="nav-link-mobile"> Pricing </a> </li> <li> <a href="https://www.olark.com/login" class="nav-link-mobile"> Log in </a> </li> </ul> </div> <div class="mobile-nav-secondary"> <ul class="mobile-nav-secondary-list"> <li> <a href="https://www.olark.com/help" class="mobile-nav-secondary-link"> Help Center </a> </li> <li> <a href="https://www.olark.com/about" class="mobile-nav-secondary-link"> Our Team </a> </li> <li> <a href="https://www.olark.com/values" class="mobile-nav-secondary-link"> Values </a> </li> <li> <a href="https://www.olark.com/jobs" class="mobile-nav-secondary-link"> Jobs </a> </li> </ul> <ul class="mobile-nav-secondary-list"> <li> <a href="https://www.olark.com/contact" class="mobile-nav-secondary-link"> Contact </a> </li> <li> <a href="https://blog.olark.com" class="mobile-nav-secondary-link"> Blog </a> </li> <li> <a href="https://www.olark.com/faq" class="mobile-nav-secondary-link"> FAQ </a> </li> <li> <a href="https://www.olark.com/sales" class="mobile-nav-secondary-link"> Talk to sales </a> </li> </ul> </div> </div> </nav><span id="post_nav"></span> <main> <div id="api_index"> <div class="header"> <div class="pattern"> <div class="container"> <h1 class="jumbotron">Javascript API</h1> <div class="sub-heading">Our documentation to help you customize Olark to fit your website</div> </div> </div> </div> <div class="api-wrapper"> <div id="api-menu-left" class="api-menu-left"> <div class="api-menu-title"> <h2>API Functions</h2> </div> <div class="api-nav"> <form action="#" class="toggle-api-display"> <label for="api-options-title" class="api-options"> <input id="api-options-title" type="radio" class="api-toggle" name="api-toggle" checked="checked"> Show titles </label> <label for="api-options-calls" class="api-options"> <input id="api-options-calls" type="radio" class="api-toggle" name="api-toggle"> Show API calls </label> </form> <div class="api-primary" data-apiCategory="ag">Attention Grabber</div> <a class="api-secondary api-menu-link" href="#calloutbubble_slide" data-api-call="CalloutBubble_slide" data-apiCategory="ag"> <span class="api-name">Attention Grabber animation</span> <span class="api-path toggle-hide">CalloutBubble_slide</span> </a> <a class="api-secondary api-menu-link" href="#calloutbubble_bubble_height" data-api-call="CalloutBubble_bubble_height" data-apiCategory="ag"> <span class="api-name">Attention Grabber image height</span> <span class="api-path toggle-hide">CalloutBubble_bubble_height</span> </a> <a class="api-secondary api-menu-link" href="#calloutbubble_bubble_width" data-api-call="CalloutBubble_bubble_width" data-apiCategory="ag"> <span class="api-name">Attention Grabber image width</span> <span class="api-path toggle-hide">CalloutBubble_bubble_width</span> </a> <a class="api-secondary api-menu-link" href="#features_attention_grabber" data-api-call="features_attention_grabber" data-apiCategory="ag"> <span class="api-name">Enable Attention Grabber</span> <span class="api-path toggle-hide">features_attention_grabber</span> </a> <a class="api-secondary api-menu-link" href="#calloutbubble_offline_bubble_image_url" data-api-call="CalloutBubble_offline_bubble_image_url" data-apiCategory="ag"> <span class="api-name">Offline Attention Grabber image</span> <span class="api-path toggle-hide">CalloutBubble_offline_bubble_image_url</span> </a> <a class="api-secondary api-menu-link" href="#calloutbubble_bubble_image_url" data-api-call="CalloutBubble_bubble_image_url" data-apiCategory="ag"> <span class="api-name">Online Attention Grabber image</span> <span class="api-path toggle-hide">CalloutBubble_bubble_image_url</span> </a> <div class="api-primary" data-apiCategory="appearance">Chat box appearance</div> <a class="api-secondary api-menu-link" href="#system_hb_position" data-api-call="system_hb_position" data-apiCategory="appearance"> <span class="api-name">Change Chatbox Position</span> <span class="api-path toggle-hide">system_hb_position</span> </a> <a class="api-secondary api-menu-link" href="#system_hb_chatbox_size" data-api-call="system_hb_chatbox_size" data-apiCategory="appearance"> <span class="api-name">Change Chatbox Size</span> <span class="api-path toggle-hide">system_hb_chatbox_size</span> </a> <a class="api-secondary api-menu-link" href="#system_hb_custom_style_font" data-api-call="system_hb_custom_style_font" data-apiCategory="appearance"> <span class="api-name">Change Font Family</span> <span class="api-path toggle-hide">system_hb_custom_style_font</span> </a> <a class="api-secondary api-menu-link" href="#system_right_to_left" data-api-call="system_right_to_left" data-apiCategory="appearance"> <span class="api-name">Change Text Position</span> <span class="api-path toggle-hide">system_right_to_left</span> </a> <a class="api-secondary api-menu-link" href="#system_hb_custom_style_corners" data-api-call="system_hb_custom_style_corners" data-apiCategory="appearance"> <span class="api-name">Change the Border Radius</span> <span class="api-path toggle-hide">system_hb_custom_style_corners</span> </a> <a class="api-secondary api-menu-link" href="#system_hb_custom_style_secondary_color" data-api-call="system_hb_custom_style_secondary_color" data-apiCategory="appearance"> <span class="api-name">Change the Color of Visitor Messages</span> <span class="api-path toggle-hide">system_hb_custom_style_secondary_color</span> </a> <a class="api-secondary api-menu-link" href="#system_hb_disable_mobile" data-api-call="system_hb_disable_mobile" data-apiCategory="appearance"> <span class="api-name">Disable the Mobile Chatbox</span> <span class="api-path toggle-hide">system_hb_disable_mobile</span> </a> <a class="api-secondary api-menu-link" href="#system_hb_detached" data-api-call="system_hb_detached" data-apiCategory="appearance"> <span class="api-name">Floating Chatbox</span> <span class="api-path toggle-hide">system_hb_detached</span> </a> <a class="api-secondary api-menu-link" href="#system_hb_dark_theme" data-api-call="system_hb_dark_theme" data-apiCategory="appearance"> <span class="api-name">Set Dark Theme</span> <span class="api-path toggle-hide">system_hb_dark_theme</span> </a> <a class="api-secondary api-menu-link" href="#system_hb_primary_color" data-api-call="system_hb_primary_color" data-apiCategory="appearance"> <span class="api-name">Set Theme Color</span> <span class="api-path toggle-hide">system_hb_primary_color</span> </a> <a class="api-secondary api-menu-link" href="#system_hb_show_as_tab" data-api-call="system_hb_show_as_tab" data-apiCategory="appearance"> <span class="api-name">Show as Tab</span> <span class="api-path toggle-hide">system_hb_show_as_tab</span> </a> <a class="api-secondary api-menu-link" href="#system_hb_show_button_text" data-api-call="system_hb_show_button_text" data-apiCategory="appearance"> <span class="api-name">Show Button Text</span> <span class="api-path toggle-hide">system_hb_show_button_text</span> </a> <div class="api-primary" data-apiCategory="box">Chat box behavior</div> <a class="api-secondary api-menu-link" href="#api_box_setlocale" data-api-call="api_box_setLocale" data-apiCategory="box"> <span class="api-name">Dynamically change the chatbox language</span> <span class="api-path toggle-hide">api_box_setLocale</span> </a> <a class="api-secondary api-menu-link" href="#api_box_expand" data-api-call="api_box_expand" data-apiCategory="box"> <span class="api-name">Expand the chatbox</span> <span class="api-path toggle-hide">api_box_expand</span> </a> <a class="api-secondary api-menu-link" href="#api_box_hide" data-api-call="api_box_hide" data-apiCategory="box"> <span class="api-name">Hide the chatbox</span> <span class="api-path toggle-hide">api_box_hide</span> </a> <a class="api-secondary api-menu-link" href="#api_box_shrink" data-api-call="api_box_shrink" data-apiCategory="box"> <span class="api-name">Minimize the chatbox</span> <span class="api-path toggle-hide">api_box_shrink</span> </a> <a class="api-secondary api-menu-link" href="#api_box_onexpand" data-api-call="api_box_onExpand" data-apiCategory="box"> <span class="api-name">On chatbox expand</span> <span class="api-path toggle-hide">api_box_onExpand</span> </a> <a class="api-secondary api-menu-link" href="#api_box_onhide" data-api-call="api_box_onHide" data-apiCategory="box"> <span class="api-name">On chatbox hide</span> <span class="api-path toggle-hide">api_box_onHide</span> </a> <a class="api-secondary api-menu-link" href="#api_box_onshrink" data-api-call="api_box_onShrink" data-apiCategory="box"> <span class="api-name">On chatbox minimize</span> <span class="api-path toggle-hide">api_box_onShrink</span> </a> <a class="api-secondary api-menu-link" href="#api_box_onshow" data-api-call="api_box_onShow" data-apiCategory="box"> <span class="api-name">On chatbox show</span> <span class="api-path toggle-hide">api_box_onShow</span> </a> <a class="api-secondary api-menu-link" href="#api_box_show" data-api-call="api_box_show" data-apiCategory="box"> <span class="api-name">Show the chatbox</span> <span class="api-path toggle-hide">api_box_show</span> </a> <div class="api-primary" data-apiCategory="chat">Chat conversation</div> <a class="api-secondary api-menu-link" href="#api_chat_setoperatorgroup" data-api-call="api_chat_setOperatorGroup" data-apiCategory="chat"> <span class="api-name">Change operator group</span> <span class="api-path toggle-hide">api_chat_setOperatorGroup</span> </a> <a class="api-secondary api-menu-link" href="#api_chat_onofflinemessagetooperator" data-api-call="api_chat_onOfflineMessageToOperator" data-apiCategory="chat"> <span class="api-name">Offline message sent</span> <span class="api-path toggle-hide">api_chat_onOfflineMessageToOperator</span> </a> <a class="api-secondary api-menu-link" href="#api_chat_onready" data-api-call="api_chat_onready" data-apiCategory="chat"> <span class="api-name">On chatbox load</span> <span class="api-path toggle-hide">api_chat_onready</span> </a> <a class="api-secondary api-menu-link" href="#api_chat_onbeginconversation" data-api-call="api_chat_onBeginConversation" data-apiCategory="chat"> <span class="api-name">On conversation start</span> <span class="api-path toggle-hide">api_chat_onBeginConversation</span> </a> <a class="api-secondary api-menu-link" href="#api_chat_onmessagetooperator" data-api-call="api_chat_onMessageToOperator" data-apiCategory="chat"> <span class="api-name">On message to operator</span> <span class="api-path toggle-hide">api_chat_onMessageToOperator</span> </a> <a class="api-secondary api-menu-link" href="#api_chat_onmessagetovisitor" data-api-call="api_chat_onMessageToVisitor" data-apiCategory="chat"> <span class="api-name">On message to visitor</span> <span class="api-path toggle-hide">api_chat_onMessageToVisitor</span> </a> <a class="api-secondary api-menu-link" href="#api_chat_oncommandfromoperator" data-api-call="api_chat_onCommandFromOperator" data-apiCategory="chat"> <span class="api-name">On operator command</span> <span class="api-path toggle-hide">api_chat_onCommandFromOperator</span> </a> <a class="api-secondary api-menu-link" href="#api_chat_onoperatorsavailable" data-api-call="api_chat_onOperatorsAvailable" data-apiCategory="chat"> <span class="api-name">On operators available</span> <span class="api-path toggle-hide">api_chat_onOperatorsAvailable</span> </a> <a class="api-secondary api-menu-link" href="#api_chat_onoperatorsaway" data-api-call="api_chat_onOperatorsAway" data-apiCategory="chat"> <span class="api-name">On operators unavailable</span> <span class="api-path toggle-hide">api_chat_onOperatorsAway</span> </a> <a class="api-secondary api-menu-link" href="#api_chat_sendmessagetovisitor" data-api-call="api_chat_sendMessageToVisitor" data-apiCategory="chat"> <span class="api-name">Send message to visitor</span> <span class="api-path toggle-hide">api_chat_sendMessageToVisitor</span> </a> <a class="api-secondary api-menu-link" href="#api_chat_sendnotificationtooperator" data-api-call="api_chat_sendNotificationToOperator" data-apiCategory="chat"> <span class="api-name">Send operator notification</span> <span class="api-path toggle-hide">api_chat_sendNotificationToOperator</span> </a> <a class="api-secondary api-menu-link" href="#api_chat_sendnotificationtovisitor" data-api-call="api_chat_sendNotificationToVisitor" data-apiCategory="chat"> <span class="api-name">Send visitor notification</span> <span class="api-path toggle-hide">api_chat_sendNotificationToVisitor</span> </a> <div class="api-primary" data-apiCategory="configure">Configure the chat box</div> <a class="api-secondary api-menu-link" href="#system_allowed_domains" data-api-call="system_allowed_domains" data-apiCategory="configure"> <span class="api-name">Allowed domains</span> <span class="api-path toggle-hide">system_allowed_domains</span> </a> <a class="api-secondary api-menu-link" href="#system_localization" data-api-call="system_localization" data-apiCategory="configure"> <span class="api-name">Configure the default language</span> <span class="api-path toggle-hide">system_localization</span> </a> <a class="api-secondary api-menu-link" href="#features_feedback" data-api-call="features_feedback" data-apiCategory="configure"> <span class="api-name">Enable Chat Ratings</span> <span class="api-path toggle-hide">features_feedback</span> </a> <a class="api-secondary api-menu-link" href="#features_prechat_survey" data-api-call="features_prechat_survey" data-apiCategory="configure"> <span class="api-name">Enable Pre-chat Survey</span> <span class="api-path toggle-hide">features_prechat_survey</span> </a> <a class="api-secondary api-menu-link" href="#box_start_expanded" data-api-call="box_start_expanded" data-apiCategory="configure"> <span class="api-name">Expand chatbox on load</span> <span class="api-path toggle-hide">box_start_expanded</span> </a> <a class="api-secondary api-menu-link" href="#system_hide_minimize_button" data-api-call="system_hide_minimize_button" data-apiCategory="configure"> <span class="api-name">Hide the minimize button</span> <span class="api-path toggle-hide">system_hide_minimize_button</span> </a> <a class="api-secondary api-menu-link" href="#box_inline" data-api-call="box_inline" data-apiCategory="configure"> <span class="api-name">Load chatbox in DOM element</span> <span class="api-path toggle-hide">box_inline</span> </a> <a class="api-secondary api-menu-link" href="#system_give_location_to_operator" data-api-call="system_give_location_to_operator" data-apiCategory="configure"> <span class="api-name">Page change notifications</span> <span class="api-path toggle-hide">system_give_location_to_operator</span> </a> <a class="api-secondary api-menu-link" href="#system_disable_default_visitor_information" data-api-call="system_disable_default_visitor_information" data-apiCategory="configure"> <span class="api-name">Pre-chat visitor notifications</span> <span class="api-path toggle-hide">system_disable_default_visitor_information</span> </a> <a class="api-secondary api-menu-link" href="#system_chat_does_not_follow_external_links" data-api-call="system_chat_does_not_follow_external_links" data-apiCategory="configure"> <span class="api-name">Prevent non-local URL wrapping</span> <span class="api-path toggle-hide">system_chat_does_not_follow_external_links</span> </a> <a class="api-secondary api-menu-link" href="#system_group" data-api-call="system_group" data-apiCategory="configure"> <span class="api-name">Set operator group</span> <span class="api-path toggle-hide">system_group</span> </a> <a class="api-secondary api-menu-link" href="#system_is_single_page_application" data-api-call="system_is_single_page_application" data-apiCategory="configure"> <span class="api-name">Single page applications</span> <span class="api-path toggle-hide">system_is_single_page_application</span> </a> <a class="api-secondary api-menu-link" href="#box_start_hidden" data-api-call="box_start_hidden" data-apiCategory="configure"> <span class="api-name">Start chatbox hidden</span> <span class="api-path toggle-hide">box_start_hidden</span> </a> <div class="api-primary" data-apiCategory="ga">Google Analytics</div> <a class="api-secondary api-menu-link" href="#features_google_analyics" data-api-call="features_google_analyics" data-apiCategory="ga"> <span class="api-name">Enable Google Analytics</span> <span class="api-path toggle-hide">features_google_analyics</span> </a> <a class="api-secondary api-menu-link" href="#system_google_analytics_id" data-api-call="system_google_analytics_id" data-apiCategory="ga"> <span class="api-name">Set Google Analytics ID</span> <span class="api-path toggle-hide">system_google_analytics_id</span> </a> <div class="api-primary" data-apiCategory="greeter">Greeter</div> <a class="api-secondary api-menu-link" href="#features_greeter" data-api-call="features_greeter" data-apiCategory="greeter"> <span class="api-name">Enable Greeter</span> <span class="api-path toggle-hide">features_greeter</span> </a> <a class="api-secondary api-menu-link" href="#welcomeassist_notify_op_of_new_visitor" data-api-call="WelcomeAssist_notify_op_of_new_visitor" data-apiCategory="greeter"> <span class="api-name">Notify operators of first-time visitors</span> <span class="api-path toggle-hide">WelcomeAssist_notify_op_of_new_visitor</span> </a> <a class="api-secondary api-menu-link" href="#welcomeassist_welcome_delay_in_seconds" data-api-call="WelcomeAssist_welcome_delay_in_seconds" data-apiCategory="greeter"> <span class="api-name">Set Greeter delay in seconds</span> <span class="api-path toggle-hide">WelcomeAssist_welcome_delay_in_seconds</span> </a> <a class="api-secondary api-menu-link" href="#welcomeassist_welcome_messages" data-api-call="WelcomeAssist_welcome_messages" data-apiCategory="greeter"> <span class="api-name">Set Greeter Welcome Messages</span> <span class="api-path toggle-hide">WelcomeAssist_welcome_messages</span> </a> <a class="api-secondary api-menu-link" href="#welcomeassist.welcome_new_visitors" data-api-call="WelcomeAssist.welcome_new_visitors" data-apiCategory="greeter"> <span class="api-name">Switch on the Greeter</span> <span class="api-path toggle-hide">WelcomeAssist.welcome_new_visitors</span> </a> <div class="api-primary" data-apiCategory="prechat">Pre-chat survey</div> <a class="api-secondary api-menu-link" href="#system_custom_prechat" data-api-call="system_custom_prechat" data-apiCategory="prechat"> <span class="api-name">Add a custom prechat survey</span> <span class="api-path toggle-hide">system_custom_prechat</span> </a> <a class="api-secondary api-menu-link" href="#system_require_email" data-api-call="system_require_email" data-apiCategory="prechat"> <span class="api-name">Require email</span> <span class="api-path toggle-hide">system_require_email</span> </a> <a class="api-secondary api-menu-link" href="#system_require_name" data-api-call="system_require_name" data-apiCategory="prechat"> <span class="api-name">Require name</span> <span class="api-path toggle-hide">system_require_name</span> </a> <a class="api-secondary api-menu-link" href="#system_require_phone" data-api-call="system_require_phone" data-apiCategory="prechat"> <span class="api-name">Require phone number</span> <span class="api-path toggle-hide">system_require_phone</span> </a> <div class="api-primary" data-apiCategory="rules">Targeted Chat</div> <a class="api-secondary api-menu-link" href="#api_rules_definerule" data-api-call="api_rules_defineRule" data-apiCategory="rules"> <span class="api-name">Define Targeted Chat rules</span> <span class="api-path toggle-hide">api_rules_defineRule</span> </a> <div class="api-primary" data-apiCategory="visitor">Visitor information</div> <a class="api-secondary api-menu-link" href="#api_visitor_getdetails" data-api-call="api_visitor_getDetails" data-apiCategory="visitor"> <span class="api-name">Get visitor details</span> <span class="api-path toggle-hide">api_visitor_getDetails</span> </a> <a class="api-secondary api-menu-link" href="#api_visitor_updatecustomfields" data-api-call="api_visitor_updateCustomFields" data-apiCategory="visitor"> <span class="api-name">Update CRM custom fields</span> <span class="api-path toggle-hide">api_visitor_updateCustomFields</span> </a> <a class="api-secondary api-menu-link" href="#api_visitor_updateemailaddress" data-api-call="api_visitor_updateEmailAddress" data-apiCategory="visitor"> <span class="api-name">Update visitor email</span> <span class="api-path toggle-hide">api_visitor_updateEmailAddress</span> </a> <a class="api-secondary api-menu-link" href="#api_visitor_updatefullname" data-api-call="api_visitor_updateFullName" data-apiCategory="visitor"> <span class="api-name">Update visitor name</span> <span class="api-path toggle-hide">api_visitor_updateFullName</span> </a> <a class="api-secondary api-menu-link" href="#api_chat_updatevisitornickname" data-api-call="api_chat_updateVisitorNickname" data-apiCategory="visitor"> <span class="api-name">Update visitor nickname</span> <span class="api-path toggle-hide">api_chat_updateVisitorNickname</span> </a> <a class="api-secondary api-menu-link" href="#api_visitor_updatephonenumber" data-api-call="api_visitor_updatePhoneNumber" data-apiCategory="visitor"> <span class="api-name">Update visitor phone</span> <span class="api-path toggle-hide">api_visitor_updatePhoneNumber</span> </a> <a class="api-secondary api-menu-link" href="#api_chat_updatevisitorstatus" data-api-call="api_chat_updateVisitorStatus" data-apiCategory="visitor"> <span class="api-name">Update visitor status</span> <span class="api-path toggle-hide">api_chat_updateVisitorStatus</span> </a> </div> </div> <div id="api-content" class="api-content"> <div class="content_background api-content-background"> <div class="api-intro markdown-content"> <p>We offer a powerful Javascript API that gives you flexibility and control over the behavior of the Olark chat box. You can decide, how, when and where to display the chat box on your site, as well as view and update visitor information.</p> <h3 id="debugging">Debugging</h3> <p>Use the <a href="https://www.olark.com/help/develop">!develop command</a> from the agent console to reveal helpful debug tools on the visitor’s chatbox. This is useful for debugging.</p> <h3 id="where-to-place-code">Where to place code</h3> <p>Configuration calls must be used when the chatbox first loads on a page. Put configuration calls before <code>olark.identify</code>:</p> <pre><code>/* custom configuration goes here (www.olark.com/documentation) */ // ⟶ Your configuration here olark.identify(‘1234-456-78-9810’); </code></pre> <p>We encourage developers to write their own JavaScript to extend the Olark functionality on their sites. We’re very excited when we see examples of the API used in creative ways. Let us know if you have an interesting implementation and we may publish it. Email <strong><a href="mailto:support@olark.com">support@olark.com</a></strong> with your creations!</p> <h3 id="a-idsupport_16asupport"><a id="Support_16"></a>Support</h3> <p>We’ll do our best to help with any questions you have. The API is intended to be self-serve for web developers, so we’re not able to write or debug your own code.</p> <h3 id="localization">Localization</h3> <p>You can translate the chat box into any language in your <a href="http://www.olark.com/customize/config?customize_form_pane=behavior">text settings</a> and editing the text.</p> <p>If you need to work with multiple languages, use our API to <a href="http://www.olark.com/help/languages">localize language strings</a>.</p> </div> <div class="api-content-calls"> <div class="api-call" id="calloutbubble_slide" data-apiCategory="ag"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/calloutbubble_slide/">Attention Grabber animation</a> </h2> <div class="article-content markdown-content"> <p>Enables the Attention Grabber slide-out animation.</p> <h3 id="animate-attention-grabber-on-checkout-page">Animate Attention Grabber on checkout page</h3> <p>If you’d like to reach out to people on your checkout page to ensure you make the sale, or offer a discount, you might wish to animate the <a href="https://www.olark.com/help/attention-grabbers">Attention Grabber</a> on that page only, to give it extra prominence.</p> <pre><code>// Check if the page URL contains 'checkout' if(window.location.href.indexOf("checkout") >= 0){ // Enable the Attention Grabber olark.configure('CalloutBubble.slide', true ); } </code></pre> <p>When the Attention Grabber slides out, it looks like this:</p> <p><img src="https://www.olark.com/img/api/callout_bubble_slide.gif" alt="Screenshot of API call bubble slide"></p> <p>Alternatively, should you enable the slide out action on the <a href="https://www.olark.com/extensions/attention_grabber">Attention Grabber settings</a> page, you can disable this animation per page by switching the <code>true</code> to <code>false</code> in the example above.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Enable the Attention Grabber animation</div> <pre><code>olark.configure('CalloutBubble.slide', true );</code></pre> </div> </div> <div class="api-call" id="calloutbubble_bubble_height" data-apiCategory="ag"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/calloutbubble_bubble_height/">Attention Grabber image height</a> </h2> <div class="article-content markdown-content"> <p>Set the Attention Grabber image height in pixels.</p> <p>For example:</p> <pre><code>olark.configure('CalloutBubble.bubble_height', 25 ); </code></pre> <p>Results in an attention grabber with a height of 25px.</p> <p>This only works if you either, have the Attention Grabber switched on in the <a href="https://www.olark.com/extensions/attention_grabber">Attention Grabber settings</a>, or are using the API call to <a href="#features.attention_grabber">Enable the Attention Grabber</a>.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Attention Grabber image height</div> <pre><code>olark.configure('CalloutBubble.bubble_height', integer );</code></pre> </div> </div> <div class="api-call" id="calloutbubble_bubble_width" data-apiCategory="ag"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/calloutbubble_bubble_width/">Attention Grabber image width</a> </h2> <div class="article-content markdown-content"> <p>Set the Attention Grabber image width in pixels.</p> <p>For example:</p> <pre><code>olark.configure('CalloutBubble.bubble_width', 100 ); </code></pre> <p>Results in an attention grabber with a width of 100px.</p> <p>This only works if you either, have the Attention Grabber switched on in the <a href="https://www.olark.com/extensions/attention_grabber">Attention Grabber settings</a>, or are using the API call to <a href="#features.attention_grabber">Enable the Attention Grabber</a>.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Attention Grabber image width</div> <pre><code>olark.configure('CalloutBubble.bubble_width', integer );</code></pre> </div> </div> <div class="api-call" id="features_attention_grabber" data-apiCategory="ag"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/features_attention_grabber/">Enable Attention Grabber</a> </h2> <div class="article-content markdown-content"> <p>You can enable the Attention Grabber on a page by page basis using this API call.</p> <h3 id="show-attention-grabber-on-checkout-page">Show Attention Grabber on checkout page</h3> <p>If you’d like to reach out to people on your checkout page to ensure you make the sale, or offer a discount, you might wish to show the Attention Grabber on that page only.</p> <pre><code>// Check if the page URL contains 'checkout' if(window.location.href.indexOf("checkout") >= 0){ // Enable the Attention Grabber olark.configure('features.attention_grabber', true ); } else { // Otherwise disable the Attention Grabber olark.configure('features.attention_grabber', false ); } </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Enable the Attention Grabber</div> <pre><code>olark.configure('features.attention_grabber', true );</code></pre> </div> </div> <div class="api-call" id="calloutbubble_offline_bubble_image_url" data-apiCategory="ag"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/calloutbubble_offline_bubble_image_url/">Offline Attention Grabber image</a> </h2> <div class="article-content markdown-content"> <p>Sets the Attention Grabber image while all your operators are set to away or offline.</p> <p>Like the other Attention Grabber calls, this works on a page by page basis. You can choose an offline Attention Grabber for use across the entire site in the <a href="https://www.olark.com/extensions/attention_grabber">Attention Grabber settings</a></p> <p>This call would be useful if you wanted a different image on a particular page, such as the contact page, or if you only wanted the Attention Grabber to appear on one page.</p> <p>You would add it under the existing Olark code on the page like this:</p> <pre><code>olark.configure('CalloutBubble.bubble_image_url_offline', 'path/to/file' ); </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Offline Attention Grabber image</div> <pre><code>olark.configure('CalloutBubble.bubble_image_url_offline', 'path/to/file' );</code></pre> </div> </div> <div class="api-call" id="calloutbubble_bubble_image_url" data-apiCategory="ag"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/calloutbubble_bubble_image_url/">Online Attention Grabber image</a> </h2> <div class="article-content markdown-content"> <p>Sets the Attention Grabber image while your operators are set to available.</p> <p>Like the other Attention Grabber calls, this works on a page by page basis. You can choose an online Attention Grabber for use across the entire site in the <a href="https://www.olark.com/extensions/attention_grabber">Attention Grabber settings</a></p> <p>This call would be useful if you wanted a different image on a particular page, such as the contact page, or if you only wanted the Attention Grabber to appear on one page.</p> <p>You would add it under the existing Olark code on the page like this:</p> <pre><code>olark.configure('CalloutBubble.bubble_image_url', 'path/to/file' ); </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Online Attention Grabber image</div> <pre><code>olark.configure('CalloutBubble.bubble_image_url', 'path/to/file' );</code></pre> </div> </div> <div class="api-call" id="system_hb_position" data-apiCategory="appearance"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_hb_position/">Change Chatbox Position</a> </h2> <div class="article-content markdown-content"> <p>Change the position of the chatbox. This can also be changed site wide from the <a href="https://www.olark.com/settings/theme">Theme Settings Page.</a></p> <p><img src="https://www.olark.com/img/api/chatbox-position.jpg" alt="postition"></p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Change chatbox position</div> <pre><code>olark.configure('system.hb_position', 'left');</code></pre> </div> </div> <div class="api-call" id="system_hb_chatbox_size" data-apiCategory="appearance"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_hb_chatbox_size/">Change Chatbox Size</a> </h2> <div class="article-content markdown-content"> <p>Change the size of the chatbox. The chatbox can be configured to appear in one of three different sizes: small, medium, or large. By default, it uses the medium size. Changing the size of the chatbox will also modify the size of the chat button.</p> <p>This configure call will only accept a string value indicating the size you would like to use. For example</p> <pre><code>olark.configure('system.hb_chatbox_size', 'sm'); // Small </code></pre> <p><img src="https://www.olark.com/img/api/chatbox-size-small.jpg" alt="themes chatbox size small"></p> <pre><code>olark.configure('system.hb_chatbox_size', 'md'); // Medium </code></pre> <p><img src="https://www.olark.com/img/api/chatbox-size-medium.jpg" alt="themes chatbox size medium"></p> <pre><code>olark.configure('system.hb_chatbox_size', 'lg'); // Large </code></pre> <p><img src="https://www.olark.com/img/api/chatbox-size-large.jpg" alt="themes chatbox size large"></p> <p>You can also configure the chatbox to take up the full height of the web page and slide in from the side as opposed to the bottom, like a “side drawer”. This configuration uses medium size defaults.</p> <pre><code>olark.configure('system.hb_chatbox_size', 'dr'); // Side drawer </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Change chatbox size</div> <pre><code>olark.configure('system.hb_chatbox_size', 'sm');</code></pre> </div> </div> <div class="api-call" id="system_hb_custom_style_font" data-apiCategory="appearance"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_hb_custom_style_font/">Change Font Family</a> </h2> <div class="article-content markdown-content"> <p>Choose what font you’d like the chatbox to have. Use this call with an Array of valid loaded fonts. Note that the fonts must be loaded on your site for the chatbox to be able to use them.</p> <pre><code>olark.configure('system.hb_custom_style', { general: { fonts: ['Bitter', 'serif'], corners: '', secondaryColor: '' } }); </code></pre> <p><img src="https://www.olark.com/img/api/api-font.png" alt="font"></p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Change the font of the chatbox</div> <pre><code>olark.configure('system.hb_custom_style', { general: { fonts: ['Bitter', 'serif'], corners: '', secondaryColor: '' } });</code></pre> </div> </div> <div class="api-call" id="system_right_to_left" data-apiCategory="appearance"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_right_to_left/">Change Text Position</a> </h2> <div class="article-content markdown-content"> <p>Change the text position for right to left language support. This can also be changed site wide from the <a href="https://www.olark.com/settings/theme">Theme Settings Page.</a></p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Change text position</div> <pre><code>olark.configure('system.right_to_left', true );</code></pre> </div> </div> <div class="api-call" id="system_hb_custom_style_corners" data-apiCategory="appearance"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_hb_custom_style_corners/">Change the Border Radius</a> </h2> <div class="article-content markdown-content"> <p>We have two options that allow you to have ‘soft’ or ‘hard’ corners for the chatbox. By default the chatbox will have soft corners.</p> <pre><code>olark.configure('system.hb_custom_style', { general: { fonts: [''], corners: 'hard', secondaryColor: '' } }); </code></pre> <p><img src="https://www.olark.com/img/api/api_corners.png" alt="corners"></p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Change the border radius for the corners of the chatbox</div> <pre><code>olark.configure('system.hb_custom_style', { general: { fonts: [''], corners: 'soft', secondaryColor: '' } });</code></pre> </div> </div> <div class="api-call" id="system_hb_custom_style_secondary_color" data-apiCategory="appearance"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_hb_custom_style_secondary_color/">Change the Color of Visitor Messages</a> </h2> <div class="article-content markdown-content"> <p>Change the color of your visitor messages. This configuration key will only accept hex values.</p> <pre><code>olark.configure('system.hb_custom_style', { general: { fonts: [''], corners: '', secondaryColor: '#ffe6ff' } }); </code></pre> <p><img src="https://www.olark.com/img/api/api-secondary-color.png" alt="secondary color"></p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Change the color of visitor messages</div> <pre><code>olark.configure('system.hb_custom_style', { general: { fonts: [''], corners: '', secondaryColor: '#ffe6ff' } });</code></pre> </div> </div> <div class="api-call" id="system_hb_disable_mobile" data-apiCategory="appearance"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_hb_disable_mobile/">Disable the Mobile Chatbox</a> </h2> <div class="article-content markdown-content"> <p>Disable the mobile chatbox. This can also be changed site wide from the <a href="https://www.olark.com/settings/theme">Theme Settings Page.</a></p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Disbale the Mobile Chatbox</div> <pre><code>olark.configure('system.hb_disable_mobile', true );</code></pre> </div> </div> <div class="api-call" id="system_hb_detached" data-apiCategory="appearance"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_hb_detached/">Floating Chatbox</a> </h2> <div class="article-content markdown-content"> <p>Normally, the chatbox is anchored to the bottom of the webpage. This detaches the chatbox from the bottom of the page, allowing it to float near the bottom instead.</p> <pre><code>olark.configure('system.hb_detached', true); </code></pre> <p><img src="https://www.olark.com/img/api/chatbox-detached.jpg" alt="themes"></p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Floating chatbox</div> <pre><code>olark.configure('system.hb_detached', true );</code></pre> </div> </div> <div class="api-call" id="system_hb_dark_theme" data-apiCategory="appearance"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_hb_dark_theme/">Set Dark Theme</a> </h2> <div class="article-content markdown-content"> <p>Choose a light or dark theme for the chatbox. This can also be changed site wide from the <a href="https://www.olark.com/settings/theme">Theme Settings Page.</a></p> <p><img src="https://www.olark.com/img/api/themes.jpg" alt="light and dark themes"></p> <p>You can enable a dark theme on a specific page. You can also do this for your entire site from the <a href="https://www.olark.com/settings/theme">Theme Settings Page</a>.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Set dark or light theme</div> <pre><code>olark.configure('system.hb_dark_theme', true );</code></pre> </div> </div> <div class="api-call" id="system_hb_primary_color" data-apiCategory="appearance"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_hb_primary_color/">Set Theme Color</a> </h2> <div class="article-content markdown-content"> <p>Set the primary color of the chatbox. This can also be changed site wide from the <a href="https://www.olark.com/settings/theme">Theme Settings Page.</a></p> <p>This configure call will only accept a hex string. For example</p> <pre><code>olark.configure('system.hb_primary_color', '#744da8'); </code></pre> <p><img src="https://www.olark.com/img/api/primary-color.jpg" alt="themes primary color"></p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Set theme color</div> <pre><code>olark.configure('system.hb_primary_color', string);</code></pre> </div> </div> <div class="api-call" id="system_hb_show_as_tab" data-apiCategory="appearance"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_hb_show_as_tab/">Show as Tab</a> </h2> <div class="article-content markdown-content"> <p>Show the chatbox as a tab. This can also be changed site wide from the <a href="https://www.olark.com/settings/theme">Theme Settings Page.</a></p> <p><img src="https://www.olark.com/img/api/show-as-tab.jpg" alt="tab"></p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Show as tab</div> <pre><code>olark.configure('system.hb_show_as_tab', true );</code></pre> </div> </div> <div class="api-call" id="system_hb_show_button_text" data-apiCategory="appearance"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_hb_show_button_text/">Show Button Text</a> </h2> <div class="article-content markdown-content"> <p>Show the button text on the chatbox icon. This can also be changed site wide from the <a href="https://www.olark.com/settings/theme">Theme Settings Page.</a></p> <p><img src="https://www.olark.com/img/api/disable-button-text.jpg" alt="button text"></p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Show button text</div> <pre><code>olark.configure('system.hb_show_button_text', true );</code></pre> </div> </div> <div class="api-call" id="api_box_setlocale" data-apiCategory="box"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_box_setlocale/">Dynamically change the chatbox language</a> </h2> <div class="article-content markdown-content"> <p>You can dynamically change the chatbox language after the page has loaded. By using this call the default localization strings provided by Olark will be used and will override any text you have set in the Text & Forms dashboard. This call, however, will not override any language configuration calls like <code>olark.configure('locale.welcome_title', 'Foo')</code>, the string provided by that call always takes highest priority.</p> <p>You can see a list of languages we support <a href="https://www.olark.com/api/#system.localization">here</a>.</p> <p><img src="https://www.olark.com/img/api/api_setLocale.gif" alt="Screenshot of API call set locale"></p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Dynamically change the chatbox language</div> <pre><code>olark('api.box.setLocale', 'en-US')</code></pre> </div> </div> <div class="api-call" id="api_box_expand" data-apiCategory="box"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_box_expand/">Expand the chatbox</a> </h2> <div class="article-content markdown-content"> <p>Expands the chatbox to its fully expanded height. It will also <strong>show</strong> the chatbox if not already visible, in the same way as <code>api.box.show</code>.</p> <p>Using this API call overrides any existing Targeted Chat rules that may hide the chatbox.</p> <p><img src="https://www.olark.com/img/api/api_expand.gif" alt="API Screenshot"></p> <h3 id="click-to-chat-link">Click to chat link</h3> <p>A classic use of the Javascript API is to make your own click-to-chat button. Clicking this button will show the Olark chatbox and expand it to its maximum height.</p> <p>To make your own click-to-chat button, add the <code>api.box.expand</code> call as the value for the <code>onclick</code> event:</p> <pre><code><a href="javascript:void(0);" onclick="olark('api.box.expand')"> Click here to chat! </a> </code></pre> <p>We have a more detailed <a href="https://www.olark.com/help/addimage">click-to-chat tutorial</a> in our help section, including an example of a CSS-only implementation.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Expand the chat box</div> <pre><code>olark('api.box.expand');</code></pre> </div> </div> <div class="api-call" id="api_box_hide" data-apiCategory="box"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_box_hide/">Hide the chatbox</a> </h2> <div class="article-content markdown-content"> <p>Hides the chatbox. This box will make the chatbox disappear on the page, but operators will still be able to see visitors in their visitor list.</p> <p><img src="https://www.olark.com/img/api/api_hide.gif" alt="Screenshot of API call hide"></p> <h3 id="hide-the-chatbox-if-not-logged-in">Hide the chatbox if not logged in</h3> <p>You might want Olark to be loaded in the background on a particular page, but not show immediately. Here’s how that might look in PHP:</p> <pre><code><?php // Check to see if the user is logged in if (!$user_logged_in) { // Hide the chat box olark('api.box.hide'); } ?> </code></pre> <p>You can also use our <a href="https://www.olark.com/help/targeted-chat">Targeted Chat</a> tool to hide the widget, without altering the code of your website.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Hide the chat box</div> <pre><code>olark('api.box.hide');</code></pre> </div> </div> <div class="api-call" id="api_box_shrink" data-apiCategory="box"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_box_shrink/">Minimize the chatbox</a> </h2> <div class="article-content markdown-content"> <p>Minimizes the chatbox. Opposite of <code>api.box.expand</code>.</p> <p><img src="https://www.olark.com/img/api/api_shrink.gif" alt="Screenshot of API call shrink"></p> <h3 id="click-to-minimize-button">Click-to-minimize button</h3> <p>If you have your own click to chat button, you might also want to make <em>click to minimize</em> button:</p> <pre><code><a href="javascript:void(0);" onclick="olark('api.box.shrink')"> Minimize chat </a> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Minimize the chat box</div> <pre><code>olark('api.box.shrink');</code></pre> </div> </div> <div class="api-call" id="api_box_onexpand" data-apiCategory="box"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_box_onexpand/">On chatbox expand</a> </h2> <div class="article-content markdown-content"> <p>Whenever the chatbox is expanded, the given callback function will be triggered.</p> <p><img src="https://www.olark.com/img/api/api_onExpand.gif" alt="Screenshot of API call on expand"></p> <h3 id="watch-for-visitors-clicking-the-chatbox">Watch for visitors clicking the chatbox</h3> <p>A visitor to your site might expand the chatbox, but not initiate a conversation. You can check to see if a conversation has started and if not, send the visitor a message after 3 seconds.</p> <pre><code><script> // Triggers when the chat box has been expanded olark('api.box.onExpand', function() { // Use getDetails to grab visitor information olark('api.visitor.getDetails', function(details){ // isConversing tells you if any messages has been exchanged // between the visitor and the operator if (!details.isConversing) { // Wait 3 seconds (3000 milliseconds) setTimeout(function(){ // Use the API to send the visitor a message olark('api.chat.sendMessageToVisitor', { body: "Let me know if you have any questions." }); }, 3000); } }); }); </script> </code></pre> <h3 id="track-when-visitors-expand-your-olark-widget">Track when visitors expand your Olark widget</h3> <p>If you are trying to track when visitors interact with the Olark widget, to perhaps test out different methods of presenting the widget, you can use this following example to do so.</p> <pre><code><script> olark('api.box.onExpand', function(event) { // Example code yourAnalytics.track("visitor_expanded_olark"); }); </script> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Monitor when the chat box expands</div> <pre><code>olark('api.box.onExpand', function() { // Your callback function });</code></pre> </div> </div> <div class="api-call" id="api_box_onhide" data-apiCategory="box"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_box_onhide/">On chatbox hide</a> </h2> <div class="article-content markdown-content"> <p>Whenever the chatbox is hidden, the given callback function will be triggered.</p> <p><img src="https://www.olark.com/img/api/api_onHide.gif" alt="Screenshot of API call onhide"></p> <h3 id="notify-an-operator-when-a-visitor-closes-the-chat-box">Notify an operator when a visitor closes the chat box</h3> <p>You can notify your operator that the visitor has closed the chatbox if you have already started chatting:</p> <pre><code><script> // Checks to see if the coversation has started olark('api.chat.onBeginConversation', function(){ // Triggers when the chat box has been hidden olark('api.box.onHide', function() { // Notifies the operator. The visitor does not see this. olark('api.chat.sendNotificationToOperator', {body: "Visitor hid the chatbox"}) }); }); </script> </code></pre> <p>You could just as easily replace the <code>onHide</code> call, to be <code>onShrink</code> if you wanted to report to the operator when the visitors minimizes the chat widget.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Monitor when the chat box is hidden</div> <pre><code>olark('api.box.onHide', function() { // Your callback function });</code></pre> </div> </div> <div class="api-call" id="api_box_onshrink" data-apiCategory="box"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_box_onshrink/">On chatbox minimize</a> </h2> <div class="article-content markdown-content"> <p>Whenever the chatbox becomes minimized, the given callback function will be triggered.</p> <p><img src="https://www.olark.com/img/api/api_onShrink.gif" alt="Screenshot of API call on shrink"></p> <h3 id="track-when-visitors-minimize-your-olark-widget">Track when visitors minimize your Olark widget</h3> <p>If you are trying to track when visitors shrink the Olark widget, to perhaps track via analytics the efficacy of different auto-messaging rules, you can use this following example to do so.</p> <pre><code><script> olark('api.box.onShrink', function(event) { // Example code yourAnalytics.track("visitor_minimized_olark"); }); </script> </code></pre> <h3 id="notify-an-operator-when-a-visitor-minimizes-the-chat-box">Notify an operator when a visitor minimizes the chat box</h3> <p>You can notify your operator that the visitor has minimized the widget if you have already started chatting:</p> <pre><code><script> // Checks to see if the coversation has started olark('api.chat.onBeginConversation', function(){ // Triggers when the chat box has been hidden olark('api.box.onShrink', function() { // Notifies the operator. The visitor does not see this. olark('api.chat.sendNotificationToOperator', {body: "Visitor shrank the chatbox"}) }); }); </script> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Monitor for the chat box minimizing</div> <pre><code>olark('api.box.onShrink', function() { // Your callback function });</code></pre> </div> </div> <div class="api-call" id="api_box_onshow" data-apiCategory="box"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_box_onshow/">On chatbox show</a> </h2> <div class="article-content markdown-content"> <p>Whenever the chatbox is shown (unhidden), the given callback function will be triggered.</p> <p><img src="https://www.olark.com/img/api/api_onShow.gif" alt="Screenshot of API call on show"></p> <h3 id="update-visitor-status-when-chat-box-visible">Update visitor status when chat box visible</h3> <p>If you have chosen to have your chatbox hidden by default, you can indicate in your buddy list that a visitor can now see the chatbox. This means they might be about to send a message:</p> <pre><code>olark('api.box.onShow', function() { olark('api.chat.updateVisitorNickname', { snippet: "is visible" }); }); </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Monitor when the chat box unhides</div> <pre><code>olark('api.box.onShow', function() { // Your callback function });</code></pre> </div> </div> <div class="api-call" id="api_box_show" data-apiCategory="box"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_box_show/">Show the chatbox</a> </h2> <div class="article-content markdown-content"> <p>Shows the chatbox. Showing the chatbox will make it appear on the page. This will override settings such as <em>Invisible Olark</em>.</p> <p><img src="https://www.olark.com/img/api/api_show.gif" alt="Screenshot of API call show"></p> <p>Should you wish to show the widget on specific pages, you can also create these rules using our <a href="https://www.olark.com/extensions/targeting">Targeted Chat</a> tool, instead of updating the code on your page.</p> <h3 id="show-the-chatbox-on-error">Show the chatbox on error</h3> <p>If a visitor runs into an error, you might want to make sure that the chatbox is displayed:</p> <pre><code><script> // If you have a script that returns error codes, show the Olark chatbox if (errorOnPage) { olark('api.box.show'); } </script> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Unhide the chat box</div> <pre><code>olark('api.box.show');</code></pre> </div> </div> <div class="api-call" id="api_chat_setoperatorgroup" data-apiCategory="chat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_chat_setoperatorgroup/">Change operator group</a> </h2> <div class="article-content markdown-content"> <blockquote> <p><strong>Note:</strong> This method requires a <a href="https://www.olark.com/featurelist">plan</a> that supports the Groups feature.</p> </blockquote> <p>Locks the visitor to a specific group of operators. All messages from the visitor will now go to that group of operators instead of all operators. See the <a href="https://www.olark.com/op">operator configuration page</a> to find the Group ID.</p> <h3 id="choose-operator-group-by-button-click">Choose operator group by button click</h3> <p>When the visitor clicks the <strong>Talk to our Sales Team</strong> button, lock to the Sales Group specifically.</p> <pre><code><script> document.getElementById('talk-to-sales').onclick = function() { olark('api.chat.setOperatorGroup', { group: 'abcdef123456' }); olark('api.box.expand'); } </script> </code></pre> <p>This example assumes that the Sales Group ID is ‘abcdef123456’. You can find the Group ID on the <a href="https://www.olark.com/op">operator configuration page</a>.</p> <h3 id="switch-to-a-backup-operator-group">Switch to a backup operator group</h3> <p>This is a special rule that notifies a backup group of operators when a customer initiates a conversation but doesn’t receive a response within a minute.</p> <blockquote> <p><strong>Note:</strong> This script may not work well without routing to ALL operators enabled in the <a href="https://www.olark.com/setup">Setup page</a>.</p> </blockquote> <pre><code><script> // Creates a new Targeted Chat rule olark('api.rules.defineRule', { id: '44', description: "notify backup team if customers aren't responded to within 60 seconds ", condition: function(pass) { // Retrieve info about the chat olark('api.visitor.getDetails', function(details) { // Trigger this action if message hasn't been responded to within 60 seconds (NOTE: This will trigger if an operator initiates a message) if ((details.messageCountForThisVisit < 2) && (details.secondsSinceLastMessage > 60) && (details.isConversing)) { pass(); } }); }, action: function() { // Change the group to the backup group using their Group ID olark('api.chat.setOperatorGroup', { group: 'YOURBACKUPGROUPID' }); // Send a notification to the backup group operators olark('api.chat.sendNotificationToOperator', { body: "Visitor has been waiting more than 60 seconds" }); }, // Trigger the rule page change if customer still hasn't received response perPage: true }); </script> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Lock the visitor to an operator group</div> <pre><code>olark('api.chat.setOperatorGroup', { group: // Group ID from https://www.olark.com/op });</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>options.group</strong><br><span>the Group ID that you want to lock to</span></li> </ul> </div> </div> <div class="api-call" id="api_chat_onofflinemessagetooperator" data-apiCategory="chat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_chat_onofflinemessagetooperator/">Offline message sent</a> </h2> <div class="article-content markdown-content"> <p>When an offline message is sent to the operator, this will call the given <code>callback</code> with an <code>event</code> object</p> <h3 id="track-visitors-who-send-you-an-offline-message">Track visitors who send you an offline message</h3> <p>Use your favorite analytics software to keep track of visitors who have sent an offline message to an operator (since they might be more valuable):</p> <pre><code><script> olark('api.chat.onOfflineMessageToOperator', function(event) { // Example code yourAnalytics.track("sent_an_offline_message"); }); </script> </code></pre> <p>Or, you could send a message back explaining that no-one is around, and point the visitor to your help center</p> <pre><code><script> olark('api.chat.onOfflineMessageToOperator', function(event) { olark('api.chat.sendMessageToVisitor', { body: "Sorry, we have just gone offline. We'll be back soon. In the meantime, why not check out our <a href="https://olark.com/help>Help Center</a>?" }); }); </script> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Monitor for an offline message being sent</div> <pre><code>olark('api.chat.onOfflineMessageToOperator', function(event) { // Your callback function });</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>event.message.body</strong><br><span>the contents of the message</span></li> </ul> </div> </div> <div class="api-call" id="api_chat_onready" data-apiCategory="chat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_chat_onready/">On chatbox load</a> </h2> <div class="article-content markdown-content"> <p>Use this API call to detect when the Olark chatbox has loaded. You can create your own callback function once the onReady event fires.</p> <p>For example, you would use onReady if you need to manipulate elements on your page only when you know for sure that Olark has loaded. You might be doing an A/B test for live chat, and want to send an event to your analytics when Olark has loaded on a page.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Check Olark has loaded</div> <pre><code>olark('api.chat.onReady', function(){ // Your callback function });</code></pre> </div> </div> <div class="api-call" id="api_chat_onbeginconversation" data-apiCategory="chat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_chat_onbeginconversation/">On conversation start</a> </h2> <div class="article-content markdown-content"> <p>Whenever a visitor or operator sends the first message, the given callback function will be triggered.</p> <h3 id="show-premium-users-in-visitor-list">Show premium users in visitor list</h3> <p>Olark already sends some nice information to the operator when the chat first begins, but you can send your own information too. Here’s how you might highlight that a visitor to your site is a premium customer:</p> <pre><code><script> // Triggers when the first message has been sent // Including automated messages from the Greeter or Targeted Chat rules olark('api.chat.onBeginConversation', function() { // Get the data from your own server as to whether the visitor is a premium account if (currentVisitorIsPremium) { // Notifies the operator - the visitor does not see this olark('api.chat.sendNotificationToOperator', { body: "This is a premium customer" }); } }); </script> </code></pre> <h3 id="send-an-automatic-response-if-an-operator-does-not-answer-within-x-seconds">Send an automatic response if an operator does not answer within X seconds</h3> <p>While we encourage you to be as human as possible during your interactions, and avoiding as much canned copy as you can, we do recognize the fact that sometimes something comes up and you cannot answer a visitor’s chat right away. This example will send a response to a visitor after 60 seconds if the operator does not reply:</p> <pre><code><script> var maxMilliseconds = 60*1000; // make sure the visitor doesn't receive a reply within 60 seconds var replyTimer = null; olark("api.chat.onMessageToOperator", function() { replyTimer = setTimeout(function() { replyTimer = null; olark("api.chat.sendMessageToVisitor", { body: "Sorry! I'm a little busy at the moment but will get back with you soon." }); }, maxMilliseconds); }); olark("api.chat.onMessageToVisitor", function() { if (replyTimer) { clearTimeout(replyTimer); } }); </script> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Monitor when a conversation begins</div> <pre><code>olark('api.chat.onBeginConversation', function() { // Your callback function });</code></pre> </div> </div> <div class="api-call" id="api_chat_onmessagetooperator" data-apiCategory="chat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_chat_onmessagetooperator/">On message to operator</a> </h2> <div class="article-content markdown-content"> <p>Whenever a message is sent to the operator, this will call the given <code>callback</code> with an <code>event</code> object.</p> <h3 id="track-messages-to-operators">Track messages to operators</h3> <p>Use your favorite analytics system to keep track of visitors who have sent a message to an operator (since they might be more valuable):</p> <pre><code><script> olark('api.chat.onMessageToOperator', function(event) { yourAnalytics.track("chatted_with_operator"); }); </script> </code></pre> <h3 id="track-positive-reactions">Track positive reactions</h3> <p>Maybe you want to keep track of positive vs. negative reactions. You could watch when people send you smileys, indicating that they are happy:</p> <pre><code><script> olark('api.chat.onMessageToOperator', function(event) { if (event.message.body.indexOf(":)") != -1) { yourAnalytics.track("customer_is_happy"); } }); </script> </code></pre> <p>If these statistics sounds cool to you, you should probably try enabling our <a href="https://www.olark.com/extensions/google_analytics">Google Analytics</a> plugin for a more in-depth integration with Google Analytics.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Check for a message being sent to the operator</div> <pre><code>olark('api.chat.onMessageToOperator', function(event) { // Your callback function });</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>event.message.body</strong><br><span>the contents of the message</span></li> </ul> </div> </div> <div class="api-call" id="api_chat_onmessagetovisitor" data-apiCategory="chat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_chat_onmessagetovisitor/">On message to visitor</a> </h2> <div class="article-content markdown-content"> <p>Whenever a message is sent to the visitor, this will call the given <code>callback</code> with an <code>event</code> object.</p> <h3 id="track-operator-response-times">Track operator response times</h3> <p>Use your favorite analytics system to keep track of how long it takes an operator to respond to a visitor:</p> <pre><code><script> olark('api.chat.onMessageToOperator', function(event) { // Get the timestamp for when the visitor sends a message var visitorSentAt = +new Date; olark('api.chat.onMessageToVisitor', function(event) { // Get the timestamp for when the operator sends a message var operatorSentAt = +new Date; // Calculate the difference between the two times and track the event // Check your anayltics software API to see how to push an event yourAnalytics.track("operator_response_time", operatorSentAt - visitorSentAt); }); }); </script> </code></pre> <p>If these statistics sounds cool to you, you should probably try enabling our <a href="https://www.olark.com/extensions/google_analytics">Google Analytics</a> for a more in-depth integration with Google Analytics.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Check for a message being sent to the visitor</div> <pre><code>olark('api.chat.onMessageToVisitor', function(event) { // Your callback function });</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>event.message.body</strong><br><span>the contents of the message</span></li> <li><strong>event.message.nickname</strong><br><span>the display name of the operator</span></li> </ul> </div> </div> <div class="api-call" id="api_chat_oncommandfromoperator" data-apiCategory="chat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_chat_oncommandfromoperator/">On operator command</a> </h2> <div class="article-content markdown-content"> <p>Whenever a command is sent from the visitor, e.g. <em>!track this is a lead</em>, this will call the given <code>callback</code> with an <code>event</code> object.</p> <p>Commands must begin with an exclamation point <em>!</em> and come at the start of a message. You can also see a list of the default <a href="https://www.olark.com/help/commands">operator commands</a> in our help section. To see these while chatting, type <code>!help</code> into a chat at any time to see the list of commands you can perform. Your visitors will not see the command unless specified.</p> <h3 id="push-the-visitor-to-your-faq-page">Push the visitor to your FAQ page</h3> <p>Use the command <code>!faq</code> to send a visitor to your FAQ page:</p> <pre><code><script> olark('api.chat.onCommandFromOperator', function(event) { // Checks for the !faq command if (event.command.name == 'faq') { // Let the customer know what you're about to do olark('api.chat.sendMessageToVisitor', { body: "Let me point you to our FAQ page" }); // Redirect the visitor's browser to your FAQ page window.location = "http://www.example.com/pages/faq" } }); </script> </code></pre> <h2 id="add-an-optional-piece-of-information">Add an optional piece of information</h2> <p>Create a custom command to notify a new chatter that there is a queue. By using <code>!q</code> and adding an integer, such as 2 after it, <code>!q 2</code>, you add a custom time into the message. This example tells the visitor that the operator will be with them in 2 minutes. If the operator entered <code>!q 3</code>, it would say 3 minutes. This example also tells the operator what has been sent.</p> <pre><code><script> olark('api.chat.onCommandFromOperator', function(event) { // Checks for the !q command if (event.command.name == 'q') { // Let the customer know what you're about to do olark('api.chat.sendMessageToVisitor', { body: "Hi there, chat is really busy, I'll be with you in " + (event.command.body) + " minutes" }); olark('api.chat.sendNotificationToOperator', { body: "Telling customer you will be with them in " + (event.command.body) + " minutes" }); } }); </script> </code></pre> <h3 id="make-a-comment-to-follow-up-with-a-visitor">Make a comment to follow up with a visitor</h3> <p>Create a custom followup command to add some notes about following up with this customer to your CRM:</p> <pre><code><script> olark('api.chat.onCommandFromOperator', function(event) { // Checks for the !comment command if (event.command.name == 'comment') { // This is an example of how you might send the event to your CRM // Check out the API of your CRM provider to see how to do this yourCRM.addNoteToCustomer(event.command.body); } }); </script></code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Monitor for an operator using a command</div> <pre><code>olark('api.chat.onCommandFromOperator', function(event) { // Callback function } );</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>event.command.body</strong><br><span>the contents of the message, e.g. 'this is a lead' (optional)</span></li> <li><strong>event.command.name</strong><br><span>the name of the command, e.g. 'track' (required)</span></li> </ul> </div> </div> <div class="api-call" id="api_chat_onoperatorsavailable" data-apiCategory="chat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_chat_onoperatorsavailable/">On operators available</a> </h2> <div class="article-content markdown-content"> <p>Whenever any operator comes online, the given <code>callback</code> will be triggered.</p> <h3 id="indicate-you-have-operators-available">Indicate you have operators available</h3> <p>Show a green icon whenever you have operators available to chat, or a red one when you are away:</p> <pre><code> <div id="chat-indicator">Live chat</div> <style type="text/css"> /* Operators available */ .green-icon { background-color: green; } /* Operators offline */ .red-icon { background-color: red; } </style> <script> olark('api.chat.onOperatorsAvailable', function() { // Identify the element, and give it a class name document.getElementById('chat-indicator').className = 'green-icon'; }); olark('api.chat.onOperatorsAway', function() { // Identify the element, and give it a class name document.getElementById('chat-indicator').className = 'red-icon'; }); </script> </code></pre> <p>Here is an example of what it might look like with a little styling. In this example, we also added selectors to change the text as well as the color.</p> <pre><code><style type="text/css"> /* Operators available */ .green-icon { background-color: green; } .green-icon::after { content: ": on"; } /* Operators offline */ .red-icon { background-color: red; } .red-icon::after { content: ": off"; } </style> </code></pre> <p><img src="https://www.olark.com/img/api/api_onOperatorsAvailable.gif" alt="Screenshot of API call on Operators Available"></p> <p><em>Please note:</em> This call will only fire if an operator’s state changes. It cannot be queried.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Trigger for when operators are available</div> <pre><code>olark('api.chat.onOperatorsAvailable', function() { // Your callback function });</code></pre> </div> </div> <div class="api-call" id="api_chat_onoperatorsaway" data-apiCategory="chat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_chat_onoperatorsaway/">On operators unavailable</a> </h2> <div class="article-content markdown-content"> <p>Whenever all operators are offline, the given <code>callback</code> will be triggered.</p> <h3 id="indicate-your-operators-are-offline">Indicate your operators are offline</h3> <p>Show a red icon whenever you have operators available to chat:</p> <pre><code> <div id="chat-indicator">Live chat</div> <style type="text/css"> /* Operators available */ .green-icon { background-color: green; } /* Operators offline */ .red-icon { background-color: red; } </style> <script> olark('api.chat.onOperatorsAvailable', function() { // Identify the element, and give it a class name document.getElementById('chat-indicator').className = 'green-icon'; }); olark('api.chat.onOperatorsAway', function() { // Identify the element, and give it a class name document.getElementById('chat-indicator').className = 'red-icon'; }); </script> </code></pre> <p>Here is an example of what it might look like with a little styling. In this example, we also added selectors to change the text as well as the color.</p> <pre><code><style type="text/css"> /* Operators available */ .green-icon { background-color: green; } .green-icon::after { content: ": on"; } /* Operators offline */ .red-icon { background-color: red; } .red-icon::after { content: ": off"; } </style> </code></pre> <p><img src="https://www.olark.com/img/api/api_onOperatorsAvailable.gif" alt="Screenshot of API call on Operators Available 2"></p> <p><em>Please note:</em> This call will only fire if an operator’s state changes. It cannot be queried.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Trigger for when operators are away</div> <pre><code>olark('api.chat.onOperatorsAway', function() { // Your callback function });</code></pre> </div> </div> <div class="api-call" id="api_chat_sendmessagetovisitor" data-apiCategory="chat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_chat_sendmessagetovisitor/">Send message to visitor</a> </h2> <div class="article-content markdown-content"> <p>Send a message to the visitor. It will appear as if the message came from an operator.</p> <h3 id="trigger-an-automated-message">Trigger an automated message</h3> <p>Send a welcome message whenever a visitor clicks on a <strong>help me</strong> button:</p> <pre><code> <a id="help-me" href="#">Live chat help</a> <script> document.getElementById('help-me').onclick = function() { olark('api.chat.sendMessageToVisitor', { body: "Let me know if you have any questions." }); // Stops the link reloading the page return false; } </script> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Send a message to the visitor</div> <pre><code>olark('api.chat.sendMessageToVisitor', options );</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>options.body</strong><br><span>the contents of the message to send the visitor</span></li> </ul> </div> </div> <div class="api-call" id="api_chat_sendnotificationtooperator" data-apiCategory="chat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_chat_sendnotificationtooperator/">Send operator notification</a> </h2> <div class="article-content markdown-content"> <p>Send a notification message to the operator. The operator will see <em>[info]</em> to indicate that this message was not sent from the visitor.</p> <h3 id="notify-operator-on-landing-pages">Notify operator on landing pages</h3> <p>You can send your operator a notification when the visitor lands on a particular page, such as a landing page:</p> <pre><code><script> // Checks if the current URL contains 'landing' if (document.location.href.indexOf('landing') != -1) { olark('api.chat.sendNotificationToOperator', { // Send a custom notification body: 'visitor landed on the billing page' }); } </script> </code></pre> <h3 id="notify-operators-on-landing-pages-after-one-minute">Notify operators on landing pages after one minute</h3> <p>Perhaps you want to notify an operator when a visitor is hesitating on a page for more than 60 seconds, so you can choose to initiate a chat with them:</p> <pre><code><script> // Create a timer setTimeout(function(){ olark('api.chat.sendNotificationToOperator', { // Send a custom notification body: 'this visitor is hesitating' }); // Set time to 60 seconds (60000 milliseconds) }, 60000); </script> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Send a notification to the operator</div> <pre><code>olark('api.chat.sendNotificationToOperator', { body: string });</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>options.body</strong><br><span>the contents of the notification to send the operator</span></li> </ul> </div> </div> <div class="api-call" id="api_chat_sendnotificationtovisitor" data-apiCategory="chat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_chat_sendnotificationtovisitor/">Send visitor notification</a> </h2> <div class="article-content markdown-content"> <p>Send a notification message to the visitor. The message will look like a notification, and will not show up as coming from a particular operator.</p> <h3 id="notify-a-visitor-if-no-immediate-response">Notify a visitor if no immediate response</h3> <p>Assure a visitor that the operator will be back later if there is no response from an operator in 60 seconds:</p> <pre><code><script> // Set a timer variable var lastMessageTimeout; // Wait for a message to the visitor olark('api.chat.onMessageToVisitor', function(){ // If a message is sent, reset the timer clearTimeout(lastMessageTimeout); // Start the timer lastMessageTimeout = setTimeout(function(){ // Send a custom notification to the visitor olark('api.chat.sendNotificationToVisitor', { body: "the operator just stepped out for a moment" }) // Set timer to one minute (60,000 milliseconds) }, 60000); }); </script> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Send a notification to the visitor</div> <pre><code>olark('api.chat.sendNotificationToVisitor', { body: string });</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>options.body</strong><br><span>the contents of the notification to send the visitor</span></li> </ul> </div> </div> <div class="api-call" id="system_allowed_domains" data-apiCategory="configure"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_allowed_domains/">Allowed domains</a> </h2> <div class="article-content markdown-content"> <p>Set which domains the chatbox will be displayed on. If your website spans multiple domains' subdomains, you can choose which subdomains will work.</p> <p>Note that chats cannot continue across top-level domains. In order for chats to go from a top-level domain to a subdomain, the top-level domain cannot be a naked domain (i.e. the URL should be <code>http://www.example.com</code>, not <code>http://example.com</code>).</p> <p>Use <code>*</code> as a wildcard. Separate multiple domains with commas, e.g. <code>*.yourdomain.com,*.yourotherdomain.com</code>.</p> <pre><code>/* custom configuration goes here (www.olark.com/documentation) */ olark.configure('system.allowed_domains', '*.yourdomain.com,*.yourotherdomain.com'); </code></pre> <p>You can also add subdomains on your <a href="https://www.olark.com/setup">Setup page</a> page.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Set allowed domains</div> <pre><code>olark.configure('system.allowed_domains', string);</code></pre> </div> </div> <div class="api-call" id="system_localization" data-apiCategory="configure"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_localization/">Configure the default language</a> </h2> <div class="article-content markdown-content"> <p>You can change the language of the chatbox per page by using the following configuration call. If you want to change the language of the chatbox site wide you can do so from your <a href="https://www.olark.com/customize/behavior">Text & Forms</a> settings. We support the following languages.</p> <pre><code>olark.configure("system.localization", "en-US"); // English (United States) olark.configure("system.localization", "de-DE"); // Deutsch (Deutschland) olark.configure("system.localization", "es-ES"); // Spanish (Spain) olark.configure("system.localization", "fr-FR"); // Français (France) olark.configure("system.localization", "it-IT"); // Italian (Italy) olark.configure("system.localization", "nl-NL"); // Dutch (Netherlands) olark.configure("system.localization", "pt-BR"); // Portuguese (Brazilian) olark.configure("system.localization", "ru-RU"); // Russian (Russia) olark.configure("system.localization", "sv-SE"); // Swedish (Sweden) olark.configure("system.localization", "tr-TR"); // Turkish (Turkey) olark.configure("system.localization", "zh-CN"); // Simplified Chinese (China) </code></pre><p>Note that by using the <code>system.localization</code> call our default localization strings will be used. If you’d like more granular control over chatbox strings check out our article on <a href="https://www.olark.com/help/languages">Changing the chatbox language</a>. Here are all the strings you can configure:</p> <pre><code>/* online chatbox strings */ olark.configure("locale.welcome_title", "Chat with us"); olark.configure("locale.chatting_title", "Chat with us"); olark.configure("locale.welcome_message", "Have a question? We'd love to help."); olark.configure("locale.chat_input_text", "Type a message..."); olark.configure("locale.ended_chat_message", "Have a question? This conversation has ended. You can start a new chat by sending another message if you like. Thanks for stopping by to chat with us. Come back again anytime."); /* offline chatbox strings */ olark.configure("locale.unavailable_title", "Need help?"); olark.configure("locale.away_message", "We're not around but please leave us a message"); olark.configure("locale.name_input_text", "Click here and type your name"); olark.configure("locale.email_input_text", "Click here and type your email"); olark.configure("locale.phone_input_text", "Click here and type your phone number"); olark.configure("locale.offline_note_message", "Have a question about Olark live chat or a Support Query? To speed up the process please give us as much info about your issue as you can. "); olark.configure("locale.send_button_text", "Send"); olark.configure("locale.offline_note_thankyou_text", "Thank you for your message. We will get back to you as soon as we can."); olark.configure("locale.offline_note_error_text", "You must complete all fields and specify a valid email address"); /* pre-chat survey strings */ olark.configure("locale.name_input_text", "<Click here> and type your Name"); olark.configure("locale.email_input_text", "<Click here> and type your Email"); olark.configure("locale.phone_input_text", "<Click here> and type your Phone"); olark.configure("locale.introduction_error_text", "Please leave a name and email address so we can contact you in case we get disconnected"); olark.configure("locale.introduction_messages", "Welcome, just fill out some brief information and click Start Chat to talk to us"); olark.configure("locale.introduction_submit_button_text", "Start chat"); /* offline message form strings*/ olark.configure("locale.offline_survey_submit_button_text", "Send"); olark.configure("locale.offline_survey_next_button_text", "Next"); olark.configure("locale.offline_survey_thank_you_message", "Thanks for your message! We will have a member of our team contact you shortly."); olark.configure("locale.offline_survey_welcome_message", "We're not around but we still want to hear from you! Leave us a note:"); olark.configure("locale.offline_survey_name_label", "Name"); olark.configure("locale.offline_survey_name_placeholder", "Enter your name..."); olark.configure("locale.offline_survey_email_label", "Email"); olark.configure("locale.offline_survey_email_placeholder", "Enter your email..."); olark.configure("locale.offline_survey_phone_label", "Phone"); olark.configure("locale.offline_survey_phone_placeholder", "Enter your phone number..."); olark.configure("locale.offline_survey_website_label", "Website"); olark.configure("locale.offline_survey_website_placeholder", "Enter your website..."); olark.configure("locale.offline_required_error_message", "Please complete all required fields"); olark.configure("locale.offline_email_validation_message", "Please enter a valid email address"); olark.configure("locale.offline_phone_validation_message", "Please enter a valid phone number"); olark.configure("locale.offline_website_validation_message", "Please enter a valid URL"); /* greeter strings */ olark.configure("WelcomeAssist.welcome_messages", ["&iexcl;Bienvenidos a nuestro sitio!"]); /* chat ratings strings */ olark.configure('locale.feedback_survey_question_chat_text', 'How satisfied were you with this chat?'); olark.configure('locale.feedback_survey_question_operator_intelligence_text', 'How knowledgeable was the chat agent?'); olark.configure('locale.feedback_survey_question_operator_speed_text', 'How responsive was the chat agent?'); olark.configure('locale.feedback_survey_question_operator_attitude_text', 'How friendly was the chat agent?'); olark.configure('locale.feedback_survey_question_1_text', 'Question 1 of 5'); olark.configure('locale.feedback_survey_question_2_text', 'Question 2 of 5'); olark.configure('locale.feedback_survey_question_3_text', 'Question 3 of 5'); olark.configure('locale.feedback_survey_question_4_text', 'Question 4 of 5'); olark.configure('locale.feedback_survey_question_5_text', 'Question 5 of 5'); olark.configure('locale.feedback_survey_question_chat_low', 'Not at all satisfied'); olark.configure('locale.feedback_survey_question_chat_high', 'Extremely satisfied'); olark.configure('locale.feedback_survey_question_operator_intelligence_low', 'Not at all knowledgeable'); olark.configure('locale.feedback_survey_question_operator_intelligence_high', 'Extremely knowledgeable'); olark.configure('locale.feedback_survey_question_operator_speed_low', 'Not at all responsive'); olark.configure('locale.feedback_survey_question_operator_speed_high', 'Extremely responsive'); olark.configure('locale.feedback_survey_question_operator_attitude_low', 'Not at all friendly'); olark.configure('locale.feedback_survey_question_operator_attitude_high', 'Extremely friendly'); olark.configure('locale.feedback_survey_question_additional_feedback_text', 'Additional feedback.'); olark.configure('locale.feedback_survey_button_next', 'Next'); olark.configure('locale.feedback_survey_button_submitting', 'Submitting'); olark.configure('locale.feedback_survey_button_finish', 'Finish'); olark.configure('locale.feedback_survey_end_message', 'Thank you for your feedback'); olark.configure('locale.feedback_survey_submission_error_message', 'There was an error submitting your answer, please try again.'); olark.configure('locale.feedback_survey_begin_button_text', 'Rate chat'); olark.configure('locale.feedback_survey_complete_button_text', 'Done'); olark.configure('locale.feedback_survey_cancel_text', 'Cancel'); olark.configure('locale.restart_chat_online_button_text', 'Start Chatting'); olark.configure('locale.restart_chat_offline_button_text', 'Email'); /* send transcript strings */ olark.configure('locale.send_transcript_title_text', 'Send transcript'); olark.configure('locale.send_transcript_begin_button_text', 'Send transcript'); olark.configure('locale.send_transcript_complete_button_text', 'Transcript sent!'); olark.configure('locale.send_transcript_error_text', 'There was an error sending this transcript'); olark.configure('locale.send_transcript_cancel_text', 'Cancel'); olark.configure('locale.send_transcript_placeholder', 'Click here and enter your email'); </code></pre><p>With calls like <code>olark.configure('locale.welcome_title', 'Foo')</code>, the string provided by that call will always take highest priority.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Configure the default language</div> <pre><code>olark.configure('system.localization', 'en-US');</code></pre> </div> </div> <div class="api-call" id="features_feedback" data-apiCategory="configure"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/features_feedback/">Enable Chat Ratings</a> </h2> <div class="article-content markdown-content"> <p>Enable the post-chat survey on a specific page. You can also enable this on the <a href="https://www.olark.com/reports/">Chat Ratings settings</a> page.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Enable Post-chat Survey</div> <pre><code>olark.configure('features.feedback', true );</code></pre> </div> </div> <div class="api-call" id="features_prechat_survey" data-apiCategory="configure"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/features_prechat_survey/">Enable Pre-chat Survey</a> </h2> <div class="article-content markdown-content"> <p>You can enable the Pre-chat Survey feature on a specific page. This can also be done on your <a href="https://www.olark.com/customize/behavior">Text & Forms settings</a> page.</p> <p>You can read more about using the Pre-chat Survey in our <a href="https://www.olark.com/help/prechat-survey">help section</a>.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Enable the Pre-chat Survey</div> <pre><code>olark.configure('features.prechat_survey', true );</code></pre> </div> </div> <div class="api-call" id="box_start_expanded" data-apiCategory="configure"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/box_start_expanded/">Expand chatbox on load</a> </h2> <div class="article-content markdown-content"> <p>Expand the chatbox by default when the page loads.</p> <p>Note that when the chatbox is expanded, Attention Grabber images are hidden. Also, sending a message will automatically expand the chatbox in all cases by default.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Start the chat box expanded</div> <pre><code>olark.configure('box.start_expanded', true);</code></pre> </div> </div> <div class="api-call" id="system_hide_minimize_button" data-apiCategory="configure"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_hide_minimize_button/">Hide the minimize button</a> </h2> <div class="article-content markdown-content"> <p>Normally the chatbox shows an icon in the top right corner that, when clicked, allows the user to minimize it. This configuration option allows you to remove that button so that, once the chatbox has been expanded, the user can not manually minimize it. However, the chatbox can still be minimized and expanded with api calls.</p> <p><img src="https://www.olark.com/img/api/minimize-button-hidden.jpg" alt="themes"></p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Hide the minimize button</div> <pre><code>olark.configure('system.hb_hide_minimize_button', true);</code></pre> </div> </div> <div class="api-call" id="box_inline" data-apiCategory="configure"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/box_inline/">Load chatbox in DOM element</a> </h2> <div class="article-content markdown-content"> <p>Instead of having the Olark chat window fixed to the bottom corner of your page, Olark will instead search your page for an element with the ID <code>olark-box-container</code> and load the chatbox there instead.</p> <p>For example, you might have a <code><div></code> in your sidebar that displays the chatbox.</p> <pre><code><div id="olark-box-container"></div> </code></pre> <p>You can find our complete instructions to embed the Olark widget on your website <a href="https://www.olark.com/help/inline-chatbox">here</a></p> <p>This rudimentary example shows the chatbox inside a wrapper, with a header.</p> <pre><code><div id="wrapper"> <h1>My website</h1> <div id="olark-box-container"></div> </div> </code></pre> <p>It produces the example below (we are sure that you can do better!)</p> <p><img src="https://www.olark.com/img/api/inline.png" alt="Screenshot of API call inline"></p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Place the chat box inside a container</div> <pre><code>olark.configure('box.inline', true);</code></pre> </div> </div> <div class="api-call" id="system_give_location_to_operator" data-apiCategory="configure"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_give_location_to_operator/">Page change notifications</a> </h2> <div class="article-content markdown-content"> <p>Gives notifications about what page the visitor is on. By default, each time a visitor navigates to a new URL while on your site, this will be sent as a notification to your operator. Set to <code>false</code> to disable this behavior.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Report page changes to operator</div> <pre><code>olark.configure('system.give_location_to_operator', true );</code></pre> </div> </div> <div class="api-call" id="system_disable_default_visitor_information" data-apiCategory="configure"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_disable_default_visitor_information/">Pre-chat visitor notifications</a> </h2> <div class="article-content markdown-content"> <p>This will turn off all of the initial pre-chat notifications that give you visitor context - including location, current URL and number of previous conversations - allowing you to show just your own custom pre-chat information instead.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Disable visitor info when chat begins</div> <pre><code>olark.configure('system.disable_default_visitor_information', true);</code></pre> </div> </div> <div class="api-call" id="system_chat_does_not_follow_external_links" data-apiCategory="configure"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_chat_does_not_follow_external_links/">Prevent non-local URL wrapping</a> </h2> <div class="article-content markdown-content"> <p>If you have a link in your chatbox that goes to a non-local URL, for example a page on another domain, Olark will by default wrap the new page. This means that the chatbox will still appear on the new page, even if it’s not your website.</p> <p>However, increasingly websites are not allowing cross-domain access, meaning that the wrapped content may not work correctly. You can choose to disable this wrapping behavior by setting this API call to <code>true</code>.</p> <p>Note that by enabling this setting, visitors who click the link to the non-local URL will leave your website and no longer be able to chat with you.</p> <p>As an alternative, you can prepend any link you type into the chatbox with a <code>+</code> symbol (eg. <code>Click here to upload an image: +imgur.com</code>), which will force the link to open in a new tab/window.</p> <p>On your <a href="https://www.olark.com/customize/behavior">Text & Forms</a> settings page, you can add a <code>target="_blank"</code> attribute to a link to make it open in a new tab/window.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Disable pre-chat notifications</div> <pre><code>olark.configure('system.chat_does_not_follow_external_links', true );</code></pre> </div> </div> <div class="api-call" id="system_group" data-apiCategory="configure"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_group/">Set operator group</a> </h2> <div class="article-content markdown-content"> <p>Set the group before the chatbox loads. You can get the ID for each group by clicking on it from the <a href="https://www.olark.com/op">Operator settings</a> page.</p> <p>This differs from the <code>setOperatorGroup</code> API call in that it can only be done before the chatbox loads. To set the operator group after the chatbox has loaded, use <code>setOperatorGroup</code> instead.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Lock visitor to operator group</div> <pre><code>olark.configure('system.group', string );</code></pre> </div> </div> <div class="api-call" id="system_is_single_page_application" data-apiCategory="configure"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_is_single_page_application/">Single page applications</a> </h2> <div class="article-content markdown-content"> <p>Olark uses polling to check your visitor’s status while on your site. Visitors who leave your site, or have been idle for a long time without changing page, will eventually stop sending polling requests. If you have a single page application where the visitor does not change pages, they may incorrectly be detected as being idle.</p> <p>You can prevent this by setting <code>is_single_page_application</code> to <code>true</code>.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Single page applications</div> <pre><code>olark.configure('system.is_single_page_application', true );</code></pre> </div> </div> <div class="api-call" id="box_start_hidden" data-apiCategory="configure"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/box_start_hidden/">Start chatbox hidden</a> </h2> <div class="article-content markdown-content"> <p>Suppose you usually show the chatbox, but wish to hide it on specific pages. You can do so using the following Javascript API function. You can enable this option on your <a href="https://www.olark.com/setup">Setup page</a> as <strong>Hide the chatbox by default</strong>.</p> <p>The <code>api.box.hide</code> function is useful for when the chatbox has already loaded on a site and you wish to hide it again. For example, when the visitor clicks a particular button.</p> <p>You would use <code>box.start_hidden</code> when you don’t want the chatbox to show at all when the page loads. If you used <code>api.box.hide</code> to hide the chatbox when the page loads, a visitor might see the chatbox appear briefly, before the API call was read.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Start the chat box hidden</div> <pre><code>olark.configure('box.start_hidden', true);</code></pre> </div> </div> <div class="api-call" id="features_google_analyics" data-apiCategory="ga"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/features_google_analyics/">Enable Google Analytics</a> </h2> <div class="article-content markdown-content"> <p>Use this API call to enable the Google Analytics integration on a single page.</p> <p>You can also enable this in your <a href="https://www.olark.com/extensions/google_analytics">Google Analytics Extension settings</a>.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Enable Google Analytics</div> <pre><code>olark.configure('features.google_analytics', true );</code></pre> </div> </div> <div class="api-call" id="system_google_analytics_id" data-apiCategory="ga"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_google_analytics_id/">Set Google Analytics ID</a> </h2> <div class="article-content markdown-content"> <p>Set the Google Analytics ID for your account on a specific page.</p> <p>For example, you might have separate domains using the same Olark account, but different Google Analytics IDs.</p> <pre><code><?php // Get the current domain $host = $_SERVER['HTTP_HOST']; if ($host == "example.com") { olark.configure('system.google_analytics_id', 'YOUR-GA-ID' ); } elseif ($host == "test.org") { olark.configure('system.google_analytics_id', 'OTHER-GA-ID' ); } ?> </code></pre> <p>Check out our related help guide for this <a href="https://www.olark.com/help/google-analytics-tracking-id">here</a>. You can also view advanced troubleshooting help for Google Analytics + Olark <a href="https://www.olark.com/help/google-analytics-troubleshooting">here</a>.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Set your Google Analytics ID</div> <pre><code>olark.configure('system.google_analytics_id', string );</code></pre> </div> </div> <div class="api-call" id="features_greeter" data-apiCategory="greeter"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/features_greeter/">Enable Greeter</a> </h2> <div class="article-content markdown-content"> <p>Enable the Greeter on a specific page.</p> <p>You can also enable this on the <a href="https://www.olark.com/extensions/greeter">Greeter extension</a> page.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Enable Greeter</div> <pre><code>olark.configure('features.greeter', true );</code></pre> </div> </div> <div class="api-call" id="welcomeassist_notify_op_of_new_visitor" data-apiCategory="greeter"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/welcomeassist_notify_op_of_new_visitor/">Notify operators of first-time visitors</a> </h2> <div class="article-content markdown-content"> <p>If the Greeter function is enabled, you can use this call to enable/disable the <a href="https://www.olark.com/help/visitor-notifications">advanced notification</a> per page.</p> <p>You can also enable this on the <a href="https://www.olark.com/extensions/greeter">Greeter extension</a> page.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Enable notification of arrival using Greeter</div> <pre><code>olark.configure('WelcomeAssist.notify_operator_of_new_visitors', true );</code></pre> </div> </div> <div class="api-call" id="welcomeassist_welcome_delay_in_seconds" data-apiCategory="greeter"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/welcomeassist_welcome_delay_in_seconds/">Set Greeter delay in seconds</a> </h2> <div class="article-content markdown-content"> <p>Set the time after which the Greeter message will be sent to first-time visitors on your site.</p> <p>You can also enable this on the <a href="https://www.olark.com/extensions/greeter">Greeter extension</a> page.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Set the Greeter delay</div> <pre><code>olark.configure('WelcomeAssist.welcome_delay_in_seconds', integer );</code></pre> </div> </div> <div class="api-call" id="welcomeassist_welcome_messages" data-apiCategory="greeter"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/welcomeassist_welcome_messages/">Set Greeter Welcome Messages</a> </h2> <div class="article-content markdown-content"> <p>Set the welcome messages to send to the visitors when the Greeter function activates. If you have more than 1 message enabled in the call, we will choose a random one to send to the visitor when they meet the greeter criteria.</p> <p>You can also enable this on the <a href="https://www.olark.com/extensions/greeter">Greeter extension</a> page.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Set the Greeter Welcome Messages</div> <pre><code>olark.configure('WelcomeAssist.welcome_messages', ['hello world', 'another message!', 'a 3rd message!']);</code></pre> </div> </div> <div class="api-call" id="welcomeassist.welcome_new_visitors" data-apiCategory="greeter"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/welcomeassist.welcome_new_visitors/">Switch on the Greeter</a> </h2> <div class="article-content markdown-content"> <p>Use this call to switch the Greeter on. You can then use the calls below to control how the Greeter behaves.</p> <p>You can also enable this on the <a href="https://www.olark.com/extensions/greeter">Greeter extension</a> page.</p> </div> </div> <div class="api-snippet"> <div class="snippet-title">Switch on the Greeter</div> <pre><code>olark.configure('WelcomeAssist.welcome_new_visitors', true );</code></pre> </div> </div> <div class="api-call" id="system_custom_prechat" data-apiCategory="prechat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_custom_prechat/">Add a custom prechat survey</a> </h2> <div class="article-content markdown-content"> <p>Dynamically add questions to your prechat survey with ‘system.custom_prechat’. Pass an array of the questions you’d like to add using the format below:</p> <pre><code>olark.configure('system.custom_prechat', [ { type: "textarea", is_required: false, label: 'What can we help with today?', placeholder_text: "I need help with..." } ]); </code></pre> <p>The <code>type</code> property refers to the type of question you would like to ask your visitors and is used in form styling and validation. Options include:</p> <ul> <li><code>name</code>,</li> <li><code>email</code>,</li> <li><code>phone</code>,</li> <li><code>website</code>,</li> <li><code>textarea</code> (good for long response questions)</li> <li><code>textfield</code> (good for short response questions).</li> </ul> <p>The <code>is_required</code> property will mark a particular question as required or not. Required fields will appear with a <code>*</code> inside the input field.</p> <p>The <code>label</code> property refers to the text above the input field. This field is only necessary to pass for questions where the type is <code>textarea</code> and <code>textfield</code>.</p> <p>The <code>placeholder_text</code> property refers to the grey preview text inside of the input field, to help prompt visitors to fill out the form. This property is only required for <code>textarea</code> and <code>textfield</code> type questions.</p> <p>These questions will be added to your existing prechat survey that you have built on the <a href="https://www.olark.com/customize/behavior">Text & Forms</a> settings page. Keep in mind you can have a maximum of 6 questions in your prechat survey, any questions that do not fit will not appear.</p> <p>This requires the <strong>pre-chat survey</strong> to be enabled first.</p> <p>This setting can also be enabled on the pre-chat survey section of the <a href="https://www.olark.com/customize/behavior">Text & Forms</a> settings page.</p> <p>You can read more about using the pre-chat survey in our <a href="https://www.olark.com/help/prechat-survey">Help Center</a>.</p> <p>To add fields dynamically to an offline form, you can use this same format outlined above but use the <code>system.custom_offline_form</code> configure call.</p> <blockquote> <p><strong>Note:</strong> We’ll do our best to help with any questions you have. However, please keep in mind that the API is intended to be self-serve for web developers, so we’re not able to write or debug your code. If you’re experiencing issues, be sure to have your developer, designer or webmaster review code you’ve written.</p> </blockquote> </div> </div> <div class="api-snippet"> <div class="snippet-title">Dynamically add questions to your prechat survey</div> <pre><code>olark.configure('system.custom_prechat', [ { is_required: false, label: 'What can we help with today?', placeholder_text: 'I need help with ...' , type: 'textarea' } ]);</code></pre> </div> </div> <div class="api-call" id="system_require_email" data-apiCategory="prechat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_require_email/">Require email</a> </h2> <div class="article-content markdown-content"> <p>Require visitors fill out their email address in the pre-chat survey before chatting. This requires the <strong>pre-chat survey</strong> to be enabled first.</p> <p>This setting can also be enabled on the pre-chat survey section of the <a href="https://www.olark.com/customize/behavior">Text & Forms</a> settings page.</p> <p>You can read more about using the pre-chat survey in our <a href="https://www.olark.com/help/prechat-survey">Help Center</a>.</p> <p>Even if the pre-chat survey is enabled in your settings, you would need to enable the plugin using this line to use the <code>system.ask_for_email</code> API call:</p> <pre><code>olark.configure("features.prechat_survey", true);</code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Require visitors fill out their email before chatting</div> <pre><code>olark.configure('system.ask_for_email', 'hidden' );</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>hidden</strong><br><span>hidden field</span></li> <li><strong>optional</strong><br><span>optional field</span></li> <li><strong>required</strong><br><span>required field</span></li> </ul> </div> </div> <div class="api-call" id="system_require_name" data-apiCategory="prechat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_require_name/">Require name</a> </h2> <div class="article-content markdown-content"> <p>Require visitors fill out their name in the pre-chat survey before chatting. This requires the <strong>pre-chat survey</strong> to be enabled first.</p> <p>This setting can also be enabled on the pre-chat survey section of the <a href="https://www.olark.com/customize/behavior">Text & Forms</a> settings page.</p> <p>You can read more about using the pre-chat survey in our <a href="https://www.olark.com/help/prechat-survey">Help Center</a>.</p> <p>Even if the pre-chat survey is enabled in your settings, you would need to enable the plugin using this line to use the <code>system.ask_for_name</code> API call:</p> <pre><code>olark.configure("features.prechat_survey", true);</code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Require visitors fill out their name before chatting</div> <pre><code>olark.configure('system.ask_for_name', 'hidden' );</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>hidden</strong><br><span>hidden field</span></li> <li><strong>optional</strong><br><span>optional field</span></li> <li><strong>required</strong><br><span>required field</span></li> </ul> </div> </div> <div class="api-call" id="system_require_phone" data-apiCategory="prechat"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/system_require_phone/">Require phone number</a> </h2> <div class="article-content markdown-content"> <p>Require visitors fill out their phone number in the pre-chat survey before chatting. This requires the <strong>pre-chat survey</strong> to be enabled first.</p> <p>This setting can also be enabled on the pre-chat survey section of the <a href="https://www.olark.com/customize/behavior">Text & Forms</a> settings page.</p> <p>You can read more about using the pre-chat survey in our <a href="https://www.olark.com/help/prechat-survey">Help Center</a>.</p> <p>Even if the pre-chat survey is enabled in your settings, you would need to enable the plugin using this line to use the <code>system.ask_for_phone</code> API call:</p> <pre><code>olark.configure("features.prechat_survey", true);</code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Require visitors fill out their phone before chatting</div> <pre><code>olark.configure('system.ask_for_phone', 'hidden' );</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>hidden</strong><br><span>hidden field</span></li> <li><strong>optional</strong><br><span>optional field</span></li> <li><strong>required</strong><br><span>required field</span></li> </ul> </div> </div> <div class="api-call" id="api_rules_definerule" data-apiCategory="rules"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_rules_definerule/">Define Targeted Chat rules</a> </h2> <div class="article-content markdown-content"> <blockquote> <p>Note: You can create Targeted Chat rules without any coding on the <a href="https://www.olark.com/extensions/targeting">Targeted Chat settings</a> page.</p> </blockquote> <p>Create Targeted Chat rules that help you automate decisions about how and when to interact with visitors and operators. You can create rules to perform actions such as:</p> <ul> <li>Initiating chat with a visitor who has been browsing for more than 30 seconds</li> <li>Notifying an operator when a visitor lands on the page from a Google AdWords campaign</li> <li>Highlighting important visitors in your buddy list</li> </ul> <p>Be sure to check out the <a href="https://www.olark.com/documentation/javascript/api.visitor.getDetails">getDetails API call</a> to learn how to access detailed customer information for making creative rules.</p> <h3 id="start-a-conversation-with-a-visitor-after-5-pageviews">Start a conversation with a visitor after 5 pageviews</h3> <p>Let’s say you wanted to auto-initiate with any visitor who has visited 5 pages without talking to an operator, since maybe he is confused:</p> <pre><code><script> olark('api.rules.defineRule', { // Specify a unique ID for this rule. // This helps the API to keep your rules separate from each other. id: '1', // The description summarizes what this rule does description: "offer help to a visitor after he has browsed 5 pages and hasn't chatted yet", // The condition will be checked whenever there is a relevant change in the chat. // Call the pass() function whenever the criteria is met condition: function(pass) { // Use the Visitor API to get information the page count olark('api.visitor.getDetails', function(details){ if (details.pageCountForThisVisit >= 5 && !details.isConversing) { // The visitor has seen more than 5 pages, and the visitor hasn't started chatting yet pass(); } }); }, // The action will be executed whenever the condition passes. // Limit the number of times this action will trigger using the perPage, perVisit, and perVisitor options. action: function() { olark('api.chat.sendMessageToVisitor', { body: "hi, have any questions about our products?" }); }, // Restrict this action to execute only once per visit perVisit: true }); </script> </code></pre> <h3 id="start-a-conversation-on-specific-pages">Start a conversation on specific pages</h3> <p>Maybe you would like to hide the chatbox on certain pages, but only if the visitor is not already chatting:</p> <pre><code><script> olark('api.rules.defineRule', { // Specify a unique ID for this rule. // This helps the API to keep your rules separate from each other. id: '2', // The description summarizes what this rule does description: "hide the chatbox when the visitor is not chatting and is viewing an unimportant page", // The condition will be checked whenever there is a relevant change in the chat. // Call the pass() function whenever the criteria is met condition: function(pass) { // Check if the visitor is already in conversation // ...and whether they're on a specific page olark('api.visitor.getDetails', function(details){ // Determine whether this page is important // The URL can be whatever you like var isImportantPage = (details.currentPage.url.indexOf('/important-page') >= 0); if (!details.isConversing && !isImportantPage) { // Visitor is not chatting yet // and they are viewing an unimportant page pass(); } }); }, // The action will be executed whenever the condition passes. // Limit the number of times this action will trigger using the perPage, perVisit, and perVisitor options. action: function() { // Hide the chatbox olark('api.box.hide'); }, // Restrict this action to execute only once per page perPage: true }); </script> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Create Targeted Chat rules</div> <pre><code>olark('api.rules.defineRule', { options });</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>options.action</strong><br><span>function that performs the action, e.g. notifying the operator (see examples below)</span></li> <li><strong>options.condition</strong><br><span>function that evaluates a condition and calls pass when true (see examples below)</span></li> <li><strong>options.description</strong><br><span>human-readable description of what this rule does, e.g. 'notifies the operator about important visitors'</span></li> <li><strong>options.id</strong><br><span>unique identifier for this rule, e.g. _important_visitor_rule_1_</span></li> <li><strong>options.perpage</strong><br><span>make this true if the action is only supposed to trigger once per page. OR::</span></li> <li><strong>options.pervisit</strong><br><span>make this true if the action is only supposed to trigger once per visit OR:</span></li> <li><strong>options.pervisitor</strong><br><span>make this true if the action is only supposed to trigger once per visitor</span></li> </ul> </div> </div> <div class="api-call" id="api_visitor_getdetails" data-apiCategory="visitor"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_visitor_getdetails/">Get visitor details</a> </h2> <div class="article-content markdown-content"> <p>Gets the email address, full name, geolocation, and other details for this visitor. The value will be returned to the specified <code>returnCallback</code>.</p> <p>The name, email and phone number fields are the last-known visitor information, either from your pre-chat survey, a completed offline message form, or previously updated via the API.</p> <p>Geolocation information is provided to the best of our knowledge, based on the visitor’s IP.</p> <blockquote> <p><em>Note:</em> As part of our effort to remove personally identifiable information from our API, this call no longer provides access to the visitor’s IP address. Please visit <a href="https://www.olark.com/help/ipaddresses">olark.com/help/ipaddresses</a> to learn more.</p> </blockquote> <h3 id="notify-operators-about-a-certain-visitor">Notify operators about a certain visitor</h3> <p>Let’s say you wanted to know when a particular customer (e.g. Olark Joe) needed your assistance:</p> <pre><code><script> olark('api.visitor.getDetails', function(details){ // Check for an email address if (details.emailAddress == "joe@olark.com") { olark('api.chat.sendNotificationToOperator', { body: "Olark Joe in the house!" }); } }); </script> </code></pre> <h3 id="target-customers-in-costa-rica">Target customers in Costa Rica</h3> <p>Let’s say you are targeting customers in San José, the capital of Costa Rica (not San Jose in California):</p> <pre><code><script> olark('api.visitor.getDetails', function(details){ // Check that both conditions are true if (details.city == "San José" && details.region != "California") { olark('api.chat.sendNotificationToOperator', { body: "this customer might be in San Jose, Costa Rica" }) } }); </script> </code></pre> <h3 id="target-customers-in-japan">Target customers in Japan</h3> <p>Suppose you are targeting customers in Japan. You can either use the country name or the country code:</p> <pre><code><script> olark('api.visitor.getDetails', function(details){ if (details.country == "Japan" || details.countryCode == "JP") { olark('api.chat.sendNotificationToOperator', { body: "this customer might be in Japan" }); } }); </script> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Read the visitor informaton</div> <pre><code>olark('api.visitor.getDetails', callback);</code></pre> <div class="snippet-title">Response</div> <ul class="snippet-list"> <li><strong>details.browser</strong><br><span>the browser that this visitor is using (e.g. 'Chrome 12.1')</span></li> <li><strong>details.city</strong><br><span>approximate city location</span></li> <li><strong>details.conversationbeginpage</strong><br><span>the URL from which the visitor began their conversation"</span></li> <li><strong>details.conversationcount</strong><br><span>total number of times this visitor has chatted with an operator"</span></li> <li><strong>details.country</strong><br><span>approximate country</span></li> <li><strong>details.countrycode</strong><br><span>approximate country (in ISO-standard format, e.g. UK, DE, JP, etc)</span></li> <li><strong>details.currentpage</strong><br><span>the current page the visitor is on (has a title and URL)</span></li> <li><strong>details.customfields.yourfieldnamegoeshere</strong><br><span>you can retrieve any custom fields that you set with api.visitor.updateCustomFields</span></li> <li><strong>details.emailaddress</strong><br><span>visitor's email address</span></li> <li><strong>details.fullname</strong><br><span>visitor's full name</span></li> <li><strong>details.ip</strong><br><span>This will return "not available" in an effort to remove PII from our API.</span></li> <li><strong>details.isconversing</strong><br><span>will be true if the visitor is having a conversation right now"</span></li> <li><strong>details.messagecountacrossallvisits</strong><br><span>number of messages sent and received for this visitor all-time on your site"</span></li> <li><strong>details.messagecountforthisvisit</strong><br><span>number of messages sent and received during this conversation"</span></li> <li><strong>details.operatingsystem</strong><br><span>the operating system that this visitor is using (e.g. Windows, Mac, or Linux)</span></li> <li><strong>details.organization</strong><br><span>organization that this visitor might be affiliated with</span></li> <li><strong>details.pagecountacrossallvisits</strong><br><span>total number of pages that this visitor has viewed all-time on your site</span></li> <li><strong>details.pagecountforthisvisit</strong><br><span>number of pages that this visitor has viewed during this visit</span></li> <li><strong>details.phonenumber</strong><br><span>visitor's phone number</span></li> <li><strong>details.recentpagehistory</strong><br><span>a list of the last 10 pages seen by the visitor (each page has a title and URL)</span></li> <li><strong>details.referredbycampaignever</strong><br><span>will be true if the visitor came to your site from an email or blogging campaign at some point</span></li> <li><strong>details.referredbycampaignthisvisit</strong><br><span>will be true if the visitor came to your site from an email or blogging campaign this visit</span></li> <li><strong>details.referredbypaidadvertisingever</strong><br><span>will be true if the visitor came to your site from a paid advertisement at some point</span></li> <li><strong>details.referredbypaidadvertisingthisvisit</strong><br><span>will be true if the visitor came to your site from a paid advertisement for this visit</span></li> <li><strong>details.referrer</strong><br><span>the URL that referred this visitor to your website (e.g. a Google search, advertisement, blog post, etc)</span></li> <li><strong>details.region</strong><br><span>approximate state or province</span></li> <li><strong>details.searchtextforpreviousvisits</strong><br><span>search text that was typed in Google, Yahoo, or Bing to get to your site in past visits</span></li> <li><strong>details.searchtextforthisvisit</strong><br><span>search text that was typed in Google, Yahoo, or Bing to get to your site</span></li> <li><strong>details.secondssincelastmessage</strong><br><span>seconds since either the visitor or operator sent a message"</span></li> <li><strong>details.secondssincelastmessagetooperator</strong><br><span>seconds since the visitor sent a message"</span></li> <li><strong>details.secondssincelastmessagetovisitor</strong><br><span>seconds since the operator sent a message"</span></li> <li><strong>details.secondssincelastnotificationtooperator</strong><br><span>seconds since the operator last received a notification"</span></li> <li><strong>details.secondsspentacrossallvisits</strong><br><span>total number of seconds that this visitor has spent on your site over all their visits</span></li> <li><strong>details.secondsspentforthisvisit</strong><br><span>number of seconds that this visitor has spent on your site</span></li> <li><strong>details.visitcount</strong><br><span>total number of times this visitor has visited your site</span></li> </ul> </div> </div> <div class="api-call" id="api_visitor_updatecustomfields" data-apiCategory="visitor"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_visitor_updatecustomfields/">Update CRM custom fields</a> </h2> <div class="article-content markdown-content"> <p>If you have custom data that you want to keep track of for a visitor, such as an internal customer ID or some internal data, you can give it to Olark using this API.</p> <blockquote> <p>Note: Custom fields are not sent automatically to CRM integrations. Custom fields will, however, be sent with <a href="https://www.olark.com/help/webhooks">Webhooks</a> by default. Once set up, Custom fields are sent to the CRM only, they do not appear in the <a href="http://chat.olark.com">chat console</a>. For full information on creating custom fields, check out our <a href="https://blog.olark.com/salesforce_integration_for_olark_live_chat">blog post here</a>!</p> </blockquote> <h3 id="adding-a-customer-id">Adding a customer ID</h3> <p>For example, let’s say you have a customer tracking ID that you use for your internal reporting. You can give this to Olark:</p> <pre><code><script> olark('api.visitor.updateCustomFields', { // Replace with your own data internalCustomerId: '2194832109' }); </script> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Set custom fields for the visitor</div> <pre><code>olark('api.visitor.updateCustomFields', { internalCustomerId: string });</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>dictionaryofcustomfields</strong><br><span>a dictionary mapping custom field name=>value</span></li> </ul> </div> </div> <div class="api-call" id="api_visitor_updateemailaddress" data-apiCategory="visitor"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_visitor_updateemailaddress/">Update visitor email</a> </h2> <div class="article-content markdown-content"> <p>Keep track of an email address for this visitor, to link it with your CRM cases and display in the visitor list.</p> <p><img src="https://www.olark.com/img/api/api_updateEmail.gif" alt="Screenshot of API call update email"></p> <h3 id="update-the-visitors-email-address">Update the visitor’s email address</h3> <p>You can grab information from your registered users and send it to Olark.</p> <pre><code><script> olark('api.visitor.updateEmailAddress', { emailAddress: 'johndoe@olark.com' }); </script> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Set the visitor's email</div> <pre><code>olark('api.visitor.updateEmailAddress', { emailAddress: string });</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>options.emailaddress</strong><br><span>the email address to remember</span></li> </ul> </div> </div> <div class="api-call" id="api_visitor_updatefullname" data-apiCategory="visitor"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_visitor_updatefullname/">Update visitor name</a> </h2> <div class="article-content markdown-content"> <p>Keep track of a full name for this visitor, to link it with your CRM cases and display in the buddy list.</p> <p><img src="https://www.olark.com/img/api/api_updateName.gif" alt="Screenshot of API call update name"></p> <h3 id="update-the-visitors-name">Update the visitor’s name</h3> <p>You can grab information from your registered users and send it to Olark.</p> <pre><code><script> olark('api.visitor.updateFullName', { fullName: 'John Doe' }); </script> </code></pre> <p>For example, if you were using PHP and pulled the visitor’s name from your own database, you might write:</p> <pre><code><script> olark('api.visitor.updateFullName', { fullName: '<?php echo $user_name ?>' }); </script> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Set the visitor's name</div> <pre><code>olark('api.visitor.updateFullName', { fullName: string });</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>options.fullname</strong><br><span>the name to remember</span></li> </ul> </div> </div> <div class="api-call" id="api_chat_updatevisitornickname" data-apiCategory="visitor"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_chat_updatevisitornickname/">Update visitor nickname</a> </h2> <div class="article-content markdown-content"> <blockquote> <p><strong>Important Note:</strong><br> <code>updateVisitorNickname</code> is best used to display visitor information other than name and email in the buddy list. To display a name and/or email in the buddy list use <a href="#api.visitor.updateFullName">api.visitor.updateFullName</a> and <a href="#api.visitor.updateEmailAddress">api.visitor.updateEmailAddress</a> respectively.</p> </blockquote> <p>Add information to the visitor’s nickname in the operator’s buddy list. You can only set a ‘snippet’ of the nickname, since other extensions may be trying to update the nickname at the same time.</p> <h3 id="highlight-adwords-referrals-in-your-visitors-list">Highlight AdWords referrals in your visitors list</h3> <p>Let’s say you want to highlight valuable visitors in your buddy list. For example you have already paid money for a visitor to click on your AdWords campaign, or when they search for the term “buying widgets”:</p> <pre><code><script> olark('api.visitor.getDetails', function(details){ if (details.referredByPaidAdvertisingThisVisit) { olark('api.chat.updateVisitorNickname',{ snippet: "AdWords Referral" }) } else if (details.searchTextForThisVisit == "buying widgets") { olark('api.chat.updateVisitorNickname', { snippet: "wants to buy a widget" }) } }); </script></code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Set the visitor's nickname</div> <pre><code>olark('api.chat.updateVisitorNickname', { snippet: '', hidesDefault: true });</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>options.hidesdefault</strong><br><span>(optional) set this to true if you want to hide the default nickname that Olark sets</span></li> <li><strong>options.snippet</strong><br><span>the snippet of text to show as part of the nickname</span></li> </ul> </div> </div> <div class="api-call" id="api_visitor_updatephonenumber" data-apiCategory="visitor"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_visitor_updatephonenumber/">Update visitor phone</a> </h2> <div class="article-content markdown-content"> <p>Keep track of a phone number for this visitor, to link it with your transcripts and display in the visitor list.</p> <h2 id="update-a-visitors-phone-number">Update a visitor’s phone number</h2> <p>You can grab information from your registered users and send it to Olark.</p> <pre><code><script> olark('api.visitor.updatePhoneNumber', { phoneNumber: '(123) 456-7890' }); </script> </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Set the visitor's phone number</div> <pre><code>olark('api.visitor.updatePhoneNumber', { phoneNumber: string });</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>options.phonenumber</strong><br><span>the phone number to remember</span></li> </ul> </div> </div> <div class="api-call" id="api_chat_updatevisitorstatus" data-apiCategory="visitor"> <div class="api-description markdown-content"> <h2 class="post-title"> <a href="https://www.olark.com/api/api_chat_updatevisitorstatus/">Update visitor status</a> </h2> <div class="article-content markdown-content"> <p>Add information to the visitor’s status in the operator’s buddy list. You can only set a ‘snippet’ of the status, since other extensions may be trying to update the status at the same time.</p> <h3 id="display-number-of-items-in-a-shopping-cart">Display number of items in a shopping cart</h3> <p>To show custom information, like the number of items somebody has in their shopping cart:</p> <pre><code><script> olark('api.chat.updateVisitorStatus', { snippet: 'has 10 items in cart' }); </script> </code></pre> <p><img src="https://www.olark.com/img/api/visitorstatus.png" alt="Screenshot of API call visitor status"></p> <p>Do you have multiple pieces of information? Use an array for the snippet:</p> <pre><code><script> olark('api.chat.updateVisitorStatus', { snippet: ['has 10 items in cart', 'value of items is $38'] }); </script> </code></pre> <p>The Olark chat console automatically tries to detect email addresses, storing them as the visitor’s information. In this example, the first item in the snippet array is the equivalent of using the `api.visitor.updateEmailAddress' API call:</p> <pre><code>// Sets email as test@example.com // and "Some text" appears as Advanced Info olark('api.chat.updateVisitorStatus', { snippet: ["test@example.com", "Some text"] }); </code></pre> </div> </div> <div class="api-snippet"> <div class="snippet-title">Set the visitor's status</div> <pre><code>olark('api.chat.updateVisitorStatus', { snippet: '' });</code></pre> <div class="snippet-title">Arguments</div> <ul class="snippet-list"> <li><strong>options.snippet</strong><br><span>the snippet of text to show as part of the status</span></li> </ul> </div> </div> </div> </div> </div> </div> </div> </main> <footer class="footer-main"> <div class="footer-inner"> <div class="footer-column"> <ul class="footer-column-link-list"> <li> <h4 class="footer-column-heading-one">About</h4> </li> <li><a href="https://www.olark.com/help" class="footer-link">Help Center</a></li> <li><a href="https://www.olark.com/api" class="footer-link">JavaScript API</a></li> <li><a href="https://changelog.olark.com" class="footer-link">Product Updates</a></li> <li><a href="https://www.olark.com/tos" class="footer-link">Terms of Service</a></li> <li><a href="https://www.olark.com/privacy-policy" class="footer-link">Privacy Policy</a></li> <li><a href="https://www.olark.com/help/gdpr" class="footer-link">GDPR</a></li> </ul> </div> <div class="footer-column"> <ul class="footer-column-link-list"> <li> <h4 class="footer-column-heading-two">Support</h4> </li> <li><a href="https://www.olark.com/about" class="footer-link">Our Team</a></li> <li><a href="https://www.olark.com/values" class="footer-link">Our Values</a></li> <li><a href="https://www.olark.com/jobs" class="footer-link">Become an Olarker</a></li> <li><a href="https://blog.olark.com/" class="footer-link">Speak: The Olark Blog</a></li> <li><a href="https://www.olark.com/faq" class="footer-link">FAQ</a></li> <li><a href="https://www.olark.com/press" class="footer-link">Press</a></li> </ul> </div> <div class="footer-column"> <ul class="footer-column-link-list"> <li> <h4 class="footer-column-heading-three">Product</h4> </li> <li><a href="https://www.olark.com/features" class="footer-link">Features</a></li> <li><a href="https://www.olark.com/integrations" class="footer-link">Integrations</a></li> <li><a href="https://www.olark.com/pricing" class="footer-link">Pricing</a></li> <li><a href="https://www.olark.com/contact" class="footer-link">Contact</a></li> <li><a href="https://www.olark.com/partners" class="footer-link">Become a Partner</a></li> <li><a href="https://hello.olark.com/olark-demo-videos" class="footer-link">Product Tour</a></li> </ul> </div> <div class="footer-column"> <a href="https://www.olark.com/"> <div class="footer-logo"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 211.3 132.7" aria-label="Olark Logo" role="img"> <title>Olark Logo</title> <path fill="#ffffff" d="M208.9 86.3c-0.8 0.1-1 1.2-4.3 1.4l-7.2 0.5c0 0 0 0 0 0l-131.5 10c-1.4 0.1-2.8 0.8-3.8 1.8l-15 16 0-14.9c0-0.9-0.8-1.6-1.7-1.5l-18 1.4 -21.2 1.4c-2.7 0.2-4.9 2.7-4.9 6.4 0 1.6 0.5 3.5 1.2 3.5 0.8-0.1 1-1.2 4.3-1.4l30.3-2.3c1 0 1.7 0.7 1.7 1.6l0 20.1c0 2.3 2.8 3.2 4.5 1.5l22.3-23.7c1-1.1 2.4-1.8 3.9-1.9l90.3-6.9 45.4-3.2c2.7-0.2 4.9-2.7 4.9-6.4C210.1 88.2 209.6 86.2 208.9 86.3z"/><path fill="#ffffff" d="M203.8 57.9c-1.1 5.2-5 12.9-10.4 13.3 -4.6 0.4-7.1-4.1-8.3-9.1 4.7-3.8 11.2-11 11.2-20 0-6.6-3.2-12.4-10.4-11.8 -5.3 0.4-9.9 5.4-13.7 10.8V4.7c0-2.8-2.5-5-6.3-4.6 -1.6 0.1-3.7 0.8-3.7 1.6s1.2 1 1.2 4.4v53.4c-0.2 0.5-0.4 1-0.5 1.6 -1.1 5.2-3 12.9-8.4 13.3 -3.2 0.3-4.7-2.7-4.7-5.9 0-11.7 5.7-23.2 5.7-24.6 0.5-2.7-2.5-5.5-5.6-6.1 0 0-7.3-1.5-12.7-2.3 -1.3-4.7-4.6-5.8-7.4-5.6 -3 0.2-5.9 2.6-5.9 5.8 0 3.4 2.1 5.7 5 7.1 -0.1 6-0.6 15.7-1.9 20.5 0 0.1 0 0.2 0 0.3 0 0.1 0 0.2-0.1 0.3 -1.1 5.2-3.2 12.9-7.8 13.3 -2.8 0.2-4-2.5-4-5.1V52.7c0-2.8-2.5-5-6.3-4.6 -1.6 0.1-3 1.1-3 2.2 0 0.8 0.5 1.5 0.5 3.7v18c-1.3 3.4-3.4 6.4-6.6 6.6 -4.1 0.3-6.7-3-6.7-9.1 0-16.9 10.4-25.3 19.3-26 1.2-0.1 2.3 0 3.4 0 1.2-0.1 1.5-0.8 1.5-2.8 0-3-2.2-4.7-5.4-4.5C97.6 37.4 84 50.4 84 69.9c0 0.8 0 1.5 0.1 2.3 -1.9 4.1-5 8-8.8 8.3 -4.3 0.3-6.2-2.9-6.2-7.6v-6.8c1.5-1.5 12.2-26 12.2-43.2 0-6.6-0.1-18.8-10.4-18C65 5.4 60.2 12 60.2 20.8v1c-1.9 2-5.8 5.8-9 7.3 -2.6-8-7.5-14.4-16-13.7 -6.3 0.5-10.6 5.9-10.6 12 0 9 7.8 14.1 17.6 13.4l2.2-0.2c0.2 2.4 0.4 4.9 0.4 7.1 -0.1 21.9-7.4 34.9-17.1 35.6 -8.3 0.7-17-8-17-29.2 0-30 14.4-38.5 18.5-41.1 0.2 0.1 0.4 0.1 0.6 0.1 1.1-0.1 1.5-1.3 1.5-2.8 0-2.6-1.5-6-4.1-5.8 -0.5 0-0.9 0.2-1.3 0.3C24.9 5.2 1.3 16.2 1.3 56c0 20.9 8.9 37.4 26 36.1C40.9 91 53.8 76.6 53.8 46.9c0-2.8-0.2-6-0.7-9.2 2-1 4.7-2.9 7.1-5v41.3c0 9.2 4.8 15.1 13.8 14.4 5.3-0.4 9.4-3.7 12.5-7.7 2.3 3.9 6.1 6.2 11.4 5.8 4.4-0.4 7.7-2.7 10.1-5.6 1.8 2.7 4.9 4.4 9 4.1 9.7-0.8 14.4-10.9 16.5-18.7 0-0.1 0.1-0.2 0.1-0.3 2.1-7 2.8-17.2 2.9-21.8l10.6 2c-3.7 10.4-6.3 16.1-6.3 23.6 0 10.3 6.6 12.8 12.1 12.4 4.5-0.4 7.9-2.7 10.4-5.9 0 4.3 3.3 4.8 5.6 4.6 3.4-0.3 3.3-3.1 3.3-5.3V55.5c3.6-12.7 8.9-16.9 11.7-17.1 2.2-0.2 3.7 1.7 3.7 4.6 0 10.8-10.9 15.4-10.9 19 0 7.7 6.1 17.8 15.3 17 10.6-0.8 16.4-13.1 18.5-19.6C211.6 55.6 205.2 50.6 203.8 57.9zM69.1 17.5c0-1.9 0.5-4.7 1.8-4.8 1.9-0.1 3.2 3.3 3.2 11 0 6.4-2.5 22.1-4.9 27.2V17.5zM41.7 32.7c-6.1 0.5-8.7-2.9-8.7-5.8 0-1.3 0.6-3 2.9-3.2 3.6-0.3 6 3.5 7.1 8.8L41.7 32.7z"/> </svg> </div> </a> <ol class="footer-address"> <li> 2810 N Church St., #63602 </li> <li> Wilmington, DE 19802 </li> <li class="copyright"> © Olark </li> </ol> <div class="social-icons"> <a href="https://www.facebook.com/olarklivechat/" target="_blank" rel="noopener" class="footer-social-icon"> <svg width="28" height="28" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-label="Facebook"><title>Facebook</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#5B5757" fill-rule="nonzero"><path d="M28,4.66697778 C28,2.2148 25.7861333,0 23.3333333,0 L4.66666667,0 C2.21386667,0 0,2.2148 0,4.66697778 L0,23.3330222 C0,25.7852 2.21386667,28 4.66697778,28 L14,28 L14,17.4222222 L10.5777778,17.4222222 L10.5777778,12.7555556 L14,12.7555556 L14,10.9374222 C14,7.80173333 16.3544889,4.97777778 19.25,4.97777778 L23.0222222,4.97777778 L23.0222222,9.64444444 L19.25,9.64444444 C18.8371556,9.64444444 18.3555556,10.1456444 18.3555556,10.8963556 L18.3555556,12.7555556 L23.0222222,12.7555556 L23.0222222,17.4222222 L18.3555556,17.4222222 L18.3555556,28 L23.3333333,28 C25.7861333,28 28,25.7852 28,23.3330222 L28,4.66697778 Z"/></g></g></svg> </a> <a href="https://twitter.com/olark" target="_blank" rel="noopener" class="footer-social-icon"> <svg width="28" height="23" viewBox="0 0 28 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-label="Twitter"><title>Twitter</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#5B5757" fill-rule="nonzero"><path d="M28,2.67526769 C26.9694444,3.12587093 25.8636732,3.43146489 24.7018562,3.56789641 C25.8881503,2.86691289 26.7962288,1.7550547 27.2266144,0.434260352 C26.1138431,1.08341615 24.885549,1.55478659 23.5767778,1.81031353 C22.5287451,0.707078244 21.0380196,0.0199094308 19.3845556,0.0199094308 C16.2124118,0.0199094308 13.6403922,2.55788783 13.6403922,5.68633209 C13.6403922,6.13002797 13.6911307,6.5633854 13.7891307,6.97778147 C9.01604575,6.7412159 4.78360784,4.4846783 1.95089542,1.05578673 C1.45572549,1.89144107 1.17403268,2.86515219 1.17403268,3.90455089 C1.17403268,5.87106993 2.18884967,7.60621521 3.72857516,8.62137045 C2.78723529,8.59030993 1.90189542,8.33478299 1.12681699,7.91004847 L1.12681699,7.98083756 C1.12681699,10.7259914 3.10745098,13.0170658 5.73368627,13.5385033 C5.25251634,13.6662667 4.74513072,13.7370558 4.22022222,13.7370558 C3.84931373,13.7370558 3.49062092,13.7008035 3.1389281,13.63173 C3.87026797,15.8848364 5.99090196,17.5232788 8.50344444,17.5681991 C6.53854902,19.087546 4.06100654,19.9905132 1.37003268,19.9905132 C0.906385621,19.9905132 0.44969281,19.9628838 4.5751634e-05,19.9128168 C2.5423268,21.5236748 5.56051634,22.4628943 8.80439869,22.4628943 C19.3706471,22.4628943 25.1463333,13.8268514 25.1463333,6.33724858 L25.1270719,5.60348899 C26.2555817,4.80923362 27.2318758,3.81132419 28,2.67526769 Z"/></g></g></svg> </a> <a href="https://www.instagram.com/olarklivechat/" target="_blank" rel="noopener" class="footer-social-icon"> <svg width="28" height="28" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-label="Instagram"><title>Instagram</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#5B5757" fill-rule="nonzero"><path d="M20.2728466,0 L7.72682211,0 C3.46625498,0 0,3.4664206 0,7.72698773 L0,20.2730123 C0,24.533745 3.46625498,28 7.72682211,28 L20.2728466,28 C24.533745,28 28,24.5335794 28,20.2730123 L28,7.72698773 C28.0001656,3.4664206 24.533745,0 20.2728466,0 Z M25.5158699,20.2730123 C25.5158699,23.1639044 23.1639044,25.5157043 20.2730123,25.5157043 L7.72682211,25.5157043 C4.83609563,25.5158699 2.4842957,23.1639044 2.4842957,20.2730123 L2.4842957,7.72698773 C2.4842957,4.83626125 4.83609563,2.4842957 7.72682211,2.4842957 L20.2728466,2.4842957 C23.1637387,2.4842957 25.5157043,4.83626125 25.5157043,7.72698773 L25.5157043,20.2730123 L25.5158699,20.2730123 Z"/><path d="M14,6.75294118 C10.0039116,6.75294118 6.75294118,10.0039862 6.75294118,14.0001664 C6.75294118,17.9961802 10.0039116,21.2470588 14,21.2470588 C17.9960884,21.2470588 21.2470588,17.9961802 21.2470588,14.0001664 C21.2470588,10.0039862 17.9960884,6.75294118 14,6.75294118 Z M14,18.7514634 C11.380026,18.7514634 9.24831299,16.6200342 9.24831299,14 C9.24831299,11.3797994 11.3798596,9.24820391 14,9.24820391 C16.6201404,9.24820391 18.751687,11.3797994 18.751687,14 C18.751687,16.6200342 16.619974,18.7514634 14,18.7514634 Z"/><path d="M21.5764706,4.61176471 C21.1004706,4.61176471 20.6328706,4.80447059 20.2967059,5.14211765 C19.9588941,5.47811765 19.7647059,5.94588235 19.7647059,6.42352941 C19.7647059,6.89969412 19.9590588,7.36729412 20.2967059,7.70494118 C20.6327059,8.04094118 21.1004706,8.23529412 21.5764706,8.23529412 C22.0541176,8.23529412 22.5202353,8.04094118 22.8578824,7.70494118 C23.1955294,7.36729412 23.3882353,6.89952941 23.3882353,6.42352941 C23.3882353,5.94588235 23.1955294,5.47811765 22.8578824,5.14211765 C22.5218824,4.80447059 22.0541176,4.61176471 21.5764706,4.61176471 Z"/></g></g></svg> </a> <a href="https://www.linkedin.com/company/469764/" target="_blank" rel="noopener" class="footer-social-icon"> <svg width="28" height="28" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-label="Linkedin"><title>Linkedin</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#5B5757" fill-rule="nonzero"><path d="M25.2,0 L2.8,0 C1.26,0 0,1.24508876 0,2.76686391 L0,24.9017751 C0,26.4235503 1.26,27.6686391 2.8,27.6686391 L25.2,27.6686391 C26.74,27.6686391 28,26.4235503 28,24.9017751 L28,2.76686391 C28,1.24508876 26.74,0 25.2,0 Z M8.4,23.5183432 L4.2,23.5183432 L4.2,11.0674556 L8.4,11.0674556 L8.4,23.5183432 Z M6.3,8.7156213 C4.9,8.7156213 3.78,7.60887574 3.78,6.22544379 C3.78,4.84201183 4.9,3.73526627 6.3,3.73526627 C7.7,3.73526627 8.82,4.84201183 8.82,6.22544379 C8.82,7.60887574 7.7,8.7156213 6.3,8.7156213 Z M23.8,23.5183432 L19.6,23.5183432 L19.6,16.1861538 C19.6,15.0794625 18.62,14.1110059 17.5,14.1110059 C16.38,14.1110059 15.4,15.0794625 15.4,16.1861538 L15.4,23.5183432 L11.2,23.5183432 L11.2,11.0674556 L15.4,11.0674556 L15.4,12.727574 C16.1,11.6208284 17.64,10.7907692 18.9,10.7907692 C21.56,10.7907692 23.8,13.0042604 23.8,15.6327811 L23.8,23.5183432 Z"/></g></g></svg> </a> </div> </div> </div> <div class="footer-inner-mobile mobile-footer-menu"> <input class="mobile-footer-toggle" id="mobile-footer-resources" type="checkbox"> <label class="mobile-footer-header" data-for="mobile-footer-resources"> About </label> <ul class="footer-column-link-list"> <li><a href="https://www.olark.com/help" class="footer-link">Help Center</a></li> <li><a href="https://www.olark.com/integrations" class="footer-link">Integrations</a></li> <li><a href="https://www.olark.com/api" class="footer-link">JavaScript API</a></li> <li><a href="https://www.olark.com/tos" class="footer-link">Terms of Service</a></li> <li><a href="https://www.olark.com/privacy-policy" class="footer-link">Privacy Policy</a></li> <li><a href="https://changelog.olark.com" class="footer-link">Product Updates</a></li> </ul> <input class="mobile-footer-toggle" id="mobile-footer-our-company" type="checkbox"> <button class="mobile-footer-header" data-for="mobile-footer-our-company"> Support </button> <ul class="footer-column-link-list"> <li><a href="https://www.olark.com/about" class="footer-link">Our Team</a></li> <li><a href="https://www.olark.com/values" class="footer-link">Our Values</a></li> <li><a href="https://www.olark.com/jobs" class="footer-link">Become an Olarker</a></li> <li><a href="https://blog.olark.com/" class="footer-link">Speak: The Olark Blog</a></li> <li><a href="https://www.olark.com/faq" class="footer-link">FAQ</a></li> </ul> <input class="mobile-footer-toggle" id="mobile-footer-get-started" type="checkbox"> <button class="mobile-footer-header" data-for="mobile-footer-get-started"> Product </button> <ul class="footer-column-link-list"> <li><a href="https://www.olark.com/features" class="footer-link">Features</a></li> <li><a href="https://www.olark.com/pricing" class="footer-link">Pricing</a></li> <li><a href="https://www.olark.com/contact" class="footer-link">Contact</a></li> <li><a href="https://www.olark.com/partners" class="footer-link">Become a Partner</a></li> <li><a href="https://hello.olark.com/olark-demo-videos" class="footer-link">Product Tour</a></li> </ul> <div class="footer-column-logo-mobile"> <a href="https://www.olark.com/"> <div class="footer-logo-mobile"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 211.3 132.7" aria-label="Olark Logo" role="img"> <title>Olark Logo</title> <path fill="#ffffff" d="M208.9 86.3c-0.8 0.1-1 1.2-4.3 1.4l-7.2 0.5c0 0 0 0 0 0l-131.5 10c-1.4 0.1-2.8 0.8-3.8 1.8l-15 16 0-14.9c0-0.9-0.8-1.6-1.7-1.5l-18 1.4 -21.2 1.4c-2.7 0.2-4.9 2.7-4.9 6.4 0 1.6 0.5 3.5 1.2 3.5 0.8-0.1 1-1.2 4.3-1.4l30.3-2.3c1 0 1.7 0.7 1.7 1.6l0 20.1c0 2.3 2.8 3.2 4.5 1.5l22.3-23.7c1-1.1 2.4-1.8 3.9-1.9l90.3-6.9 45.4-3.2c2.7-0.2 4.9-2.7 4.9-6.4C210.1 88.2 209.6 86.2 208.9 86.3z"/><path fill="#ffffff" d="M203.8 57.9c-1.1 5.2-5 12.9-10.4 13.3 -4.6 0.4-7.1-4.1-8.3-9.1 4.7-3.8 11.2-11 11.2-20 0-6.6-3.2-12.4-10.4-11.8 -5.3 0.4-9.9 5.4-13.7 10.8V4.7c0-2.8-2.5-5-6.3-4.6 -1.6 0.1-3.7 0.8-3.7 1.6s1.2 1 1.2 4.4v53.4c-0.2 0.5-0.4 1-0.5 1.6 -1.1 5.2-3 12.9-8.4 13.3 -3.2 0.3-4.7-2.7-4.7-5.9 0-11.7 5.7-23.2 5.7-24.6 0.5-2.7-2.5-5.5-5.6-6.1 0 0-7.3-1.5-12.7-2.3 -1.3-4.7-4.6-5.8-7.4-5.6 -3 0.2-5.9 2.6-5.9 5.8 0 3.4 2.1 5.7 5 7.1 -0.1 6-0.6 15.7-1.9 20.5 0 0.1 0 0.2 0 0.3 0 0.1 0 0.2-0.1 0.3 -1.1 5.2-3.2 12.9-7.8 13.3 -2.8 0.2-4-2.5-4-5.1V52.7c0-2.8-2.5-5-6.3-4.6 -1.6 0.1-3 1.1-3 2.2 0 0.8 0.5 1.5 0.5 3.7v18c-1.3 3.4-3.4 6.4-6.6 6.6 -4.1 0.3-6.7-3-6.7-9.1 0-16.9 10.4-25.3 19.3-26 1.2-0.1 2.3 0 3.4 0 1.2-0.1 1.5-0.8 1.5-2.8 0-3-2.2-4.7-5.4-4.5C97.6 37.4 84 50.4 84 69.9c0 0.8 0 1.5 0.1 2.3 -1.9 4.1-5 8-8.8 8.3 -4.3 0.3-6.2-2.9-6.2-7.6v-6.8c1.5-1.5 12.2-26 12.2-43.2 0-6.6-0.1-18.8-10.4-18C65 5.4 60.2 12 60.2 20.8v1c-1.9 2-5.8 5.8-9 7.3 -2.6-8-7.5-14.4-16-13.7 -6.3 0.5-10.6 5.9-10.6 12 0 9 7.8 14.1 17.6 13.4l2.2-0.2c0.2 2.4 0.4 4.9 0.4 7.1 -0.1 21.9-7.4 34.9-17.1 35.6 -8.3 0.7-17-8-17-29.2 0-30 14.4-38.5 18.5-41.1 0.2 0.1 0.4 0.1 0.6 0.1 1.1-0.1 1.5-1.3 1.5-2.8 0-2.6-1.5-6-4.1-5.8 -0.5 0-0.9 0.2-1.3 0.3C24.9 5.2 1.3 16.2 1.3 56c0 20.9 8.9 37.4 26 36.1C40.9 91 53.8 76.6 53.8 46.9c0-2.8-0.2-6-0.7-9.2 2-1 4.7-2.9 7.1-5v41.3c0 9.2 4.8 15.1 13.8 14.4 5.3-0.4 9.4-3.7 12.5-7.7 2.3 3.9 6.1 6.2 11.4 5.8 4.4-0.4 7.7-2.7 10.1-5.6 1.8 2.7 4.9 4.4 9 4.1 9.7-0.8 14.4-10.9 16.5-18.7 0-0.1 0.1-0.2 0.1-0.3 2.1-7 2.8-17.2 2.9-21.8l10.6 2c-3.7 10.4-6.3 16.1-6.3 23.6 0 10.3 6.6 12.8 12.1 12.4 4.5-0.4 7.9-2.7 10.4-5.9 0 4.3 3.3 4.8 5.6 4.6 3.4-0.3 3.3-3.1 3.3-5.3V55.5c3.6-12.7 8.9-16.9 11.7-17.1 2.2-0.2 3.7 1.7 3.7 4.6 0 10.8-10.9 15.4-10.9 19 0 7.7 6.1 17.8 15.3 17 10.6-0.8 16.4-13.1 18.5-19.6C211.6 55.6 205.2 50.6 203.8 57.9zM69.1 17.5c0-1.9 0.5-4.7 1.8-4.8 1.9-0.1 3.2 3.3 3.2 11 0 6.4-2.5 22.1-4.9 27.2V17.5zM41.7 32.7c-6.1 0.5-8.7-2.9-8.7-5.8 0-1.3 0.6-3 2.9-3.2 3.6-0.3 6 3.5 7.1 8.8L41.7 32.7z"/> </svg> </div> </a> <p class="footer-address"> 2810 N Church St., #63602 <br/> Wilmington, DE 19802 <br/> <span class="copyright"> © Olark </span> </p> <div class="social-icons"> <a href="https://www.facebook.com/olarklivechat/" target="_blank" rel="noopener" class="footer-social-icon"> <svg width="28" height="28" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-label="Facebook"><title>Facebook</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#5B5757" fill-rule="nonzero"><path d="M28,4.66697778 C28,2.2148 25.7861333,0 23.3333333,0 L4.66666667,0 C2.21386667,0 0,2.2148 0,4.66697778 L0,23.3330222 C0,25.7852 2.21386667,28 4.66697778,28 L14,28 L14,17.4222222 L10.5777778,17.4222222 L10.5777778,12.7555556 L14,12.7555556 L14,10.9374222 C14,7.80173333 16.3544889,4.97777778 19.25,4.97777778 L23.0222222,4.97777778 L23.0222222,9.64444444 L19.25,9.64444444 C18.8371556,9.64444444 18.3555556,10.1456444 18.3555556,10.8963556 L18.3555556,12.7555556 L23.0222222,12.7555556 L23.0222222,17.4222222 L18.3555556,17.4222222 L18.3555556,28 L23.3333333,28 C25.7861333,28 28,25.7852 28,23.3330222 L28,4.66697778 Z"/></g></g></svg> </a> <a href="https://twitter.com/olark" target="_blank" rel="noopener" class="footer-social-icon"> <svg width="28" height="23" viewBox="0 0 28 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-label="Twitter"><title>Twitter</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#5B5757" fill-rule="nonzero"><path d="M28,2.67526769 C26.9694444,3.12587093 25.8636732,3.43146489 24.7018562,3.56789641 C25.8881503,2.86691289 26.7962288,1.7550547 27.2266144,0.434260352 C26.1138431,1.08341615 24.885549,1.55478659 23.5767778,1.81031353 C22.5287451,0.707078244 21.0380196,0.0199094308 19.3845556,0.0199094308 C16.2124118,0.0199094308 13.6403922,2.55788783 13.6403922,5.68633209 C13.6403922,6.13002797 13.6911307,6.5633854 13.7891307,6.97778147 C9.01604575,6.7412159 4.78360784,4.4846783 1.95089542,1.05578673 C1.45572549,1.89144107 1.17403268,2.86515219 1.17403268,3.90455089 C1.17403268,5.87106993 2.18884967,7.60621521 3.72857516,8.62137045 C2.78723529,8.59030993 1.90189542,8.33478299 1.12681699,7.91004847 L1.12681699,7.98083756 C1.12681699,10.7259914 3.10745098,13.0170658 5.73368627,13.5385033 C5.25251634,13.6662667 4.74513072,13.7370558 4.22022222,13.7370558 C3.84931373,13.7370558 3.49062092,13.7008035 3.1389281,13.63173 C3.87026797,15.8848364 5.99090196,17.5232788 8.50344444,17.5681991 C6.53854902,19.087546 4.06100654,19.9905132 1.37003268,19.9905132 C0.906385621,19.9905132 0.44969281,19.9628838 4.5751634e-05,19.9128168 C2.5423268,21.5236748 5.56051634,22.4628943 8.80439869,22.4628943 C19.3706471,22.4628943 25.1463333,13.8268514 25.1463333,6.33724858 L25.1270719,5.60348899 C26.2555817,4.80923362 27.2318758,3.81132419 28,2.67526769 Z"/></g></g></svg> </a> <a href="https://www.instagram.com/olarklivechat/" target="_blank" rel="noopener" class="footer-social-icon"> <svg width="28" height="28" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-label="Instagram"><title>Instagram</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#5B5757" fill-rule="nonzero"><path d="M20.2728466,0 L7.72682211,0 C3.46625498,0 0,3.4664206 0,7.72698773 L0,20.2730123 C0,24.533745 3.46625498,28 7.72682211,28 L20.2728466,28 C24.533745,28 28,24.5335794 28,20.2730123 L28,7.72698773 C28.0001656,3.4664206 24.533745,0 20.2728466,0 Z M25.5158699,20.2730123 C25.5158699,23.1639044 23.1639044,25.5157043 20.2730123,25.5157043 L7.72682211,25.5157043 C4.83609563,25.5158699 2.4842957,23.1639044 2.4842957,20.2730123 L2.4842957,7.72698773 C2.4842957,4.83626125 4.83609563,2.4842957 7.72682211,2.4842957 L20.2728466,2.4842957 C23.1637387,2.4842957 25.5157043,4.83626125 25.5157043,7.72698773 L25.5157043,20.2730123 L25.5158699,20.2730123 Z"/><path d="M14,6.75294118 C10.0039116,6.75294118 6.75294118,10.0039862 6.75294118,14.0001664 C6.75294118,17.9961802 10.0039116,21.2470588 14,21.2470588 C17.9960884,21.2470588 21.2470588,17.9961802 21.2470588,14.0001664 C21.2470588,10.0039862 17.9960884,6.75294118 14,6.75294118 Z M14,18.7514634 C11.380026,18.7514634 9.24831299,16.6200342 9.24831299,14 C9.24831299,11.3797994 11.3798596,9.24820391 14,9.24820391 C16.6201404,9.24820391 18.751687,11.3797994 18.751687,14 C18.751687,16.6200342 16.619974,18.7514634 14,18.7514634 Z"/><path d="M21.5764706,4.61176471 C21.1004706,4.61176471 20.6328706,4.80447059 20.2967059,5.14211765 C19.9588941,5.47811765 19.7647059,5.94588235 19.7647059,6.42352941 C19.7647059,6.89969412 19.9590588,7.36729412 20.2967059,7.70494118 C20.6327059,8.04094118 21.1004706,8.23529412 21.5764706,8.23529412 C22.0541176,8.23529412 22.5202353,8.04094118 22.8578824,7.70494118 C23.1955294,7.36729412 23.3882353,6.89952941 23.3882353,6.42352941 C23.3882353,5.94588235 23.1955294,5.47811765 22.8578824,5.14211765 C22.5218824,4.80447059 22.0541176,4.61176471 21.5764706,4.61176471 Z"/></g></g></svg> </a> <a href="https://www.linkedin.com/company/469764/" target="_blank" rel="noopener" class="footer-social-icon"> <svg width="28" height="28" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-label="Linkedin"><title>Linkedin</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#5B5757" fill-rule="nonzero"><path d="M25.2,0 L2.8,0 C1.26,0 0,1.24508876 0,2.76686391 L0,24.9017751 C0,26.4235503 1.26,27.6686391 2.8,27.6686391 L25.2,27.6686391 C26.74,27.6686391 28,26.4235503 28,24.9017751 L28,2.76686391 C28,1.24508876 26.74,0 25.2,0 Z M8.4,23.5183432 L4.2,23.5183432 L4.2,11.0674556 L8.4,11.0674556 L8.4,23.5183432 Z M6.3,8.7156213 C4.9,8.7156213 3.78,7.60887574 3.78,6.22544379 C3.78,4.84201183 4.9,3.73526627 6.3,3.73526627 C7.7,3.73526627 8.82,4.84201183 8.82,6.22544379 C8.82,7.60887574 7.7,8.7156213 6.3,8.7156213 Z M23.8,23.5183432 L19.6,23.5183432 L19.6,16.1861538 C19.6,15.0794625 18.62,14.1110059 17.5,14.1110059 C16.38,14.1110059 15.4,15.0794625 15.4,16.1861538 L15.4,23.5183432 L11.2,23.5183432 L11.2,11.0674556 L15.4,11.0674556 L15.4,12.727574 C16.1,11.6208284 17.64,10.7907692 18.9,10.7907692 C21.56,10.7907692 23.8,13.0042604 23.8,15.6327811 L23.8,23.5183432 Z"/></g></g></svg> </a> </div> </div> </div> </footer> </div> <script type="text/javascript"> ;(function(o,l,a,r,k,y){if(o.olark)return; r="script";y=l.createElement(r);r=l.getElementsByTagName(r)[0]; y.async=1;y.src="//"+a;r.parentNode.insertBefore(y,r); y=o.olark=function(){k.s.push(arguments);k.t.push(+new Date)}; y.extend=function(i,j){y("extend",i,j)}; y.identify=function(i){y("identify",k.i=i)}; y.configure=function(i,j){y("configure",i,j);k.c[i]=j}; k=y._={s:[],t:[+new Date],c:{},l:a}; })(window,document,"static.olark.com/jsclient/loader.js"); olark.identify('9353-431-10-4341'); </script> <script> window.callbacksWhenVisitorHasConsented = []; window.callbacksWhenVisitorHasConsented.push(function () { analytics.load("skpn2o50ooslt1t0endk"); }); (function(){ function getParameterByName(name, url) { var href = url || document.location.href; var query = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + query + "(=([^&#]*)|&|#|$)"); var results = regex.exec(href); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, " ")); } function addUTMParametersToDict(props) { props = props || {}; var utm_source = getParameterByName('utm_source'); var utm_campaign = getParameterByName('utm_campaign'); var utm_medium = getParameterByName('utm_medium'); var utm_term = getParameterByName('utm_term'); var utm_content = getParameterByName('utm_content'); if (utm_source){ props.utm_source = utm_source; } if (utm_campaign){ props.utm_campaign = utm_campaign; } if (utm_medium){ props.utm_medium = utm_medium; } if (utm_term){ props.utm_term = utm_term; } if (utm_content){ props.utm_content = utm_content; } return props; } if((getParameterByName("utm_source") || getParameterByName("utm_campaign")) && analytics.load){ analytics.load("skpn2o50ooslt1t0endk"); } var pageName; var props = { path:document.location.pathname, url:document.location.href}; if(document.head.querySelector) { var metaTag = document.head.querySelector("meta[name=pageName]"); if(metaTag) { pageName = metaTag.content; if(metaTag.dataset.analyticsEventVariant){ props.variant = metaTag.dataset.analyticsEventVariant; } } }; addUTMParametersToDict(props); analytics.page(pageName, props); })(); </script> <script async type="text/javascript" src="//static.olark.com/a/cookie-consent/cookie-consent.js"></script> </body> </html>

CINXE.COM

JavaScript API | Olark