# Olark Destination

<p><a href="https://www.olark.com/" >Olark</a> is a cloud-based live chat platform to connect with your customers in an effective and timely manner. It provides various features like automated messages, team management, real-time reporting, searchable transcripts, and more.</p>
<p>Find the open source code for this destination in the <a href="https://github.com/rudderlabs/rudder-sdk-js/tree/develop/packages/analytics-js-integrations/src/integrations/Olark" >GitHub repository</a>.</p>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="connection-compatibility">Connection compatibility</h2>
  
  
  
  <div class="quick-info">
    <div>
      <div class="connection-modes-column-headers">
        <table>
          <tr class="connection-modes-column-headers">
            <th colspan="4">
            Destination Information
          </th>
        </tr>
          <tr class="destination-info-content">
            <td>
              <ul>
                <li>
                  <b>Status:</b> Generally Available 
                </li>
                <li>
                  <b>Supported sources:</b>  
                  
                      Web
                  
                </li>
                <li>
                  Refer to it as <b>Olark</b> in the <a href="/docs/sources/event-streams/sdks/rudderstack-javascript-sdk/filtering/#filtering-destinations">Integrations object</a>.
                </li>
              </ul>
            </td>
          </tr>
        </table>
      </div>
      <div class="table-content connection-modes-table">
        
          <table>
            <tr class="heading connection-modes-header">
              <th colspan="4">
              Connection Modes
              <a href=/docs/destinations/rudderstack-connection-modes>
                <i class="fa-regular fa-circle-info"></i>
              </a>
            </th>
          </tr>
            <tr class="connection-modes-column-headers">
              <th>Source</th>
              <th>Cloud mode</th>
              <th>Device mode</th>
              <th>Hybrid mode</th>
            </tr>
            
            <tr class="connection-modes-row">
              <td>
                Web
                
              </td>
              <td>
                 <img src=/docs/images/no-image.svg loading="lazy"
                    decoding="async" class="img__small" alt="not supported" />
              </td>
              <td>
                <img src=/docs/images/tick.svg loading="lazy" decoding="async" class="img__small" alt="supported" />
              </td>
              <td>
                 <img src=/docs/images/no-image.svg loading="lazy"
                    decoding="async" class="img__small" alt="not supported" />
              </td>
            </tr>
            
          </table>
         
      </div>
      <div class="table-content message-types-table">
          <table>
            <tr class="heading message-types-header">
              <th colspan="9">
              Supported Message Types
            </th>
          </tr>
          <tr class="message-types-column-headers">
            <th>Source</th>
            <th>Identify</th>
            <th>Page</th>
            <th>Track</th>
            <th>Screen</th>
            <th>Group</th>
            <th>Alias</th>
            <th>Record</th>
            <th>AudienceList</th>
          </tr>
          
          
          
            
              
              
          
          
          
            
              <tr class="heading message-mode-header">
                <th colspan="9">Device mode</th>
              </tr>
              
              <tr class="message-mode-row">
                <td>
                  Web
                  
                </td>
                <td>
                  <img src=/docs/images/tick.svg loading="lazy" decoding="async" class="img__small" alt="supported" />
                </td>
                <td>
                   <img src=/docs/images/no-image.svg loading="lazy"
                      decoding="async" class="img__small" alt="not supported" />
                </td>
                <td>
                   <img src=/docs/images/no-image.svg loading="lazy"
                      decoding="async" class="img__small" alt="not supported" />
                </td>
                <td>
                   <img src=/docs/images/no-image.svg loading="lazy"
                      decoding="async" class="img__small" alt="not supported" />
                </td>
                <td>
                   <img src=/docs/images/no-image.svg loading="lazy"
                      decoding="async" class="img__small" alt="not supported" />
                </td>
                <td>
                   <img src=/docs/images/no-image.svg loading="lazy"
                      decoding="async" class="img__small" alt="not supported" />
                </td>
                <td>
                   <img src=/docs/images/no-image.svg loading="lazy"
                      decoding="async" class="img__small" alt="not supported" />
                </td>
                <td>
                   <img src=/docs/images/no-image.svg loading="lazy"
                      decoding="async" class="img__small" alt="not supported" />
                </td>
              </tr>
              
            
          
            </table>
        </div>
    </div>
  </div>
  

