MoeGo - Custom Booking Site With CSS & JavaScript

Your booking page is often the first impression clients get of your business. With MoeGo Ultimate, you can now take your online booking to the next level by embedding custom CSS and JavaScript directly into your booking landing page.

This feature gives you the flexibility to:

• Personalize the look & feel – Adjust colors, fonts, layouts, and themes to perfectly match your brand.
• Track and optimize performance – Add tools like Google Analytics or Meta Pixel to measure marketing success.
• Enhance client experience – Add animations, interactive elements, or custom behaviors that make your booking page more engaging.

🌟 This is an exclusive feature for MoeGo Ultimate users, designed for businesses that want full control over branding and client experience.

How To Add Custom CSS And JavaScript 

Follow these simple steps to customize your booking page:

1. Prepare your code (with the help of a web developer if needed).
2. Go to Online Booking > Booking Site > Embed custom CSS & JavaScript > Edit.
3. Paste your code into the CSS or JavaScript box.
4. Acknowledge the terms & agreement.
5. Click < Confirm > to save.
6. Visit your booking page to see the changes live.

🔄 Changes take effect immediately, but MoeGo will also run a background security review. You’ll only get a notification if your code doesn’t pass the review.

Role Permission

💡 Permissions Reminder: Staff must have the “Manage custom code for online booking” permission enabled (Settings > Staff > Role Permission > Online Booking).

Feature Highlight

🔧 Code Editor

• Syntax highlighting (CSS & JavaScript)
• Real-time syntax checking
• Code suggestions and hints
• Up to 10,000 characters of code supported

🛡️ Security Validation

• Automatic syntax checks before saving
• Error reports with details
• Mandatory acceptance of security terms

💾 Data Management

• Auto-save applies to all booking pages instantly
• Scripts stored securely on MoeGo servers
• Version updates supported (edit & replace code anytime)

What You Can Add

You (or your developer) can add:

External CSS Stylesheets

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto" />

Inline CSS Styles

<style>
  .business-theme {
    font-family: "Roboto", sans-serif;
    color: #ff0000;
    background-color: #f5f5f5;
  }

  .custom-button {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    border: none;
    border-radius: 25px;
    padding: 12px 24px;
    color: white;
    font-weight: bold;
    cursor: pointer;
  }
</style>

External JavaScript Libraries

<script src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID" async></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Inline JavaScript Code

<script>
  // Google Analytics configuration
  gtag("config", "GA_MEASUREMENT_ID");

  // Add custom class to body
  document.body.classList.add("business-theme");

  // Custom event tracking
  document.addEventListener("DOMContentLoaded", function () {
    // Track booking button clicks
    const bookingButtons = document.querySelectorAll(".booking-button");
    bookingButtons.forEach((button) => {
      button.addEventListener("click", function () {
        gtag("event", "booking_button_click", {
          event_category: "engagement",
          event_label: "online_booking",
        });
      });
    });
  });
</script>

Common Use Cases

Google Analytics Integration

Track client activity on your booking page.

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", "GA_MEASUREMENT_ID");
</script>

Facebook Pixel Integration

Measure ad performance and retarget potential clients.

<!-- Facebook Pixel -->
<script>
  !(function (f, b, e, v, n, t, s) {
    if (f.fbq) return;
    n = f.fbq = function () {
      n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
    };
    if (!f._fbq) f._fbq = n;
    n.push = n;
    n.loaded = !0;
    n.version = "2.0";
    n.queue = [];
    t = b.createElement(e);
    t.async = !0;
    t.src = v;
    s = b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t, s);
  })(window, document, "script", "https://connect.facebook.net/en_US/fbevents.js");
  fbq("init", "YOUR_PIXEL_ID");
  fbq("track", "PageView");
</script>

Custom Theme Styles

Apply your brand’s colors, fonts, and layouts.

<style>
  /* Custom theme colors */
  :root {
    --primary-color: #4a90e2;
    --secondary-color: #f39c12;
    --text-color: #2c3e50;
  }

  /* Custom button styles */
  .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .btn-primary:hover {
    background-color: #357abd;
    border-color: #357abd;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
  }

  /* Custom fonts */
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
  }
</style>

Custom Interactive Behavior

