Integrate a Form Into External Website

If you have a website where you'd like to embed a Solidarity Tech form, the current method for accomplishing this is with an iframe. We will have a native embed widget released soon.

iframe method

To embed your page, create an iframe with the URL source pointing to your-site-url.solidarity.tech/page-url/embed. The embed path at the end of the page URL is critical to avoid any submission issues.

If you want the embedded iframe to break out of the iframe after the form is submitted, add the URL parameter ?breakout=true to the iframe src URL. With this setting, the entire page will be redirected after a form submission, not just the iframe content.

Auto-Resizing iFrame Solution

To make your embedded form automatically resize its height to fit the content, you'll need to add JavaScript code to both the Solidarity Tech page and the external website.

Add to Your Solidarity Tech Page

Copy and paste the code below to the Solidarity Tech page under Page Settings -> Head HTML.

<script>
  window.addEventListener('load', function() {
    // Function to send height updates to parent
    const sendHeight = function() {
      const height = document.body.scrollHeight;
      window.parent.postMessage({
        type: 'solidarity-tech-resize',
        height: height
      }, '*');
    };

    // Send initial height
    sendHeight();

    // Set up observer to detect content changes
    if (window.ResizeObserver) {
      const resizeObserver = new ResizeObserver(() => {
        sendHeight();
      });
      resizeObserver.observe(document.body);
    }

    // Also listen for window resize events
    window.addEventListener('resize', sendHeight);
  });
</script>

Add to the External Website

<script>
  // Add this code to the page where the iframe is embedded
  window.addEventListener('message', function(event) {
    // Check if message is from our iframe resize functionality
    if (event.data && event.data.type === 'solidarity-tech-resize') {
      // Find the iframe on this specific page
      // You may need to adjust the selector to target your specific iframe
      const iframe = document.querySelector('iframe');
      if (iframe) {
        // Set the height with a small buffer
        iframe.style.height = (event.data.height + 20) + 'px';
      }
    }
  });
</script>

Integration Instructions for Website Owners

Add the JavaScript code above directly to the page where you're embedding the iframe.

Platform-Specific Instructions:

WordPress: Add via a custom HTML block or page-specific custom code.
Squarespace: Add in Page Settings → Advanced → Page Header Code Injection.
Wix: Add via the Wix Editor using a custom code element on that specific page.
Other Platforms: Add to the specific page where the iframe is embedded.

This solution ensures the iframe will automatically adjust its height whenever the form content changes, eliminating scrollbars and providing a seamless user experience.