<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="get-started">Get started</h2><p>Once you have confirmed that the source platform supports sending events to Olark, follow these steps:</p>
<ol>
<li>From your <a href="https://app.rudderstack.com/" >RudderStack dashboard</a>, add a source. Then, from the list of destinations, select <strong>Olark</strong>.</li>
<li>Assign a name to the destination and click <strong>Continue</strong>.</li>
</ol>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="connection-settings">Connection settings</h2><p>To successfully configure Olark as a destination, you will need to configure the following settings:</p>
<ul>
<li><strong>Site ID</strong>: Enter your Olark site ID. This is a required field - RudderStack uses it to initialize the Olark native web SDK.</li>
<li><strong>Group ID</strong>: Enter your Olark group ID. For more information on getting this ID, refer to the <a href="#faq" >FAQ</a> section below.</li>
<li><strong>Record Live Chat Events</strong>: Enable this setting to allow RudderStack to automatically record your Olark Live Chat events as <code>track</code> events.
<ul>
<li><strong>Update Event Name in track call</strong>: Use this setting to update your <code>track</code> event name.
<ul>
<li><strong>Mapping to update the event name in track call</strong>: Use this setting to map the standard Olark Live Chat events with your custom <code>track</code> event names.</li>
</ul>
</li>
</ul>
</li>
<li><strong>Client-side Events Filtering</strong>: This setting lets you specify which events should be blocked or allowed to flow through to Olark. For more information, refer to the <a href="https://www.rudderstack.com/docs/sources/event-streams/sdks/event-filtering/" >Client-side Events Filtering</a> guide.</li>
<li><strong>Use device mode to send events</strong>: As this is a <a href="https://www.rudderstack.com/docs/destinations/rudderstack-connection-modes/#device-mode" >web device mode</a>-only destination, this setting is enabled by default and cannot be disabled.</li>
<li><strong>Consent management settings</strong>: Configure the consent management settings for the specified source by choosing the <strong>Consent management provider</strong> from the dropdown and entering the relevant consent category IDs. See <a href="https://www.rudderstack.com/docs/data-governance/consent-management/overview/" >Consent Management in RudderStack</a> for more information on this feature.</li>
</ul>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="identify">Identify</h2><p>You can use the <a href="https://www.rudderstack.com/docs/event-spec/standard-events/identify/" ><code>identify</code></a> call to update the user information in Olark, like name, email address, phone number, and custom fields like customer ID.</p>
<p>A sample <code>identify</code> call is shown below:</p>
<div class="rs-code">
  <div class="rs-code__head">javascript<button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript">rudderanalytics.identify(&#34;1hKOmRA4GRlm&#34;, {
  name: &#34;Alex Keener&#34;,
  email: &#34;alex@example.com&#34;
  age: 25
})</code></pre></div>
</div>
<!-- end-chunk -->
<!-- begin-chunk -->
<h3 id="supported-mappings">Supported mappings</h3><p>RudderStack maps the following <strong>optional</strong> user traits to the corresponding Olark properties:</p>
<table>
  <thead>
      <tr>
          <th>RudderStack property</th>
          <th>Mouseflow property</th>
          <th>Data type</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td><code>email</code></td>
          <td><code>emailAddress</code></td>
          <td>String</td>
      </tr>
      <tr>
          <td><code>traits</code></td>
          <td>custom fields</td>
          <td>Object</td>
      </tr>
      <tr>
          <td><code>name</code> <br /> <code>firstName</code> + <code>lastName</code></td>
          <td><code>fullName</code></td>
          <td>String</td>
      </tr>
      <tr>
          <td><code>phone</code></td>
          <td><code>phoneNumber</code></td>
          <td>String</td>
      </tr>
  </tbody>
</table>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="track">Track</h2><p>If you enable the <strong>Record Live Chat Events</strong> dashboard setting, RudderStack records the Olark Live Chat events based on the user&rsquo;s interactions and sends them as <a href="https://www.rudderstack.com/docs/event-spec/standard-events/track/" ><code>track</code></a> events. You can then view and analyze these events using other tools (connected to the same source in RudderStack).</p>
<p>You can also set custom names for your <code>track</code> events and map them to the Olark standard events by enabling the <strong>Update event name in track call</strong> setting.</p>

<figure class="image--main "  >
    <a 
         href="/docs/images/event-stream-destinations/olark-track-event-mapping.webp"
        
        >
        <img src="/docs/images/event-stream-destinations/olark-track-event-mapping.webp" 
         alt="Mapping track events to Olark standard Live Chat events"  
         
         
        decoding="async" loading="lazy" class="img-shortcode"/>
    </a>
    
</figure>

<p>RudderStack supports the following standard Live Chat events:</p>
<ul>
<li>Start Chat</li>
<li>Chat Message Sent</li>
<li>Chat Message Received</li>
</ul>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="faq">FAQ</h2><!-- end-chunk -->
<!-- begin-chunk -->
<h4 id="where-can-i-find-the-olark-group-id">Where can I find the Olark group ID?</h4><ol>
<li>Log in to your <a href="" >Olark dashboard</a>.</li>
<li>From the left sidebar, go to <strong>Team</strong> &gt; <strong>Groups</strong> and click the relevant group for which you want the ID.</li>
<li>Click <strong>Show embed code</strong>. Your group ID will be listed here:</li>
</ol>

<figure class="image--main "  >
    <a 
         href="/docs/images/event-stream-destinations/olark-group-id.webp"
        
        >
        <img src="/docs/images/event-stream-destinations/olark-group-id.webp" 
         alt="Olark group ID"  
         
         
        decoding="async" loading="lazy" class="img-shortcode"/>
    </a>
    
</figure>

<br />