Add animations, form validations, or special effects.

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Add loading animation
    const addLoadingAnimation = () => {
      const style = document.createElement("style");
      style.textContent = `
        .loading-spinner {
          display: inline-block;
          width: 20px;
          height: 20px;
          border: 3px solid #f3f3f3;
          border-top: 3px solid #3498db;
          border-radius: 50%;
          animation: spin 1s linear infinite;
        }
        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
      `;
      document.head.appendChild(style);
    };

    // Add form validation
    const addFormValidation = () => {
      const forms = document.querySelectorAll("form");
      forms.forEach((form) => {
        form.addEventListener("submit", function (e) {
          const requiredFields = form.querySelectorAll("[required]");
          let isValid = true;

          requiredFields.forEach((field) => {
            if (!field.value.trim()) {
              isValid = false;
              field.style.borderColor = "#e74c3c";
            } else {
              field.style.borderColor = "#27ae60";
            }
          });

          if (!isValid) {
            e.preventDefault();
            alert("Please fill in all required fields");
          }
        });
      });
    };

    addLoadingAnimation();
    addFormValidation();
  });
</script>

Technical Details (For Developers)

Script Loading Process

1. Parsing: Extracts <script>, <style>, <link> tags
2. Validation: Runs syntax and security checks
3. Manual Review: Extra security screening if needed
4. Loading: Approved resources added to booking page
5. Deduplication: Prevents duplicates automatically

Supported HTML Tags

• <script> - JavaScript code (external or inline)
• <style> - CSS styles
• <link> - External stylesheets (rel="stylesheet" only)

Supported Attributes

• src - External script/style URLs
• async - Asynchronous loading
• defer - Deferred loading
• crossorigin - Cross-origin resource sharing
• media - Media queries for styles

Security Limitations

The system implements strict security validation to protect against malicious code:

Blocked Operations

The following JavaScript operations are blocked for security reasons:

• eval() function calls
• Function() constructor
• document.write() and document.writeln()
• Direct innerHTML and outerHTML assignments
• javascript: protocol URLs
• Nested <script> tags

Resource Limits

• Inline script length: Maximum 10,000 characters
• External scripts: Maximum 10 scripts
• Inline scripts: Maximum 5 scripts
• Total scripts: Maximum 15 scripts
• Protocol restriction: Only HTTPS URLs are allowed

Example of Blocked Code

<!-- ❌ This will be blocked -->
<script>
  eval("console.log('Hello')"); // Blocked
  document.write("<h1>Hello</h1>"); // Blocked
  element.innerHTML = "<script>alert('xss')</script>"; // Blocked
</script>

Best Practices

✅ Do

1. Code Organization: Place CSS and JavaScript code in separate <style> and <script> tags
2. Performance Optimization: Use asynchronous loading for external scripts (add async attribute)
3. Error Handling: Add appropriate error handling and user feedback
4. Compatibility: Ensure code works properly across different browsers
5. Testing: Test code functionality before saving

❌ Avoid

1. Avoid Inline Events: Don’t add event handlers directly to HTML elements
2. Avoid Global Pollution: Use namespaces to avoid global variable conflicts
3. Avoid Blocking Rendering: Avoid using synchronous script loading
4. Avoid Over-complexity: Keep code simple and maintainable

👀 Error Code Examples

<!-- ❌ Incorrect: Syntax error -->
<script>
  function myFunction() {
    console.log("Hello World"
    // Missing closing parenthesis
  }
</script>

<!-- ✅ Correct: Proper syntax -->
<script>
  function myFunction() {
    console.log("Hello World");
  }
</script>

Frequently Asked Questions

Q: Why doesn’t my script work after saving?
A: Double-check your code for syntax errors. Scripts are automatically applied to all booking pages after saving.

Q: How do I delete a saved script?
A: Simply clear the editor box and save—this removes the script.

Q: Will scripts slow down my website?
A: Poorly written code can. We recommend using asynchronous loading and keeping code optimized.

Q: Which third-party services are supported?
A: Most major tools like Google Analytics, Facebook/Meta Pixel, and other trackers.

Q: How long does the manual review process take?
A: Typically 24–48 hours. You’ll only be notified if your code fails.

Q: What happens if my code is modified for security reasons?
A: Both you and the business owner will receive a detailed email explaining the changes.