Advanced Widget Options

Beyond the settings available in the Widget page, these advanced options give you programmatic control over widget behavior and integration through JavaScript.

Programmatic Control

Opening/Closing

Control the widget from your code:

// Open widget
Goldilocks.open();

// Close widget
Goldilocks.close();

// Toggle
Goldilocks.toggle();

// Check if open
const isOpen = Goldilocks.isOpen();

Show/Hide

Control visibility without affecting state:

// Hide widget completely
Goldilocks.hide();

// Show widget again
Goldilocks.show();

// Check visibility
const isVisible = Goldilocks.isVisible();

Send Messages

Trigger messages programmatically:

// Send message as if user typed it
Goldilocks.sendMessage('I need help with my order');

// Send with metadata
Goldilocks.sendMessage('Help with order #123', {
  metadata: { orderId: '123' }
});

Event Callbacks

React to widget events:

window.goldilocksSettings = {
  apiKey: 'your-api-key',
  
  onLoad: function() {
    console.log('Widget loaded');
  },
  
  onOpen: function() {
    console.log('Widget opened');
    // Track in analytics
    gtag('event', 'widget_opened');
  },
  
  onClose: function() {
    console.log('Widget closed');
  },
  
  onMessageSent: function(message) {
    console.log('User sent:', message);
  },
  
  onMessageReceived: function(message) {
    console.log('AI responded:', message);
  },
  
  onEscalation: function(data) {
    console.log('Escalation requested:', data);
  }
};

Custom Context Data

Pass page-specific context:

window.goldilocksSettings = {
  apiKey: 'your-api-key',
  
  // Static context
  context: {
    currentPage: 'checkout',
    cartValue: 99.99,
    itemCount: 3
  }
};

Dynamic Context

Update context as users navigate:

// Update context
Goldilocks.setContext({
  currentPage: 'product-detail',
  productId: 'SKU-123',
  productName: 'Widget Pro'
});

// Add to existing context
Goldilocks.updateContext({
  cartValue: 149.99
});

Persona Selection

Specify which persona to use:

window.goldilocksSettings = {
  apiKey: 'your-api-key',
  persona: 'sales-persona-slug'
};

Dynamic Persona

Change persona based on conditions:

// Sales pages get sales persona
if (window.location.pathname.includes('/pricing')) {
  window.goldilocksSettings.persona = 'sales';
} else {
  window.goldilocksSettings.persona = 'support';
}

Pre-fill Messages

Start conversations with context:

window.goldilocksSettings = {
  apiKey: 'your-api-key',
  
  // Suggested questions
  suggestedQuestions: [
    'How do I track my order?',
    'What are your shipping times?',
    'How do I return an item?'
  ],
  
  // Pre-filled input (user still needs to send)
  preFill: 'I have a question about '
};

Conditional Loading

Only load widget on certain pages:

// Only on support pages
if (window.location.pathname.startsWith('/support')) {
  loadGoldilocksWidget();
}

function loadGoldilocksWidget() {
  const script = document.createElement('script');
  script.src = 'https://widget.goldilocks.chat/embed.js';
  script.dataset.apiKey = 'your-api-key';
  document.body.appendChild(script);
}

Exclude Pages

const excludedPaths = ['/checkout', '/login', '/admin'];
const currentPath = window.location.pathname;

if (!excludedPaths.some(path => currentPath.startsWith(path))) {
  loadGoldilocksWidget();
}

Delayed Loading

Load widget after page is ready:

// After DOM ready
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(loadGoldilocksWidget, 3000); // 3 second delay
});

// After user scrolls
window.addEventListener('scroll', function onScroll() {
  loadGoldilocksWidget();
  window.removeEventListener('scroll', onScroll);
}, { once: true });

Z-Index Control

Override widget stacking:

window.goldilocksSettings = {
  apiKey: 'your-api-key',
  zIndex: 999999 // Higher than default
};

Or with CSS:

.goldilocks-widget {
  z-index: 999999 !important;
}

Custom Styling

Override default styles:

/* Widget button */
.goldilocks-launcher {
  background-color: #your-color !important;
}

/* Chat container */
.goldilocks-container {
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
}

/* Messages */
.goldilocks-message.ai {
  background-color: #f0f0f0 !important;
}

Custom CSS may break with widget updates. Use sparingly and test after updates.

Single Page Applications

For SPAs (React, Vue, Angular):

React Example

import { useEffect, useCallback } from 'react';
import { useLocation } from 'react-router-dom';

function useGoldilocks() {
  const location = useLocation();

  useEffect(() => {
    // Update context on route change
    if (window.Goldilocks) {
      Goldilocks.setContext({
        currentPage: location.pathname
      });
    }
  }, [location]);

  const openWidget = useCallback(() => {
    if (window.Goldilocks) {
      Goldilocks.open();
    }
  }, []);

  return { openWidget };
}

Vue Example

// Plugin
export default {
  install(app) {
    app.config.globalProperties.$goldilocks = {
      open: () => window.Goldilocks?.open(),
      close: () => window.Goldilocks?.close(),
      setContext: (ctx) => window.Goldilocks?.setContext(ctx)
    };
  }
};

Analytics Integration

Google Analytics

window.goldilocksSettings = {
  apiKey: 'your-api-key',
  
  onOpen: function() {
    gtag('event', 'widget_open', {
      'event_category': 'support',
      'event_label': 'goldilocks'
    });
  },
  
  onMessageSent: function(message) {
    gtag('event', 'chat_message', {
      'event_category': 'support',
      'event_label': 'user_message'
    });
  }
};

Segment

window.goldilocksSettings = {
  onOpen: () => analytics.track('Chat Widget Opened'),
  onMessageSent: (msg) => analytics.track('Chat Message Sent', { message: msg }),
  onEscalation: () => analytics.track('Chat Escalated')
};

Accessibility

The widget supports keyboard navigation:

Tab to navigate elements
Enter to activate
Escape to close

Screen Readers

The widget is screen-reader compatible:

ARIA labels included
Focus management
Announcements for new messages

High Contrast

Respect user preferences:

window.goldilocksSettings = {
  apiKey: 'your-api-key',
  respectHighContrast: true
};

Troubleshooting

// Check if loaded
if (window.Goldilocks) {
  console.log('Widget loaded');
} else {
  console.log('Widget not yet loaded');
}

// Check for errors
window.goldilocksSettings = {
  onError: function(error) {
    console.error('Widget error:', error);
  }
};

Conflicts

If widget conflicts with other scripts:

Load widget last
Use async or defer
Check for namespace conflicts
Isolate with iframe (advanced)