Hybrid approach examples

Overview

This page contains comprehensive examples for hybrid configuration approach, combining script attributes for basic settings with manual initialization for advanced features.

Basic hybrid examples

Auto-conf + Runtime overrides

<script>
  window.HoodEngage = window.HoodEngage || [];
  function Hood() { HoodEngage.push(arguments); }
  
  // Override auto-conf settings
  Hood('config', 'analytics', true);
  Hood('config', 'modal_url', 'https://cdn.example.com/modals/');
  Hood('config', 'crashlytics', false);
</script>

<script 
  src="https://sdk.ocmcore.com/sdk/ht-latest.js" 
  data-tag="TAG_ID"
  data-analytics="0"  // Will be overridden by Hood('config')
  async>
</script>

Environment-specific overrides

<script>
  window.HoodEngage = window.HoodEngage || [];
  function Hood() { HoodEngage.push(arguments); }
  
  // Environment-specific configuration
  const isProduction = window.location.hostname === 'example.com';
  
  Hood('config', 'analytics', isProduction);
  Hood('config', 'crashlytics', isProduction);
  Hood('config', 'modal_url', isProduction ? 
    'https://cdn.example.com/modals/' : 
    'https://dev-cdn.example.com/modals/'
  );
</script>

<script 
  src="https://sdk.ocmcore.com/sdk/ht-latest.js" 
  data-tag="TAG_ID"
  data-analytics="0"  // Will be overridden by environment check
  async>
</script>

Dynamic configuration updates

<script>
  window.HoodEngage = window.HoodEngage || [];
  function Hood() { HoodEngage.push(arguments); }
  
  // Initial overrides
  Hood('config', 'analytics', true);
  
  // Dynamic updates based on user behavior
  Hood('on', 'autoconfReady', () => {
    // Override settings after auto-conf loads
    Hood('config', 'modal_url', 'https://custom-cdn.com/modals/');
    Hood('config', 'crashlytics', true);
  });
</script>

<script 
  src="https://sdk.ocmcore.com/sdk/ht-latest.js" 
  data-tag="TAG_ID"
  data-analytics="0"  // Will be overridden by Hood('config')
  async>
</script>

Advanced hybrid examples

Conditional overrides based on user properties

<script>
  window.HoodEngage = window.HoodEngage || [];
  function Hood() { HoodEngage.push(arguments); }
  
  // Override based on user properties
  Hood('on', 'autoconfReady', (config) => {
    if (config.userType === 'premium') {
      Hood('config', 'analytics', true);
      Hood('config', 'modal_url', 'https://premium-cdn.com/modals/');
    } else {
      Hood('config', 'analytics', false);
      Hood('config', 'modal_url', 'https://basic-cdn.com/modals/');
    }
  });
</script>

<script 
  src="https://sdk.ocmcore.com/sdk/ht-latest.js" 
  data-tag="TAG_ID"
  data-analytics="0"  // Will be overridden by user type check
  async>
</script>

A/B testing configuration overrides

<script>
  window.HoodEngage = window.HoodEngage || [];
  function Hood() { HoodEngage.push(arguments); }
  
  // A/B test configuration
  const variant = Math.random() > 0.5 ? 'A' : 'B';
  
  Hood('config', 'modal_url', variant === 'A' ? 
    'https://cdn-variant-a.com/modals/' : 
    'https://cdn-variant-b.com/modals/'
  );
  
  Hood('config', 'analytics', variant === 'A');
</script>

<script 
  src="https://sdk.ocmcore.com/sdk/ht-latest.js" 
  data-tag="TAG_ID"
  data-analytics="0"  // Will be overridden by A/B test
  async>
</script>

Configuration precedence examples

Understanding precedence order

<script>
  window.HoodEngage = window.HoodEngage || [];
  function Hood() { HoodEngage.push(arguments); }
  
  // 1. Runtime overrides (HIGHEST PRIORITY)
  Hood('config', 'analytics', true);
  Hood('config', 'modal_url', 'https://custom-cdn.com/modals/');
</script>

<script 
  src="https://sdk.ocmcore.com/sdk/ht-latest.js" 
  data-tag="TAG_ID"
  data-analytics="0"     // 2. Script attributes (overridden by Hood('config'))
  data-modal_url="https://default-cdn.com/modals/"  // 2. Script attributes (overridden by Hood('config'))
  async>
</script>
<!-- 3. Remote auto-conf will be fetched and applied -->
<!-- 4. SDK defaults will fill any missing values -->

Best practices