Coachflow.pl

Motyw

99. Custom CSS/JS - personalizacja kodu ​

Poziom: Zaawansowany | Czas: 8 min

Custom CSS/JS = full control nad wygladem i funkcjonalnoscia GHL stron. Advanced customization beyond vბილთერ.

Kiedy uzywac Custom Code ​

GDY GHL BUILDER NIE WYSTARCZY:

1. CUSTOM STYLING:
   - Unique fonts (brand-specific)
   - Advanced animations
   - Responsive breakpoints
   - Custom colors beyond palette

2. ADVANCED INTERACTIONS:
   - Quiz functionality
   - Calculators
   - Custom form validation
   - Dynamic content loading

3. THIRD-PARTY TOOLS:
   - Chat widgets
   - Heatmaps
   - A/B testing scripts
   - Custom analytics

Gdzie dodac kod ​

GHL: Sites -> [Your Page] -> Settings

TRACKING CODE:

<head> section:
- CSS styles
- Meta tags
- Analytics (GA, FB Pixel)

<body> section:
- JavaScript functions
- Chat widgets
- Conversion pixels

PER-PAGE lub GLOBAL (all pages)

Custom CSS Examples ​

1. Custom Fonts ​

css
/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/* Apply to all text */
body {
  font-family: 'Poppins', sans-serif !important;
}

/* Headers only */
h1, h2, h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

2. Custom Button Styles ​

css
/* Target GHL buttons */
.hl_page-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 50px;
  padding: 15px 40px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.hl_page-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}

3. Sticky Header ​

css
/* Make navigation sticky */
.navigation-section {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

4. Mobile Responsive ​

css
/* Hide on mobile */
@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
  
  /* Stack elements */
  .row {
    flex-direction: column;
  }
}

Custom JavaScript Examples ​

1. Smooth Scroll ​

javascript
// Smooth scroll to anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
  });
});

2. Form Validation ​

javascript
// Validate email before submit
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
  const email = form.querySelector('input[name="email"]').value;
  
  if (!email.includes('@')) {
    e.preventDefault();
    alert('Please enter valid email');
    return false;
  }
});

3. Exit Intent Popup ​

javascript
// Show popup when mouse leaves viewport
let exitPopupShown = false;

document.addEventListener('mouseout', function(e) {
  if (!exitPopupShown && e.clientY < 0) {
    // Show your popup
    document.querySelector('#exit-popup').style.display = 'block';
    exitPopupShown = true;
  }
});

4. Dynamic Content ​

javascript
// Show different content based на time
const hour = new Date().getHours();
const greeting = document.querySelector('#greeting');

if (hour < 12) {
  greeting.textContent = 'Good Morning!';
} else if (hour < 18) {
  greeting.textContent = 'Good Afternoon!';
} else {
  greeting.textContent = 'Good Evening!';
}

5. Countdown Timer ​

javascript
// Countdown to specific date
function countdown() {
  const end = new Date('2024-12-31 23:59:59');
  const now = new Date();
  const gap = end - now;
  
  const days = Math.floor(gap / (1000 * 60 * 60 * 24));
  const hours = Math.floor((gap / (1000 * 60 * 60)) % 24);
  const minutes = Math.floor((gap / (1000 * 60)) % 60);
  const seconds = Math.floor((gap / 1000) % 60);
  
  document.querySelector('#countdown').innerHTML = 
    `${days}d ${hours}h ${minutes}m ${seconds}s`;
}

setInterval(countdown, 1000);

Third-Party Integrations ​

1. Crisp Chat ​

html
<!-- Add to <head> -->
<script type="text/javascript">
  window.$crisp=[];window.CRISP_WEBSITE_ID="YOUR-WEBSITE-ID";
  (function(){
    d=document;s=d.createElement("script");
    s.src="https://client.crisp.chat/l.js";
    s.async=1;d.getElementsByTagName("head")[0].appendChild(s);
  })();
</script>

2. Hotjar Heatmaps ​

html
<!-- Add to <head> -->
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:YOUR_ID,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

3. TrustPilot Widget ​

html
<!-- TrustBox widget -->
<div class="trustpilot-widget" data-locale="en-US" data-template-id="TEMPLATE_ID" data-businessunit-id="YOUR_ID">
  <a href="https://www.trustpilot.com/review/yoursite.com">Trustpilot</a>
</div>
<script src="https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js"></script>

Safety Best Practices ​

1. BACKUP FIRST:
   Save original page before adding code

2. TEST IN STAGING:
   Clone page -> Test -> THEN publish

3. VALIDATE CODE:
   CSS: https://jigsaw.w3.org/css-validator/
   JS: https://jslint.com/

4. MINIFY FOR PERFORMANCE:
   CSS: https://cssminifier.com/
   JS: https://javascript-minifier.com/

5. COMMENT YOUR CODE:
   /* What this does */
   // Why it's needed

6. AVOID CONFLICTS:
   Use unique class names (not .button but .my-custom-button)

7. MOBILE TEST:
   Always check responsive behavior

Common Pitfalls ​

PROBLEM: Code nie dziala
FIX: Check browser console (F12) για errors

PROBLEM: Styling nie applies
FIX: Add !important OR increase specificity

PROBLEM: Slow page load
FIX: Minify code, load scripts async

PROBLEM: Conflicts με GHL styles
FIX: Use more specific selectors

PROBLEM: Works na desktop nie mobile
FIX: Add @media queries

Performance Tips ​

1. LOAD SCRIPTS ASYNC:
   <script async src="..."></script>

2. MINIMIZE HTTP REQUESTS:
   Combine CSS files
   Combine JS files

3. USE CDN:
   Google Fonts, jQuery, libraries від CDN (faster!)

4. LAZY LOAD:
   Images below fold loaded când needed

5. CACHE:
   Set proper cache headers

Debugging Tools ​

BROWSER DEV TOOLS (F12):
- Console: JavaScript errors
- Elements: Inspect HTML/CSS
- Network: Load times
- Performance: Bottlenecks

ONLINE TOOLS:
- CodePen: Test code snippets
- JSFiddle: Share/collaborate
- BrowserStack: Cross-browser testing

Checklist ​

☑ Backup original page
☑ Code validated (no errors)
☑ Tested in staging
☑ Mobile responsive checked
☑ Performance optimized (minified)
☑ Comments added (for team)
☑ Browser compatibility tested
☑ Console errors fixed
☑ Analytics tracking verified
☑ Fallbacks pentru older browsers

Gratulacje! Ukończyłeś WSZYSTKIE 100 artykułów dokumentacji GoHighLevel!

Zobacz też: 100. Snapshots & Templates