useSurfaceSlot

useSurfaceSlot(options): UseSurfaceSlotResult

Hook that combines usePlacement decision loading with automatic rendering via PlacementRenderer.

Returns everything usePlacement returns, plus an element property containing a pre-rendered React element. Drop element into your JSX to render the placement without writing custom rendering logic.

Parameters

options

UseSurfaceSlotOptions

Returns

UseSurfaceSlotResult

Example

function FeatureGate() {
  const { element, visible } = useSurfaceSlot({
    surfaceSlot: { id: 'ai-export-gate', name: 'AI Export Gate' },
    personalization: { user_name: 'Jane' },
    onCtaClick: (uiPath) => handleCTA(uiPath),
  });

  return (
    <div>
      <h2>Export</h2>
      {element}
    </div>
  );
}