Install Lucky Orange | OpsBlu Docs

Install Lucky Orange

Install the Lucky Orange tracking tag or SDK — step-by-step embed instructions, verification, and troubleshooting.

Installation

Lucky Orange is a conversion optimization platform that combines heatmaps, session recordings, live chat, and analytics. This guide covers all installation methods across different platforms.

Getting Your Site ID

Before installation, you'll need your Lucky Orange site ID:

  1. Log into your Lucky Orange account
  2. Go to Settings > Installation
  3. Find your unique site ID in the tracking code
  4. Copy your site ID (format: a1b2c3d4)

Standard JavaScript Installation

The most common installation method for websites and web applications.

Basic Script

Add this code to your HTML <head> tag or just before the closing </body> tag:

<script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"></script>

Replace YOUR_SITE_ID with your actual Lucky Orange site ID.

Option 1: In the <head> (Recommended)

<head>
  <meta charset="UTF-8">
  <title>Your Website</title>
  <!-- Lucky Orange Tracking Code -->
  <script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"></script>
</head>

Option 2: Before </body>

<body>
  <!-- Your content -->

  <!-- Lucky Orange Tracking Code -->
  <script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"></script>
</body>

Full Implementation Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website</title>

  <!-- Lucky Orange Tracking Code -->
  <script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"></script>
</head>
<body>
  <h1>Welcome to Your Website</h1>
  <!-- Your content -->
</body>
</html>

WordPress Installation

Lucky Orange offers multiple installation methods for WordPress sites.

  1. Log into your WordPress admin dashboard
  2. Go to Plugins > Add New
  3. Search for "Lucky Orange"
  4. Click "Install Now" on the official Lucky Orange plugin
  5. Click "Activate"
  6. Go to Settings > Lucky Orange
  7. Enter your site ID
  8. Click "Save Changes"

Method 2: Manual Header/Footer Plugin

  1. Install "Insert Headers and Footers" plugin
  2. Go to Settings > Insert Headers and Footers
  3. Paste the Lucky Orange script in "Scripts in Header"
  4. Click "Save"

Method 3: Theme Functions

Add to your theme's functions.php:

function add_lucky_orange_tracking() {
  ?>
  <script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"></script>
  <?php
}
add_action('wp_head', 'add_lucky_orange_tracking');

Method 4: Direct Theme Edit

Edit your theme's header.php (not recommended for theme updates):

<!-- Add before closing </head> tag -->
<script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"></script>

Shopify Installation

Install Lucky Orange on your Shopify store.

Installation Steps

  1. Access Theme Code

    • Go to Online Store > Themes
    • Click Actions > Edit code

  2. Locate Theme File

    • Find theme.liquid in the Layout folder
    • Click to open the file

  3. Add Tracking Code

    • Scroll to find the </head> tag
    • Add the Lucky Orange script just before </head>:
<!-- Lucky Orange Tracking Code -->
<script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"></script>
</head>
  1. Save Changes
    • Click "Save" in the top right
    • Visit your store to verify installation

Shopify App Alternative

Lucky Orange also offers a Shopify app:

  1. Visit the Shopify App Store
  2. Search for "Lucky Orange"
  3. Click "Add app"
  4. Follow installation prompts

Wix Installation

Using Wix Embed

  1. Go to your Wix dashboard
  2. Click on "Add" in the left sidebar
  3. Select "Embed" > "Custom Embeds" > "Embed Code"
  4. Paste the Lucky Orange script
  5. Adjust the embed size and position
  6. Publish your site

Using Tracking & Analytics

  1. Go to Settings > Tracking & Analytics
  2. Click "+ New Tool" > "Custom"
  3. Paste the Lucky Orange script
  4. Set to load on "All Pages"
  5. Click "Apply"

Squarespace Installation

Code Injection Method

  1. Go to Settings > Advanced > Code Injection
  2. Paste the Lucky Orange script in the Header section:
<script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"></script>
  1. Click "Save"

Per-Page Installation

For specific pages only:

  1. Go to the page settings
  2. Click Advanced
  3. Paste the script in "Page Header Code Injection"

Google Tag Manager Installation

Install Lucky Orange via GTM for easier management.

GTM Setup Steps

  1. Create Custom HTML Tag

    • In GTM, go to Tags > New
    • Click Tag Configuration
    • Choose "Custom HTML"

  2. Add Script

<script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"></script>

  1. Configure Trigger

    • Click Triggering
    • Select "All Pages" for site-wide tracking
    • Or create custom triggers for specific pages

  2. Name and Save

    • Name your tag "Lucky Orange Tracking"
    • Click "Save"

  3. Publish Container

    • Click "Submit" in GTM
    • Add version name and description
    • Click "Publish"

Advanced GTM Configuration

Track only authenticated users:

<script>
  // Only load Lucky Orange for logged-in users
  if ({{User Status}} === 'logged-in') {
    (function() {
      var script = document.createElement('script');
      script.async = true;
      script.defer = true;
      script.src = 'https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID';
      document.head.appendChild(script);
    })();
  }
</script>

React Integration

