Experience Picker

<script src="https://scaleflex.cloudimg.io/v7/plugins/scaleflex/experiences-picker/1.0.5/experiences-picker.min.js?vh=511af6&func=proxy"></script>

<script>
  const picker = SpotlightPicker.open({
    apiKey: 'YOUR_API_KEY',
    onSelect: function(result) {
      console.log('Selected:', result.experience.name);
      console.log('Embed code:', result.embedCode.js);
    },
    onCancel: function() {
      console.log('Picker closed');
    }
  });
</script>

<script src="https://scaleflex.cloudimg.io/v7/plugins/scaleflex/experiences-picker/1.0.5/experiences-picker.min.js?vh=511af6&func=proxy"></script>

interface SelectResult {
  experience: {
    id: string;
    type: 'HOTSPOT' | 'SPIN_360' | 'BEFORE_AFTER' | 'TOUR' | 'THREE_D_VIEW';
    name: string;
    description: string | null;
    status: 'PUBLISHED';
    thumbnail: string | null;
    tags: string[];
    updatedAt: string;
  };
  embedCode: {
    js: string;      // Ready-to-use JS embed snippet
    iframe: string;  // iframe embed snippet
    react: string;   // React component snippet
    link: string;    // Raw embed URL for custom integrations
  };
}

interface ErrorResult {
  message: string;
  code?: 'INVALID_API_KEY' | 'MISSING_KEY' | string;
}

const picker = SpotlightPicker.open({
  apiKey: 'slx_your_api_key',
  types: ['HOTSPOT', 'SPIN_360'],
  theme: 'light',
  onSelect: function(result) {
    // Insert the embed code into your page
    document.getElementById('experience-container')
      .innerHTML = result.embedCode.js;

    // Or use the experience data
    console.log(result.experience.id);
    console.log(result.experience.name);
    console.log(result.experience.type);
  },
  onCancel: function() {
    console.log('User closed the picker');
  },
  onError: function(err) {
    console.error('Picker error:', err.message);
  }
});

// Programmatic close
picker.close();

// Full cleanup (removes iframe + listeners)
picker.destroy();

<div id="picker-container" style="height: 500px;"></div>

<script>
  SpotlightPicker.open({
    apiKey: 'slx_your_api_key',
    container: document.getElementById('picker-container'),
    onSelect: function(result) {
      alert('Selected: ' + result.experience.name);
    }
  });
</script>

import { useEffect, useRef, useCallback } from 'react';

// Load the picker script once
function usePickerScript() {
  const loaded = useRef(false);
  useEffect(() => {
    if (loaded.current) return;
    loaded.current = true;
    const script = document.createElement('script');
    script.src = 'https://scaleflex.cloudimg.io/v7/plugins/scaleflex/experiences-picker/1.0.5/experiences-picker.min.js?vh=511af6&func=proxy';
    script.async = true;
    document.head.appendChild(script);
  }, []);
}

export function ExperiencePicker({ onSelect }) {
  usePickerScript();

  const openPicker = useCallback(() => {
    if (!window.SpotlightPicker) return;

    window.SpotlightPicker.open({
      apiKey: process.env.NEXT_PUBLIC_SPOTLIGHT_API_KEY,
      onSelect: (result) => {
        onSelect(result);
      },
    });
  }, [onSelect]);

  return (
    <button onClick={openPicker}>
      Choose Experience
    </button>
  );
}

// Only show 360° spins
SpotlightPicker.open({
  apiKey: 'slx_your_api_key',
  types: ['SPIN_360'],
  onSelect: function(result) {
    console.log(result.experience);
  }
});

// Show hotspots and before/after only
SpotlightPicker.open({
  apiKey: 'slx_your_api_key',
  types: ['HOTSPOT', 'BEFORE_AFTER'],
  onSelect: function(result) {
    console.log(result.experience);
  }
});

<iframe
  id="spotlight-picker"
  src="https://spotlight.scaleflex.com/picker?key=YOUR_API_KEY&types=HOTSPOT,SPIN_360&theme=light"
  style="width: 100%; height: 500px; border: none;"
></iframe>

<script>
  var pickerIframe = document.getElementById('spotlight-picker');

  window.addEventListener('message', function(event) {
    // Only accept messages from the picker iframe
    if (event.source !== pickerIframe.contentWindow) return;

    var data = event.data;
    if (!data || !data.type) return;

    switch (data.type) {
      case 'spotlight:picker:ready':
        console.log('Picker is ready');
        break;
      case 'spotlight:picker:select':
        console.log('Selected:', data.payload.experience);
        console.log('Embed code:', data.payload.embedCode);
        break;
      case 'spotlight:picker:cancel':
        console.log('Picker cancelled');
        break;
      case 'spotlight:picker:error':
        console.error('Picker error:', data.payload.message);
        break;
    }
  });
</script>