CINXE.COM

<!DOCTYPE html><html data-wf-domain="webflow.olark.com" data-wf-page="65c2c69fb033277667d77197" data-wf-site="646d3c484b3d75dd99420842" lang="en" data-wf-collection="65c2c69fb033277667d771ad" data-wf-item-slug="addimage"><head><meta charset="utf-8"/><title>Olark: Adding a Click-to-Chat Link</title><meta content="Make any element on your site open the chatbox when clicked." name="description"/><meta content="Olark: Adding a Click-to-Chat Link" property="og:title"/><meta content="Make any element on your site open the chatbox when clicked." property="og:description"/><meta content="Olark: Adding a Click-to-Chat Link" property="twitter:title"/><meta content="Make any element on your site open the chatbox when clicked." property="twitter:description"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><link href="https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/css/rhis-sublime-site.a57c441fa.min.css" rel="stylesheet" type="text/css"/><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/6480dc65df516eb6106007b0_favicon-32.png" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/64879caf1b12ddf35a9268d6_Olark-round-square.png" rel="apple-touch-icon"/><link href="https://www.olark.com/help/addimage" rel="canonical"/> <style> * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> <script> !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","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="z7c2qeb2j7";analytics.SNIPPET_VERSION="4.15.2"; window.callbacksWhenVisitorHasConsented = []; window.callbacksWhenVisitorHasConsented.push(function () { analytics.load("z7c2qeb2j7"); }); analytics.page(); }}(); </script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/a11y-light.min.css"/>  <script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-toc@1/toc.js"></script></head><body><div class="page-wrapper"><div class="global-styles w-embed"><style> /* Make text look crisper and more legible in all browsers */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Focus state style for keyboard navigation for the focusable elements */ *[tabindex]:focus-visible, input[type="file"]:focus-visible { outline: 0.188rem solid #00d17e; outline-offset: 0rem; } /* Get rid of top margin on first element in any rich text element */ .w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child { margin-top: 0 !important; } /* Get rid of bottom margin on last element in any rich text element */ .w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child { margin-bottom: 0 !important; } /* A little polish & readability improvements for rich text elements */ .text-rich-text li { margin-bottom: 0.25rem; } .text-rich-text h3 { margin-top: 3rem; } .w-richtext figure { max-width: 100%; } /* Style code blocks in rich text */ pre { border-radius: 0.25rem; background: #f7f2fd; padding: 0.75rem; margin-bottom: 1.5rem; white-space: pre-wrap; overflow: auto; width: 100%; font-size: .85em; } code { font-size: .85em; } /* Prevent all click and hover interaction with an element */ .pointer-events-off { pointer-events: none; } /* Enables all click and hover interaction with an element */ .pointer-events-on { pointer-events: auto; } /* Create a class of .div-square which maintains a 1:1 dimension of a div */ .div-square::after { content: ""; display: block; padding-bottom: 100%; } /* Make sure containers never lose their center alignment */ .container-medium,.container-small, .container-large { margin-right: auto !important; margin-left: auto !important; } /*Styling Swifttype search results*/ .st-ui-type-heading { font-size: 1.5rem; } .st-ui-type-detail { font-size: 1rem; color: #000; } a.st-ui-result:before { border-color: #3e3582; } a.st-ui-result .st-ui-type-detail { max-height: 3rem; } .st-ui-type-detail-bold { font-size: 1rem; color: #272d3f; } .st-ui-footer { padding-bottom: 1rem; border-bottom: solid 1px #474750; } .st-ui-type-heading { font-size: 1.25rem; } .st-ui-type-detail { font-size: 1rem; } /* Make the following elements inherit typography styles from the parent and not have hardcoded values. Important: You will not be able to style for example "All Links" in Designer with this CSS applied. Uncomment this CSS to use it in the project. Leave this message for future hand-off. */ /* a, .w-input, .w-select, .w-tab-link, .w-nav-link, .w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link { color: inherit; text-decoration: inherit; font-size: inherit; } */ /* Apply "..." after 3 lines of text */ .text-style-3lines { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* Apply "..." after 2 lines of text */ .text-style-2lines { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Adds inline flex display */ .display-inlineflex { display: inline-flex; } /* These classes are never overwritten */ .hide { display: none !important; } @media screen and (max-width: 991px) { .hide, .hide-tablet { display: none !important; } } @media screen and (max-width: 767px) { .hide-mobile-landscape{ display: none !important; } } @media screen and (max-width: 479px) { .hide-mobile{ display: none !important; } } .margin-0 { margin: 0rem !important; } .padding-0 { padding: 0rem !important; } .spacing-clean { padding: 0rem !important; margin: 0rem !important; } .margin-top { margin-right: 0rem !important; margin-bottom: 0rem !important; margin-left: 0rem !important; } .padding-top { padding-right: 0rem !important; padding-bottom: 0rem !important; padding-left: 0rem !important; } .margin-right { margin-top: 0rem !important; margin-bottom: 0rem !important; margin-left: 0rem !important; } .padding-right { padding-top: 0rem !important; padding-bottom: 0rem !important; padding-left: 0rem !important; } .margin-bottom { margin-top: 0rem !important; margin-right: 0rem !important; margin-left: 0rem !important; } .padding-bottom { padding-top: 0rem !important; padding-right: 0rem !important; padding-left: 0rem !important; } .margin-left { margin-top: 0rem !important; margin-right: 0rem !important; margin-bottom: 0rem !important; } .padding-left { padding-top: 0rem !important; padding-right: 0rem !important; padding-bottom: 0rem !important; } .margin-horizontal { margin-top: 0rem !important; margin-bottom: 0rem !important; } .padding-horizontal { padding-top: 0rem !important; padding-bottom: 0rem !important; } .margin-vertical { margin-right: 0rem !important; margin-left: 0rem !important; } .padding-vertical { padding-right: 0rem !important; padding-left: 0rem !important; } </style></div><section class="hello_bar-container"><div class="container-large"><div class="hello_bar-text-container"><div class="hello_bar-text">Provide 24/7 affordable customer service with AI-powered chat.</div><a href="https://www.olark.com/aiden-chatbot?utm_source=marketingoutreach&utm_medium=hellobar&utm_campaign=EID082hellobar-AIcustomerservice" class="text-weight-semibold text-color-purple">Connect to learn more</a></div></div></section><div id="nav" data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="nav w-nav"><div class="container-large w-container"><a href="/" class="nav_brand_link w-nav-brand"><img src="https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/6633e36dd87b8cf67a0b0e22_Olark_poppins_white.svg" loading="lazy" width="125" height="Auto" alt="" class="brand_logo"/></a><nav role="navigation" class="nav_menu_links w-nav-menu"><div data-hover="false" data-delay="0" class="dropdown w-dropdown"><div class="nav_link w-dropdown-toggle"><div class="icon w-icon-dropdown-toggle"></div><div class="button_text">Features</div></div><nav class="nav_dropdown_list w-dropdown-list"><a href="/features" class="nav_link-dropdown w-dropdown-link">Overview</a><a href="/chatbot-copilot" class="nav_link-dropdown w-dropdown-link">Chatbots</a><a href="/features/customization" class="nav_link-dropdown w-dropdown-link">Customization</a><a href="/features/automated" class="nav_link-dropdown w-dropdown-link">Automation</a><a href="/features/reporting" class="nav_link-dropdown w-dropdown-link">Reporting</a><a href="/features/searchable-transcripts" class="nav_link-dropdown w-dropdown-link">Searchable Transcripts</a><a href="/features/custom-forms" class="nav_link-dropdown w-dropdown-link">Custom Forms</a><a href="/features/realtime" class="nav_link-dropdown w-dropdown-link">Real-Time Engagement</a><a href="/all-powerups" class="nav_link-dropdown w-dropdown-link">Power-Ups</a><a href="/features/team-management" class="nav_link-dropdown w-dropdown-link">Team Management</a><a href="/ada-accessible-live-chat" class="nav_link-dropdown w-dropdown-link">Accessible Live Chat</a></nav></div><div data-hover="false" data-delay="0" class="dropdown w-dropdown"><div class="nav_link w-dropdown-toggle"><div class="icon w-icon-dropdown-toggle"></div><div class="button_text">How To</div></div><nav class="nav_dropdown_list w-dropdown-list"><a href="/ecommerce" class="nav_link-dropdown w-dropdown-link">Increase Sales</a><a href="/live-chat-lead-generation" class="nav_link-dropdown w-dropdown-link">Generate Leads</a><a href="/customer-service" class="nav_link-dropdown w-dropdown-link">Provide Great Service</a><a href="/live-chat-for-higher-education" class="nav_link-dropdown w-dropdown-link">Engage Students</a><a href="/tips-for-remote-managers-and-going-remote-guide" class="nav_link-dropdown w-dropdown-link">Manage a Remote Team</a></nav></div><a href="/chatbot-copilot" class="nav_link w-nav-link">Chatbots</a><a href="/pricing" class="nav_link w-nav-link">Pricing</a><a href="/case-studies" class="nav_link w-nav-link">Case Studies</a><a href="/integrations" class="nav_link w-nav-link">Integrations</a><a href="/login" class="nav_link w-nav-link">Log in</a><a href="/signup/create_new_account/trial" class="nav_link nav_button w-nav-link">Free Trial</a></nav><div class="menu-button w-nav-button"><div class="icon-2 w-icon-nav-menu"></div></div></div></div><main class="main-wrapper"><div class="padding-global"><div class="container-large"><div class="help_page-layout"><div class="help_content-wrapper"><main class="section_post-content"><div class="help-container"><nav aria-label="breadcrumb" class="help_breadcrumbs"><a href="/help" class="help_breadcrumbs-link w-inline-block"><div class="help_breadcrumbs-link-text">HELP</div></a><img src="https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/648c8589705dbf74221e0532_rightcarat.svg" loading="lazy" alt="" class="help_breadcrumbs-carat"/><a href="/categories/getting-started" class="help_breadcrumbs-link w-inline-block"><div aria-current="page" class="help_breadcrumbs-link-text">Getting Started</div></a></nav><div class="help_article-title"><h1 class="heading-style-h2 text-color-purple">Adding a Click-to-Chat Link </h1></div><div fs-toc-offsettop="8rem" fs-richtext-element="rich-text" fs-toc-element="contents" class="text-rich-text w-richtext"><p>Being able to make any image or link bring up the Olark chat box lets you highlight your live chat service anywhere on your site. As with all the examples below, we recommend <a href="https://www.olark.com/customize/advanced">enabling the "Hide the chatbox by default" option</a> so that your chat box is hidden until someone clicks the link.</p><p><strong><em>Note:</em></strong><em> You need to be on a paid account in order to enable </em><strong><em>Hide the chatbox by default</em></strong><em> setting.</em></p><p>If you send a message to your visitor, either as an agent or using an <a href="https://www.olark.com/help/automation-rules/" title="Direct link to Automation Rules help center article.">Automation Rule</a>, the chat box will automatically appear and expand itself.</p><p>‍</p><p>This article contains four short guides with examples. </p><h2>Click-to-Chat Link</h2><p>This click-to-chat link makes use of the <a href="https://www.olark.com/documentation">Olark Javascript API</a>. You can modify or hide the link itself when your agents are away by using the <a href="https://www.olark.com/api#api_chat_onoperatorsaway">api.chat.onOperatorsAway</a> call.</p><ul role="list"><li>Copy the following HTML code:</li></ul><div class="w-embed"><pre><code>  <a href="javascript:void(0);" onclick="olark('api.box.expand')"> Click here to chat!</a>  </code></pre></div><ul role="list"><li>Paste the code in to your website source anywhere between the two body tags.</li><li>Save your page and reload.</li></ul><p>It should look something like this:</p><figure class="w-richtext-align-normal w-richtext-figure-type-image"><div><img alt="Image of a webpage with an embedded "click here to chat" link" src="https://cdn.prod.website-files.com/646d3c494b3d75dd99420891/64b017b383d1a8a913f82ea8_addimage01.png"/></div></figure><h2>Click-to-Chat Image</h2><ul role="list"><li>Copy the following HTML code:</li></ul><div class="w-embed"><pre><code>  <a href="javascript:void(0);" onclick="olark('api.box.expand')"> <img src="https://static.olark.com/imageservice/library/thumbnails/simple/hummingbird-attention-woman-2.jpg.thumb-200-200.png"> </a>  </code></pre></div><ul role="list"><li>‍<strong>Note:</strong> You can find the Site ID for your account <a href="https://www.olark.com/install">here</a>.</li><li>Place this code where you want your image to appear. The links to the images should be after online= and offline= in the src attribute.</li><li>Save your page and reload.</li></ul><p>It should look something like this:</p><figure class="w-richtext-align-normal w-richtext-figure-type-image"><div><img alt="image of a webpage with an embedded "click to chat" image" src="https://cdn.prod.website-files.com/646d3c494b3d75dd99420891/64b017b383d1a8a913f82ea4_addimage02.png"/></div></figure><p><strong>Note: If you'd like your images to display differently based on online/offline status, you can use the following code:</strong></p><div class="w-embed"><pre><code>  <a href="javascript:void(0);" onclick="olark('api.box.expand')"> <img src="https://images-async.olark.com/status/YOUR_SITE_ID/image.png?online=https://static.olark.com/images/image-orangelark-available.png&offline=https://static.olark.com/images/image-orangelark-unavailable.png" border=0></a> </code></pre></div><p>After you insert your Site ID where it shows, "YOUR_SITE_ID", you can reference the image file path after <em>online=</em>. You can use <em>offline=</em> for an offline image file.</p><h2>Chat Side Tab</h2><p>You can add a click-to-chat tab to the side of your page. Remember, you can use your own custom image or change the position by modifying this code.</p><figure class="w-richtext-align-normal w-richtext-figure-type-image"><div><img alt="image of a webpage with a vertical "click to chat" tab" src="https://cdn.prod.website-files.com/646d3c494b3d75dd99420891/64b017b383d1a8a913f82ea0_csstab.png"/></div></figure><ul role="list"><li>Copy the following HTML and CSS code:</li></ul><div class="w-embed"><pre><code>  <div id="olark_tab"> <a href="javascript:void(0);" onclick="olark('api.box.expand')"> <img src="https://static.olark.com/images/livehelp-tab-icon.png" /> </a> </div>  </code></pre></div><ul role="list"><li>Paste the code in to your website source anywhere between the two body tags.</li><li>Include the following CSS either in your HTML document or your CSS stylesheet. If including in your CSS stylesheet, the <style> and </style> tags are not needed:</li></ul><div class="w-embed"><pre><code> <style> div#olark_tab{ position: fixed; left: 0; bottom:0%; z-index:5000; } #olark_tab a { display:block; /*Edit these to change the look of your tab*/ border: 3px solid white; border-left-style: none; border-bottom-style: none; margin-top:0px; } #olark_tab a:hover{ border-color: orange; } </style> </div>  </code></pre></div><ul role="list"><li>Save your page and reload.</li></ul><h2>Chat Side Tab (CSS Only)</h2><p>If you want to use a solution that does not require any images, you can use CSS to position a click-to-chat tab on the side of your page.</p><p><strong>Note:</strong> This method uses CSS3 which may not work on older browsers.</p><ul role="list"><li>Copy the following HTML code.</li></ul><div class="w-embed"><pre><code>  <div id="olark_tab"> <div> <a href="javascript:void(0);" onclick="olark('api.box.expand')"> Click to chat </a> </div> </div>  </code></pre></div><ul role="list"><li>Paste the code in to your website source anywhere between the two body tags.</li><li>Include the following CSS either in your HTML document or your CSS stylesheet. If including in your CSS stylesheet, the <style> and </style> tags are not needed.</li></ul><div class="w-embed"><pre><code> <style> div#olark_tab{ position: fixed; left: 0; bottom:40%; z-index:5000; } #olark_tab div{ height: 150px; width: 150px; float: left; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); } #olark_tab a{ /*Edit these to change the look of your tab*/ background-color: black; color: white; font: bold 18px "century gothic"; height: 20px; padding: 6px; border: 2px solid #363636; display: block; text-decoration: none; text-align: center; width: auto; -webkit-border-bottom-right-radius:9px; -webkit-border-bottom-left-radius:9px; -moz-border-radius-bottomleft:9px; -moz-border-radius-bottomright:9px; border-top-style: none; border-top-width: 0; } #olark_tab a:hover{ background-color: white; color: black; } </style> </code></pre></div><ul role="list"><li>Save your page and reload. It should look something like <a href="https://codepen.io/olark/pen/bJLYry">this example</a>.</li></ul></div><div class="support_ticket_form-block w-condition-invisible w-form"><form id="wf-form-Support-Ticket-Form" name="wf-form-Support-Ticket-Form" data-name="Support Ticket Form" method="get" class="support_ticket_form" data-wf-page-id="65c2c69fb033277667d77197" data-wf-element-id="efc8e68f-79b9-406a-e9ad-070f9a9c28f4"><label for="What-can-we-help-with" class="support_form_field_label">What topic can we help with?</label><select id="What-can-we-help-with" name="What-can-we-help-with" data-name="What can we help with?" required="" class="support_form_select_field w-select"><option value="Billing">Billing</option><option value="Chat Console">Chat Console</option><option value="Dashboard">Dashboard</option><option value="PowerUps">PowerUps</option><option value="CRM/Integration">CRM/Integration</option><option value="Transcripts/Chat">Transcripts/Chat</option></select><label for="name" class="support_form_field_label">Name</label><input class="support_form_text_field w-input" maxlength="256" name="name" data-name="Name" placeholder="" type="text" id="name" required=""/><label for="Email-Address" class="support_form_field_label">Email Address*</label><input class="support_form_text_field w-input" maxlength="256" name="Email-Address" data-name="Email Address" placeholder="" type="email" id="Email-Address" required=""/><label for="email-3" class="support_form_field_label">Website URL</label><div class="support_form_field_help_text">Please provide the domain name where your Olark live chat is installed.</div><input class="support_form_text_field w-input" maxlength="256" name="Website-URL" data-name="Website URL" placeholder="" type="text" id="Website-URL"/><label for="email-2" class="support_form_field_label">Transcript URL (if applicable)</label><div class="support_form_field_help_text">Include the relevant transcript URL, if possible. You can send us the specific URL from <a href="https://www.olark.com/transcripts" target="_blank">your Transcripts page</a>.</div><input class="support_form_text_field w-input" maxlength="256" name="Transcript-URL" data-name="Transcript URL" placeholder="" type="text" id="Transcript-URL"/><label for="email" class="support_form_field_label">Provide as much information about the issue as possible.*</label><div class="support_form_field_help_text">If you see specific error messages, banners, warnings, notices, etc., please let us know here.</div><textarea id="Issue-Information" name="Issue-Information" maxlength="5000" data-name="Issue Information" placeholder="" required="" class="support_form_text_field w-input"></textarea><label for="email" class="support_form_field_label">Screenshot (recommended)</label><div class="support_form_file_upload w-file-upload"><div class="w-file-upload-default"><input class="w-file-upload-input" accept="" name="Screenshot" data-name="Screenshot" aria-hidden="true" type="file" id="Screenshot" tabindex="-1"/><label for="Screenshot" role="button" tabindex="0" class="w-file-upload-label"><div class="w-icon-file-upload-icon"></div><div class="w-inline-block">Upload File</div></label><div class="w-file-upload-info">Max file size 10MB.</div></div><div tabindex="-1" class="w-file-upload-uploading w-hidden"><div class="w-file-upload-uploading-btn"><svg class="w-icon-file-upload-uploading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" aria-hidden="true"><path fill="currentColor" opacity=".2" d="M15 30a15 15 0 1 1 0-30 15 15 0 0 1 0 30zm0-3a12 12 0 1 0 0-24 12 12 0 0 0 0 24z"></path><path fill="currentColor" opacity=".75" d="M0 15A15 15 0 0 1 15 0v3A12 12 0 0 0 3 15H0z"><animateTransform attributeName="transform" attributeType="XML" dur="0.6s" from="0 15 15" repeatCount="indefinite" to="360 15 15" type="rotate"></animateTransform></path></svg><div class="w-inline-block">Uploading...</div></div></div><div tabindex="-1" class="w-file-upload-success w-hidden"><div class="w-file-upload-file"><div class="w-file-upload-file-name">fileuploaded.jpg</div><div aria-label="Remove file" role="button" tabindex="0" class="w-file-remove-link"><div class="w-icon-file-upload-remove"></div></div></div></div><div tabindex="-1" class="w-file-upload-error w-hidden"><div class="w-file-upload-error-msg" data-w-size-error="Upload failed. Max size for files is 10 MB." data-w-type-error="Upload failed. Invalid file type." data-w-generic-error="Upload failed. Something went wrong. Please retry.">Upload failed. Max size for files is 10 MB.</div></div></div><input type="submit" data-wait="Submitting..." class="button w-button" value="Submit"/></form><div class="w-form-done"><div class="support_ticket_form-success-message">Thank you! Your submission has been received and you'll hear from us shortly!</div></div><div class="w-form-fail"><div>Oops! Something went wrong while submitting the form.</div></div></div></div></main><div class="section_post-widget"><div class="container-large"><aside class="help_article-sidebar-list"><h2 class="help_sidebar-heading heading-style-h3 text-color-purple">Need More Help?</h2><div class="help_sidebar_links-container"><a id="chat_click" href="#" class="help_sidebar-link w-inline-block"><div class="help_sidebar-link-text">Chat with an Olarker</div><div class="help_sidebar-text">Monday - Friday, 7am - 4pm Pacific</div></a><a href="/help/ticket" class="help_sidebar-link w-inline-block"><div class="help_sidebar-link-text">Open a support ticket</div><div class="help_sidebar-text">Or email support@olark.com</div></a><a href="https://twitter.com/intent/tweet?screen_name=OlarkSupport&share_with_retweet=never" class="help_sidebar-link w-inline-block"><div class="help_sidebar-link-text">Tweet @olarksupport</div><div class="help_sidebar-text">Quick answers to short questions</div></a><a href="https://status.olark.com" class="help_sidebar-link w-inline-block"><div class="help_sidebar-link-text">Olark system status </div><div class="help_sidebar-text">Subscribe to status notifications</div></a></div></aside></div></div></div><div class="help_page-toc"><div class="section_post-widget is-sidebar"><div class="container-medium"><aside class="toc_widget"><h2 class="toc-heading heading-style-h5 text-color-grey">On this page:</h2><div fs-toc-element="table" class="fs-toc_links"><div class="fs-toc_link-wrapper is-h2"><a fs-toc-element="link" href="#" class="fs-toc_link w-inline-block"><div class="fs_toc_link-text">Example H2</div></a><div class="fs-toc_link-wrapper is-h3"><a fs-toc-element="link" href="#" class="fs-toc_link w-inline-block"><div class="fs_toc_link-text">Example H3</div></a></div></div></div></aside></div></div></div></div></div></div></main><footer class="footer_component"><div class="padding-global"><div class="container-large"><div class="footer_top-wrapper"><div class="footer_top-left-wrapper"><img src="https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/6633d97bc26b66fa20f8ae32_Olark_Poppins_underline-02%20(1).png" loading="lazy" width="150" height="Auto" alt="" srcset="https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/6633d97bc26b66fa20f8ae32_Olark_Poppins_underline-02%20(1)-p-500.png 500w, https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/6633d97bc26b66fa20f8ae32_Olark_Poppins_underline-02%20(1)-p-800.png 800w, https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/6633d97bc26b66fa20f8ae32_Olark_Poppins_underline-02%20(1)-p-1080.png 1080w, https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/6633d97bc26b66fa20f8ae32_Olark_Poppins_underline-02%20(1)-p-1600.png 1600w, https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/6633d97bc26b66fa20f8ae32_Olark_Poppins_underline-02%20(1)-p-2000.png 2000w, https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/6633d97bc26b66fa20f8ae32_Olark_Poppins_underline-02%20(1)-p-2600.png 2600w, https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/6633d97bc26b66fa20f8ae32_Olark_Poppins_underline-02%20(1)-p-3200.png 3200w, https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/6633d97bc26b66fa20f8ae32_Olark_Poppins_underline-02%20(1).png 4367w" sizes="150px"/><div class="padding-bottom padding-medium"></div><a href="/handbook/why-did-we-become-a-b-corp" class="footer_b-corp_link w-inline-block"><img src="https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/6633d755970dafc3e4f795ae_B-Corp-Logo-Black-RGB.svg" loading="lazy" width="Auto" height="Auto" alt="Certified B Corporation logo" class="img_b-corp"/></a><div class="padding-bottom padding-small"></div></div><div class="footer_top-right-wrapper"><div id="w-node-_7c4dd3ca-1b11-b71f-2f9d-badf0a146e35-0a146e1f" class="footer_menu-wrapper"><div class="footer_link-col"><div class="text-size-medium text-weight-medium text-color-purple">Product</div><div class="footer_link-list"><a href="/pricing" class="footer_link text-size-regular">Pricing</a><a href="/chatbot-copilot" class="footer_link text-size-regular">Chatbots</a><a href="/features" class="footer_link text-size-regular">Features</a><a href="/integrations" class="footer_link text-size-regular">Integrations</a><a href="/product-tour" class="footer_link text-size-regular">Product Tour</a><a href="/case-studies" class="footer_link text-size-regular">Case Studies</a></div></div><div class="footer_link-col"><div class="text-size-medium text-weight-medium text-color-purple">Support</div><div class="footer_link-list"><a href="/faq" class="footer_link text-size-regular">FAQ</a><a href="/help" class="footer_link text-size-regular">Help Center</a><a href="/help/getting-started" class="footer_link text-size-regular">Getting Started</a><a href="/categories/tool-tip" class="footer_link text-size-regular">Troubleshooting</a><a href="/api" class="footer_link text-size-regular">JavaScript API</a></div></div><div class="footer_link-col"><div class="text-size-medium text-weight-medium text-color-purple">About</div><div class="footer_link-list"><a href="https://www.olark.com/about" class="footer_link text-size-regular">Our Team</a><a href="https://www.olark.com/values" class="footer_link text-size-regular">Our Values</a><a href="https://www.olark.com/jobs" class="footer_link text-size-regular">Become an Olarker</a><a href="/handbook" class="footer_link text-size-regular">Employee Handbook</a><a href="/ndeam" class="footer_link text-size-regular">National Disability Employment Month</a></div></div><div class="footer_link-col"><div class="text-size-medium text-weight-medium text-color-purple">Connect with us</div><div class="footer_link-list"><a href="https://olark.com/speak" class="footer_link text-size-regular">Speak: The Olark Blog</a><a href="https://www.olark.com/tips-for-remote-managers-and-going-remote-guide" class="footer_link text-size-regular">Our Guide to Remote Work</a><a href="https://www.olark.com/partners" class="footer_link text-size-regular">Become a Partner</a><a href="https://www.olark.com/contact" class="footer_link text-size-regular">Contact Us</a></div></div></div></div></div></div></div><div class="footer_bottom-wrapper"><div class="padding-global"><div class="container-large"><div class="footer_bottom-row"><div class="footer_bottom-left-content"><div class="w-layout-grid grid-4"><a id="w-node-_9aaedbbc-afdb-fcc7-ae4d-f4a38cfb414f-0a146e1f" href="https://www.olark.com/tos" class="footer_link w-inline-block">Terms of Service</a><a id="w-node-a2487b5b-882a-4ba4-ea16-b763cee8839a-0a146e1f" href="https://www.olark.com/privacy-policy" class="footer_link w-inline-block">Privacy Policy</a><a id="w-node-f9109ed8-ea5b-c451-bf9b-60422ddc5345-0a146e1f" href="https://www.olark.com/help/gdpr" class="footer_link w-inline-block">GDPR</a><a id="w-node-_21be5599-5942-d1e3-7b3a-5e010b2a6f0d-0a146e1f" href="https://www.olark.com/ada-accessible-live-chat" class="footer_link w-inline-block">Accessibility</a><a id="w-node-_4f04dad2-d35d-f187-106a-a2242dc01649-0a146e1f" href="https://blog.olark.com/statement-of-solidarity-and-action-for-black-lives-matter" class="footer_link w-inline-block">Statement of Action</a></div></div></div></div></div></div></footer></div><div id="cookie-consent" class="cookie_consent-container hidden"><div fs-cc="banner" class="fs-cc-banner_component-2"><div class="fs-cc-banner_container"><div class="fs-cc-banner_text">Olark uses cookies to give you the best possible experience on our website. By clicking "I like cookies", you agree to our use of them. View our <a href="/privacy-policy" class="fs-cc-banner_text-link">Privacy Policy</a> for more information.</div><div class="fs-cc-banner_buttons-wrapper"><a id="cookie-consent-accept" fs-cc="allow" data-w-id="eee4b971-6c89-3219-ab66-2ecff1bafac1" href="#" class="fs-cc-banner_button w-button">Accept</a></div></div></div></div><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=646d3c484b3d75dd99420842" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/js/rhis-sublime-site.schunk.4a394eb5af8156f2.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/646d3c484b3d75dd99420842/js/rhis-sublime-site.08f758c4.92d754e0d7b819e2.js" type="text/javascript"></script> <script type="text/javascript" async> ;(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"); /* Add configuration calls below this comment */ olark.identify('9353-431-10-4341');</script>  <script async type="text/javascript" src="//static.olark.com/a/cookie-consent/cookie-consent.js"></script>  <script type="text/javascript"> _linkedin_partner_id = "47470"; window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || []; window._linkedin_data_partner_ids.push(_linkedin_partner_id); </script><script type="text/javascript"> (function(l) { if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])}; window.lintrk.q=[]} var s = document.getElementsByTagName("script")[0]; var b = document.createElement("script"); b.type = "text/javascript";b.async = true; b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js"; s.parentNode.insertBefore(b, s);})(window.lintrk); </script> <noscript> <img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=47470&fmt=gif" /> </noscript><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> <script>hljs.highlightAll();</script><script src="https://hubspotonwebflow.com/assets/js/form-124.js" type="text/javascript" integrity="sha384-bjyNIOqAKScdeQ3THsDZLGagNN56B4X2Auu9YZIGu+tA/PlggMk4jbWruG/P6zYj" crossorigin="anonymous"></script></body></html>