Using useEffect Hook

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Load Lucky Orange script
    const script = document.createElement('script');
    script.src = 'https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID';
    script.async = true;
    script.defer = true;
    document.head.appendChild(script);

    return () => {
      // Cleanup on unmount
      document.head.removeChild(script);
    };
  }, []);

  return <div>Your App</div>;
}

React Helmet

import { Helmet } from 'react-helmet';

function App() {
  return (
    <>
      <Helmet>
        <script
          async
          defer
          src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"
        />
      </Helmet>
      <div>Your App</div>
    </>
  );
}

Next.js Integration

Using Script Component

// pages/_app.js
import Script from 'next/script';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Document Integration

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          async
          defer
          src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Vue Integration

Vue 3 Plugin

// plugins/luckyOrange.js
export default {
  install: (app) => {
    const script = document.createElement('script');
    script.src = 'https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID';
    script.async = true;
    script.defer = true;
    document.head.appendChild(script);
  }
};
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import LuckyOrange from './plugins/luckyOrange';

const app = createApp(App);
app.use(LuckyOrange);
app.mount('#app');

Angular Integration

Add to index.html

<!-- src/index.html -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Your App</title>
  <base href="/">
  <script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Webflow Installation

Site-Wide Installation

  1. Go to Project Settings
  2. Click on the "Custom Code" tab
  3. Paste the Lucky Orange script in the "Head Code" section:
<script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"></script>
  1. Click "Save Changes"
  2. Publish your site

Page-Specific Installation

  1. Open the page in the Designer
  2. Click the gear icon for Page Settings
  3. Scroll to Custom Code
  4. Add the script to "Head Code"

Ghost CMS Installation

Code Injection

  1. Go to Settings > Code Injection
  2. Add to Site Header:
<script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"></script>
  1. Click "Save"

Magento Installation

Magento 2

  1. Go to Content > Design > Configuration
  2. Select your store view
  3. Expand "HTML Head"
  4. Add to "Scripts and Style Sheets":
<script async defer src="https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID"></script>
  1. Click "Save Configuration"
  2. Clear cache

BigCommerce Installation

Script Manager

  1. Go to Storefront > Script Manager
  2. Click "Create a Script"
  3. Name: "Lucky Orange Tracking"
  4. Location: "Head"
  5. Select pages: "All pages"
  6. Script type: "Script"
  7. Paste the Lucky Orange script
  8. Click "Save"

Drupal Installation

Using Custom Block

  1. Go to Structure > Block Layout
  2. Click "Add custom block"
  3. Block type: "Basic block"
  4. Block description: "Lucky Orange Tracking"
  5. Body field: Paste the Lucky Orange script
  6. Text format: "Full HTML"
  7. Save and place in a region that appears on all pages

Conditional Loading

Load Only on Specific Pages

<script>
  // Only load on specific pages
  const currentPath = window.location.pathname;
  const trackedPages = ['/checkout', '/products', '/contact'];

  if (trackedPages.some(page => currentPath.includes(page))) {
    const script = document.createElement('script');
    script.src = 'https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID';
    script.async = true;
    script.defer = true;
    document.head.appendChild(script);
  }
</script>

Load Only for Authenticated Users

<script>
  // Check if user is logged in
  if (window.currentUser && window.currentUser.isAuthenticated) {
    const script = document.createElement('script');
    script.src = 'https://tools.luckyorange.com/core/lo.js?site-id=YOUR_SITE_ID';
    script.async = true;
    script.defer = true;
    document.head.appendChild(script);
  }
</script>

Verification and Testing

Browser Console Check

// Check if Lucky Orange loaded
console.log(window._loq);

// Should output an array if loaded correctly

Network Tab Verification

  1. Open browser DevTools (F12)
  2. Go to Network tab
  3. Reload the page
  4. Filter for "luckyorange"
  5. Look for request to tools.luckyorange.com/core/lo.js

Dashboard Verification

  1. Log into Lucky Orange
  2. Go to Dashboard
  3. Look for "Live Visitors" count
  4. Visit your website in another tab
  5. Check if your visit appears in real-time

Troubleshooting

Script Not Loading

Check console for errors

  • Open DevTools console
  • Look for JavaScript errors
  • Verify site ID is correct

Check Content Security Policy

  • Ensure CSP allows scripts from tools.luckyorange.com
  • Add to CSP if needed:
Content-Security-Policy: script-src 'self' https://tools.luckyorange.com;

No Recordings Appearing

Verify installation

  • Check that script is present on all pages
  • Ensure site ID is correct
  • Check browser console for errors

Check recording settings

  • Log into Lucky Orange dashboard
  • Go to Settings > Recording Settings
  • Verify recording is enabled

Ad blocker interference

  • Test in incognito mode
  • Ask users to whitelist your domain

Live Chat Not Showing

Check chat settings

  • Go to Settings > Chat Settings
  • Verify chat is enabled
  • Check display rules

Position and styling

  • Adjust chat widget position
  • Check z-index conflicts
  • Verify widget is not hidden by CSS

Privacy and Compliance

GDPR Compliance

Lucky Orange provides GDPR compliance options:

Configure in Settings > Privacy.

Excluding Sensitive Data

Prevent Lucky Orange from recording sensitive fields:

<input type="password" class="lo-ignore" />
<input type="text" data-lo-ignore="true" />

Additional Resources

Back to top