Surface Tag Enhancements

Changes

New preload Option

• Introduced a new preload configuration option with three modes:
  • "true" (default): Preloads iframe during browser idle time using requestIdleCallback (with setTimeout fallback)
  • "pageLoad": Preloads iframe immediately on page load
  • "false": Disables preloading entirely

Preload Logic

• Added preloadIframe() method that intelligently schedules iframe initialization
• Uses requestIdleCallback with a 3-second timeout for non-blocking preload
• Falls back to setTimeout for browsers without requestIdleCallback support

Iframe Caching Improvements

• Added _iframePreloaded flag to track preload completion state
• Improved cache handling to avoid unnecessary iframe reloads when options match
• If iframe is still loading during popup/slideover open, sets up onload handler without resetting src

Bug Fix

• Fixed invalid CSS: changed display: hidden to display: none for .close-btn-container

Other Additions

• Pressing esc will close the Surface form
• Speed up the animation of both popup and slideover form

Usage

<script data-question-id="ZpntedGGuSBd">
    (function () {
        const surface_src =
          "https://forms.withsurface.com/s/cmjh96qih0090l70bnp9bzaar";
        const surface_embed_type = "slideover";
        const target_element_class = "surface-form-button";
        const c = new SurfaceEmbed(
          surface_src,
          surface_embed_type,
          target_element_class,
          { preload: "true" } // can be "true", "false", "pageLoad" and default is "true"
      );
    })();
</script>